Simple ASP.NET Button Server Control Compatible with Bootstrap

• Download source - 705 B

Introduction

Bootstrap offers some really great functionality that plays relatively well with ASP.NET, allowing for a much richer user experience and built-in responsive design. When it comes to using an ASP button control in web forms, however, some key bootstrap features are not compatible. This tip explains what's missing and provides a simple BootstrapButton custom server control to make up for it.

Background

With most ASP.NET server controls, the developer can implement bootstrap functionality by simply plugging in Bootstrap CSS classes into the corresponding CssClass attribute. But to do that, you usually need to understand what HTML tags the .NET control will ultimately render. Many Bootstrap CSS classes are specific to a limited set of HTML tags. The standard ASP.NET button control raises a problem because it ultimately renders an <input> tag of type="submit" and Bootstrap needs a <button> tag in order to work to its fullest. For example:

The standard ASP.NET Button control:

<asp:Button ID="Test" runat="server" Text="Test Button" />

will render the following HTML:

<input name="ctl00$MainContent$Test" id="MainContent_Test" type="submit" value="Test Button"></input>

Although Bootstrap CSS classes can be applied to an <input> tag, it will not support content between the start and ending tags. This presents a problem when using Bootstrap glyphicons. Glyphicons are nifty little graphics built into Bootstrap that can be applied to many HTML tags without the need for an image file. They come in the form of a font and will colorize and scale automatically.

Here is a sample Bootstrap button with a glyphicon.

<button type="button" class="btn btn-default btn-lg"> 
   <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star 
</button>

and here's what it looks like:

As you can see, the <span> tag containing the glyphicon needs to be "inside" the <button> tag in order for it to render on the face of the button. Since an <input> tag does not support any content "inside" the tag, you cannot use glyphicons with a standard ASP.NET button control. That is, unless you create your own server control to do just that.

Using the Code

The BootstrapButton code below inherits from the built-in ASP.NET Button control, but overrides the HTML tag that gets rendered. This allows for all the built-in ASP.NET control functionality but with a <button> tag instead of an <input> tag. In addition, it adds a new "Glyphicon" attribute. If the attribute exists, it will render a corresponding <span> tag with the correct glyphicon identifier.

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;

namespace MySite.Controls
{
    [ParseChildren(false)]
    [PersistChildren(true)]
    public class BootstrapButton : Button
    {
        protected override string TagName
        {
            get { return "button"; }
        }

        protected override HtmlTextWriterTag TagKey
        {
            get { return HtmlTextWriterTag.Button; }
        }

        [Browsable(true)]
        [EditorBrowsable(EditorBrowsableState.Always)]
        [DisplayName("GlyphIcon")]
        public string GlyphIcon
        {
            get { return this.ViewState["GlyphIcon"] as string; }
            set { this.ViewState["GlyphIcon"] = HttpUtility.HtmlDecode(value); }
        }

        protected override void OnPreRender(System.EventArgs e)
        {
            base.OnPreRender(e);
            LiteralControl lit = new LiteralControl(this.Text);
            Controls.Add(lit);
        }

        protected override void RenderContents(HtmlTextWriter writer)
        {
            if (!string.IsNullOrEmpty(this.GlyphIcon))
            {
                writer.AddAttribute(HtmlTextWriterAttribute.Class, "glyphicon " + this.GlyphIcon);
                writer.AddStyleAttribute(HtmlTextWriterStyle.MarginRight, "5px");
                writer.RenderBeginTag(HtmlTextWriterTag.Span);
                writer.RenderEndTag(); // </span>
            }
            RenderChildren(writer);
        }
    }
}

So in order to create the same star button above, we use the following markup:

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" 
CodeBehind="Default.aspx.cs" Inherits="MySite._Default" %>
<%@ Register tagPrefix="bb" assembly="MySite" namespace="MySite.Controls" %>

.
.
.
.

<bb:BootstrapButton runat="server" Text="Star" 
CssClass="btn btn-default btn-lg" GlyphIcon="glyphicon-star" />

Happy coding!