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

Asked

Viewed 1,847 times

1

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.

  • Which version of bootstrap you plan to use?

  • 4

    Is it something legacy? If it’s something new I recommend using MVC, you have more freedom in the presentation.

  • It’s legacy, all right, man.

2 answers

2


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

  • I fixed creating a css Adapter and helper classes to solve these broken layouts. Apparently it’s the only solution that’s even simpler. Another alternative would be to create custom userControls, but it would be too much for little benefit.

0

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.

  • That’s not what I asked, man.

  • 1

    Well, then elaborate your question better, because it’s not clear.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.