Change layout of a radioButtonList / checkBoxList Webforms to make it compatible with Bootstrap

Question

As is known, the default layout format of a radiobutton or checkbox in list controls in Asp.Net Webforms is always something like

 <label></label><input>

I wonder if there is any decent way to change the display layout to make it compatible with Bootstrap form classes.

Answer 1

In Asp.Net Webforms the controls generate an output in html controlled by Asp.Net itself, as follows:

the Asp.net tag:

<asp:CheckBoxList id="check1" AutoPostBack="True" TextAlign="Right" OnSelectedIndexChanged="Check" runat="server">
    <asp:ListItem>Item 1</asp:ListItem>
    <asp:ListItem>Item 2</asp:ListItem>
</asp:CheckBoxList>

Generates an html output of:

<table id="check1">
    <tr>
        <td><input id="check1_0" type="checkbox" name="check1$0" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;check1$0\&#39;,\&#39;\&#39;)&#39;, 0)" value="Item 1" /><label for="check1_0">Item 1</label></td>
    </tr><tr>
        <td><input id="check1_1" type="checkbox" name="check1$1" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;check1$1\&#39;,\&#39;\&#39;)&#39;, 0)" value="Item 2" /><label for="check1_1">Item 2</label></td>
    </tr>
</table>

In every Webcontrol control it is possible to define a Css through the Cssclass="string" property, for example:

<asp:TextBox id="TextBox1" ForeColor="Red" CssClass="minhaClassCSS" />

output:

<input type=text class="minhaClassCSS" style="ForeColor:red">

Unfortunately it is not easy to know how each Webcontrol control will be generated in HTML, that is, Webforms facilitates the life of the programmer in the construction of the layout but takes away from it the power to manipulate it. This is a great advantage of Asp.net MVC the power goes back to the programmer but now it is your responsibility to write a well done HTML.

In case you use Twitter-Bootstrap with Webforms there is no easy way, you will need to create the classes in your css similar to the one you want to use from Bootstrap and hope that the output of your controls are compatible.

Source: MSDN

Answer 2

Just follow the recommendation of the Bootstrap website itself, adding the classes in each tag. For Forms, the link is as follows:

http://getbootstrap.com/css/#Forms

I will use version 3.1.1 as an example (most current version when this reply was written).

Normally the following standard is used:

<div class="form-group">
    <label for="exemplo">Exemplo</label>
    <input type="text" class="form-control" id="exemplo" placeholder="Exemplo">
</div>

See the section CheckBoxes and Radios. There’s an example more or less like this:

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

As I don’t know how your form is, the ideal is to read the examples and keep changing the divs according to your need.