ASP.NET Webforms rendert den HTML Code der Web Server Controls in einer Art Magie. Das war früher mit der Geräte und Browser Vielfalt durchaus erwünscht. Heute wünscht man sich allerdings reinen HTML Code den man dann per CSS stylt.
Dieser Artikel zeigt wie man mit dem ASP.NET Checkbox Control die UI features von Bootstrap verbindet. Bootrap nennt dies Custom Checkbox. Soweit die CSS Klassen und HTML Struktur.
1: <div class="custom-control custom-checkbox">
2: <input type="checkbox" class="custom-control-input"
id="customCheck1">
3: <label class="custom-control-label" for="customCheck1">
Check this custom checkbox</label>
4: </div>
Folglich sollte das ASP.NET Checkbox Steuerelement mit einer CSS Klasse versehen werden
1: <asp:CheckBox ID="CheckBox1" runat="server"
CssClass="custom-control-input" />
Allerdings rendert das als Input type Checkbox als Children eines Span Elements
1: <span class="custom-control-input">
2: <input id="CheckBox1" type="checkbox" name="CheckBox1">
3: </span>
Das mag die Bootstrap Library so aber nicht. Keine toll designte Checkbox.
Sobald man zusätzliche Attribute wie css oder cssclas weg lässt, rendert die Checkbox ohne Span. Man könnte einen ASP.NET Control Adapter schreiben um sozusagen adaptives Rendering… aber das ist wirklich aus den Anfängen von Webforms.
Somit ist die Lösung gang nahe. Der HTML Teil
1: <div class="custom-control custom-checkbox">
2: <asp:CheckBox ID="chkActive" runat="server"
ClientIDMode="Static"
3: Checked="true" />
4: <label class="custom-control-label"
for="<%=chkActive.ClientID %>">Aktiv?</label>
5: </div>
Um die fehlende CSS Klasse dem Input Element hinzuzufügen, wird per JQuery Selektor die CSS Klasse eingebaut.
1: <script>
2: $(function () {
3: $('input:checkbox').addClass('custom-control-input');
4: });
5: </script>