Bootstrap compatible asp.net radio button list

Recently I have had the requirement to make some of my asp.net controls ‘bootstrap compatible’

In this instance it has been asp.net’s radio button list that is causing me consternation!

An inline bootstrap radio button list has the mark up of this:

                
                    Active
                
                    Archive

You could use hidden fields and JavaScript to control Postbacks and capture the data.I feel this is not a reliable option.

The easiest and I think the best method I have found so far is to extend the RadioButtonList to do my bidding.

I started by creating a class file to contain all of my bootstrap friendly controls, in this instance I named it ‘/App_Code/bsFriendly.cs’, creating a namespace in that class called Controls

In that file I extend the RadioButtonList, so far it looks like this:

//bsFriendly.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Controls
{
    public class bsRadioButtonList : RadioButtonList
    {
    }
}

Nothing too exciting.

Within our ‘bsRadioButtonList’ the RenderItem method has to be overridden. In VS this is a case of typing ‘protected override’ to get IntelliSense to present a list of override-able properties and methods. From that list select ‘RenderItem’, Visual Studio will create the override with a call back to it’s base.

Remove the base call and instead replace it with the following:

namespace Controls
{
    public class bsRadioButtonList : RadioButtonList
    {
 
   
        protected override void RenderItem(ListItemType itemType, int repeatIndex, RepeatInfo repeatInfo, HtmlTextWriter writer)
        {




            RadioButton radioButton = new RadioButton(); // to hold our radio button
            Literal litText = new Literal(); //to hold our labels text
            radioButton.Page = this.Page;
            radioButton.GroupName = this.UniqueID;
            radioButton.ID = this.ClientID + "_" + repeatIndex.ToString();
            radioButton.Attributes["value"] = this.Items[repeatIndex].Value;
            radioButton.Checked = this.Items[repeatIndex].Selected;
            radioButton.TextAlign = this.TextAlign;
            radioButton.AutoPostBack = this.AutoPostBack;
            radioButton.Attributes.Add("onchange", "__doPostBack('" + this.ClientID + "_" + repeatIndex.ToString() + "',' ')"); // fire postback
            radioButton.TabIndex = this.TabIndex;
            radioButton.Enabled = this.Enabled;
            System.Web.UI.HtmlControls.HtmlGenericControl gnLabelHolder = new System.Web.UI.HtmlControls.HtmlGenericControl("label"); // our label holder
            gnLabelHolder.Attributes.Add("for", this.ClientID + "_" + repeatIndex.ToString()); //associated to the radio button
            gnLabelHolder.Attributes.Add("class", "radio-inline"); //give it the bootstrap inline class, could extend as a property
            litText.Text = this.Items[repeatIndex].Text;

            gnLabelHolder.Controls.Add(radioButton); // add in the correct order of radio button then texts
            gnLabelHolder.Controls.Add(litText);
           
            
            gnLabelHolder.RenderControl(writer); //render to the writer


        }
    }

}

This will now act as new control.

To include the control on a page, simply add:

<%@ Register TagPrefix="bs" Assembly="App_Code" Namespace="Controls" %>

At the top of the page, below the Language and Codefile definitions at the top.

As a control in the page:

          
                    Active
                    Archive

                

And in our back end cs file:

    protected void test_SelectedIndexChanged(object sender, EventArgs e)
    {

    }

That’s all there is to it.

Caveats:

1. In the mark up you need to select an item, not doing so could cause confusion with postbacks
2. AutoPostBack needs to be set to true to allow the hookup on __DoPostBack