MaterialDesign sur Checkbox ASP.NET/ Custom Controller?

Version imprimable

2 pièce(s) jointe(s)

Bonjour tout le monde!

Je viens solliciter votre aide.

Je viens de commencer mon stage de première année et c'est cool, j'apprends beaucoup et y'a des choses sur lesquels je suis complètement bloqué, en ce moment c'est sur une checkbox asp.net.

Je découvre VisualBasic & ASP.Net WebForms et même Visual Studio vu qu'en cours on utilisait macOs.

En gros j'ai ce bloc de code qui contient ma CheckBox, lui même contenu dans une GridView qui affiche une liste de message. tout est fonctionnel jusque là tout va bien.
Code:

1 2 3 4 5 6 7 8 <asp:TemplateField SortExpression="Suivi" HeaderText="Suivi" HeaderStyle-Width="7%"> <ItemTemplate> <div class="text_h_center"> <asp:CheckBox ID="chkSuivi" runat="server" Checked='<%# Eval("Suivi") %>' OnCheckedChanged="chkSuivi_CheckedChanged" onclick="event.cancelBubble=true" AutoPostBack="true" /> </div </ItemTemplate> </asp:TemplateField>
Sauf que le client demande à avoir des checkboxes en MaterialDesign comme ça :

Pièce jointe 493657

Pièce jointe 493661

Et donc je me suis dit ne connaissant pas trop ASP.NET, fastoche du css et basta! mais que nenni, j'ai passé des jours dessus le CSS ne s'applique pas sur les checkbox natives , au mieux j'avais épaissit la bordure...

J'ai cherché longuement sur le net, certains conseillait même de faire son propre controle en image qui change quand on clique dessus et de se passer de la checkBox ASP. Et j'ai essayé en vain car je ne comprends pas ce que je suis censé faire, trop de nouveauté en même temps. Je suis un peu submergé.

J'aimerai avoir vos conseils et un coup de pouce pour démarrer car j'avoue craquer un peu, je stagne et je n'apprends plus et c'est frustrant.

Voilà n'hésitez pas si je n'ai pas été clair à me dire et je vous remercie d'avance pour vos conseils!

25/07/2019, 16h41
mermich

Salut,

En css uniquement ca doit etre possible de realiser ce que tu veux faire, regarde du cote de ce s2 liens :
https://codepen.io/finnhvman/pen/zpygBB
https://codepen.io/hansmaad/pen/qaGrQL

Si tu as d'autres soucis, envoies nous le html genere, et on pourra aider faire le css qui va bien.

Je confirme que c'est possible.
Cependant la checkbox générée par <asp:CheckBox> génère une structure de type <input> + <label>

Il te faut donc un CSS qui tient compte de cette structure.
J'ai réussi à bidouiller un truc à peu près ressemblant à ce que tu veux à partir de l'exemple de cette page.
https://www.w3schools.com/howto/howt...m_checkbox.asp

Mon code ASPX est tout bête.

Code:

1
2
<asp:CheckBox ID="toto1" runat="server" Text="Choix numero 1" />
<asp:CheckBox ID="toto2" runat="server" Text="Choix numero 2"/>

Cela génère le HTML suivant :

Code:

1
2
<input id="MainContent_toto1" type="checkbox" name="ctl00$MainContent$toto1" /><label for="MainContent_toto1">Choix numero 1</label>
<input id="MainContent_toto2" type="checkbox" name="ctl00$MainContent$toto2" /><label for="MainContent_toto2">Choix numero 2</label>

Et voici le CSS qui reste encore à travailler pour obtenir ce que tu veux :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}
 
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.25em; height: 1.25em;
  border: 2px solid #22b0ca;
  background: #fff;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
 
[type="checkbox"]:checked + label:before {
  background: #22b0ca;
}
 
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '\2713\0020';
  position: absolute;
  top: .15em; left: .22em;
  font-size: 1.3em;
  line-height: 0.8;
  color: white;
  transition: all .2s;
  font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 2px black;
}
 
/* hover style just for information */
label:hover:before {
  border: 2px solid #4778d9!important;
}

1 pièce(s) jointe(s)

Merci, c'est justement ces deux modèles dont je m'étais inspiré sans y parvenir, plus particulièrement le deuxième.

le html généré ressemble à ça pour être exact:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <table> <tbody> <tr class="header_grid">...</tr> <tr> <td> <div class="text_h_center" id="jePeuxEnMettreUnIci"> <input type="checkbox" id="chkSuivi"> </div> </td> </tr> </tbody> </table>
Merci!

Merci beaucoup, c'est bizarre que je n'ai pas de balise <label> qui a été générée. EDIT j'étais fatigué hier, j'ai tout simplement pas d'attribut Text dans ma checkbox ce doit être pour ça que je n'ai pas de label.

J'essaierai demain car je n'ai pas d'accès à distance vu qu'on bosse sur des sessions serveur bridée pour la sécurité.

Et je vous tiendrais au courant.

En tout cas merci beaucoup pour vos réponses et votre réactivité. C'est top et rare d'avoir de l'aide sur du .NET

Je met une capture d'écran en plus s'il y a un truc que je ne vois pas.

Pièce jointe 493761

Merci encore

26/07/2019, 10h06
popo

Pour que la balise label soit générée, il faut mettre une propriété "Text" à ta checkBox.

1 pièce(s) jointe(s)

Citation:

Envoyé par popo

Pour que la balise label soit générée, il faut mettre une propriété "Text" à ta checkBox.

J'ai tilté après coup.

En tout cas c'est super ça m'a énormément aidé et c'est nickel.

donc j'ai fais ça si ça peut aider d'autre personnes:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}
 
/* checkbox aspect */
[type="checkbox"]:not(:checked):before,
[type="checkbox"]:checked:before {
 
  content: '';
  position: absolute;
  left: 0; 
  top: 0;
  height: 16px;
  width: 16px;
  border: 1px solid #666F83;
  background: #fff;
  border-radius: 3px;
}
 
[type="checkbox"]:checked:before {
  background: #1DCF8C;
  border: 1px solid #1DCF8C;
}
 
/* checked mark aspect */
[type="checkbox"]:not(:checked):after,
[type="checkbox"]:checked:after {
  font-family: FontAwesome; 
  font-style: normal;
  text-decoration: inherit;
  content: '\f00c';
  position: absolute;
  display:inline-block;
  padding-top: 8%;
  padding-bottom: 8%;
  padding-left: 15%;
  padding-right: 15%;
  line-height: 1.2;
  color: white;
  transition: all .3s;
}
 
[type="checkbox"]:checked:after {
  opacity: 1;
  transform: scale(1);
}
/* accessibility */
[type="checkbox"]:checked:focus:before,
[type="checkbox"]:not(:checked):focus:before {
  border: 2px #666F83;
}

Merci pour votre aide ^^