Applying Bootstrap styles to RadioButtonList

Question

I have an ASP.NET WebForms application that has a RadioButtonList that I'd like to apply Bootstrap's CSS classes to.

Using the RepeatLayout="Flow" and RepeatDirection="Vertical" settings, a RadioButtonList will render like this:

<span id="PageContentPlaceHolder_RadioButtonList1">
    <input id="PageContentPlaceHolder_RadioButtonList1_0" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" value="1" />
    <label for="PageContentPlaceHolder_RadioButtonList1_0">One</label>
    <br />
    <input id="PageContentPlaceHolder_RadioButtonList1_1" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" value="2" />
    <label for="PageContentPlaceHolder_RadioButtonList1_1">Two</label>
    <br />
    <input id="PageContentPlaceHolder_RadioButtonList1_2" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" value="3" />
    <label for="PageContentPlaceHolder_RadioButtonList1_2">Three</label>
</span>

I'd like it to render like this (using Bootstrap's CSS classes):

<span id="PageContentPlaceHolder_RadioButtonList1">
    <div class="form-check">
        <input id="PageContentPlaceHolder_RadioButtonList1_0" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" class="form-check-input" value="1" />
        <label for="PageContentPlaceHolder_RadioButtonList1_0" class="form-check-label">One</label>
    </div>
    <div class="form-check">
        <input id="PageContentPlaceHolder_RadioButtonList1_1" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" class="form-check-input" value="2" />
        <label for="PageContentPlaceHolder_RadioButtonList1_1" class="form-check-label">Two</label>
    </div>
    <div class="form-check">
        <input id="PageContentPlaceHolder_RadioButtonList1_2" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" class="form-check-input" value="3" />
        <label for="PageContentPlaceHolder_RadioButtonList1_2" class="form-check-label">Three</label>
    </div>
</span>

I realize that this may be easier to do if I use a Repeater and put the individual RadioButton and Label controls within the ItemTemplate, where I could apply the CssClass values. However, I also need to attach a RequiredFieldValidator to ensure that the user makes a selection. Basically it's a multiple-choice exam and I cannot pre-select any of the radio button items. I haven't had much luck getting a validator to work with it individual radio buttons. I suppose a CustomValidator might work if I can come up with the client-side and server-side validation code.

What's the best way to go get the result I'm looking for?

Answer 1

I like using radio buttons as sub page menus. They are really nice, and the code behind works really nice as a result.

So say i have this:

My style sheet is thus this:

  body {
    }

    .radionav input {
        width: 12px;
        margin-top: 0px;
    }

    .radionav label {
        display: inline-block;
        border: 1px solid black;
        border-radius: 25px;
        height: 35px;
        padding-top: 18px;
        padding-right: 6px;
        margin-left: -20px;
        padding-left: 25px;
    }

    .radionav input[type="radio"]:checked + label {
        display: inline-block;
        border: 1px solid black;
        border-radius: 25px;
        height: 35px;
        padding-top: 18px;
        padding-right: 6px;
        margin-left: -20px;
        padding-left: 20px;
        background: #253B82;
        color: white;
        border-spacing: 10px;
    }

    .radionav:after {
        content: '';
        display: inline-block;
        width: 20px;
    }

And the above markup for the radio becomes this:

        <div style="float:left;padding-right:10px">
            <asp:RadioButtonList ID="ShowProjects" runat="server" RepeatLayout="Flow"
                AutoPostBack="True" RepeatDirection="Horizontal"  >
                <asp:ListItem Class="radionav" Selected="True">Live Projects</asp:ListItem>
                <asp:ListItem Class="radionav" >All Projects</asp:ListItem>
                <asp:ListItem Class="radionav" >My Proofs</asp:ListItem>
                <asp:ListItem Class="radionav"> Create (start) a new Project </asp:ListItem>
            </asp:RadioButtonList>
        </div>

And now we get this:

You can of course tweak the css - perhaps make the buttons a bit longer, and say narrow. I had to really chop up the css, but now I just drop in a radiobutton list, style it and then I have a nice code behind event to work with.

So, My code say might be:

   Select Case ShowProjects.SelectedIndex
        Case 0
             strWhere = "(Void = 0)"   ' show live projects
             Call LoadGrid(strWhere)
        Case 1
            strWhere = ""              ' show all projects
            Call LoadGrid(strWhere)
        Case 2
            ' show proofs
        Case 3
            ' create a project
    End Select