Tag Archives: ASP.net

Bootstrap compatible asp.net button

Similar to my previous post, you can use the following code to create a custom asp.net button with the ‘button’ tags used in HTML5 and bootstrap.

  [ParseChildren]
   public class bsButton : Button
    {

        private string _ButtonCss = "btn btn-default";
        [Browsable(true), Description("The css class"),]
        public string ButtonCss
        {
            get
            { return _ButtonCss; }
            set
            {
                _ButtonCss = value;
            }
        }

        private string _glyphicon = "";
        [Browsable(true), Description("GlyphiconName"),]
        public string glyphIcon
        {
            get
            {
                return _glyphicon;
            }
            set
            {
                _glyphicon = value;
            }

        }


        protected override void Render(HtmlTextWriter writer)
        {

            if (glyphIcon == "")
            {
                System.Web.UI.HtmlControls.HtmlGenericControl
                            btn = new System.Web.UI.HtmlControls.HtmlGenericControl("button");
                btn.Page = this.Page;
                btn.ID = this.ClientID;
                btn.InnerText = this.Text;
                btn.Attributes.Add("class", ButtonCss);
                btn.Visible = this.Visible;
                btn.Attributes.Add("name", this.UniqueID);
                btn.Attributes.Add("onchange", "__doPostBack('" + this.ClientID + "', 'OnClick',true)"); // fire postback
                btn.RenderControl(writer);
            }

            else {
                System.Web.UI.HtmlControls.HtmlGenericControl groupbtn = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
                groupbtn.Attributes.Add("class", "input-group-btn");

                System.Web.UI.HtmlControls.HtmlGenericControl
                       btn = new System.Web.UI.HtmlControls.HtmlGenericControl("button");
                System.Web.UI.HtmlControls.HtmlGenericControl
                    ithing = new System.Web.UI.HtmlControls.HtmlGenericControl("i");

                Literal litText = new Literal();

                ithing.Attributes.Add("class", "glyphicon glyphicon-" + glyphIcon);

                btn.Page = this.Page;
                btn.ID = this.ClientID;
                litText.Text = this.Text;
                btn.Attributes.Add("class", ButtonCss);
                btn.Visible = this.Visible;
                btn.Attributes.Add("name", this.UniqueID);
                btn.Attributes.Add("onchange", "__doPostBack('" + this.ClientID + "', 'OnClick',true)"); // fire postback
                btn.Controls.Add(ithing);
                btn.Controls.Add(litText);
                groupbtn.Controls.Add(btn);

                groupbtn.RenderControl(writer);


            }


        }
    }

you will need to surround that with

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Controls
{
//..Code here
}

Or append it to the class used for the radio button list.

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:

<div class="radio">
                <label class="radio-inline">
                    <input type="radio" value="Ac" name="optArchive" checked="checked">Active</label>
                <label class="radio-inline">
                    <input type="radio" value="Ar" name="optArchive">Archive</label>
            </div>

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:

          <bs:bsRadioButtonList AutoPostBack="true" OnSelectedIndexChanged="test_SelectedIndexChanged" ID="test" runat="server" RepeatLayout="Flow"  RepeatDirection="Horizontal">
                    <asp:ListItem Selected="True">Active</asp:ListItem>
                    <asp:ListItem>Archive</asp:ListItem>

                </bs:bsRadioButtonList>

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