بوت استرپ تعدادی قابلیت های ویژه ای را ارائه می دهد که نقش نسبتا خوبی در ASP.NET بازی می کنند. زیرا به کاربر اجازه می دهد که کنترل های ASP را به صورت واکنش گرا و دلخواه سفارشی کرده و آنها را ایجاد کند. در این مقاله نشان می دهیم که چگونه یک دکمه سفارشی شده( BootstrapButton) بسازیم و مزایا و معایب آن را بشناسیم.

در اینجا می خواهیم یک کنترل سمت سرور سفارشی ایجاد کنیم که قابلیت Glyphicon بوت استرپ را به یک کنترل دکمه(button) استاندارد اضافه می کند.

پیش زمینه

یک برنامه نویس می تواند قابلیت بوت استرپ را به اکثر کنترل های سمت سرور ASP.NET توسط متصل کردن کلاس های بوت استرپ به  صفت های CssClass مربوط اضافه کند. اما برای انجام این کار معمولا نیاز است که تگ های HTML که کنترل های ASP را در برمی گیردرا بشناسید. بسیاری از کلاس های CSS بوت استرپ برای مجموعه محدودی از تگ های HTML مشخص شده است. کنترل های ASP.NET استاندارد یک مشکل را ایجاد می کند چون در نهایت یک تگ <input> برای نوع "submit" ارائه می دهد ولی بوت استرپ نیاز به یک تگ <button> برای کار با حداکثر امکانات آن دارد. برای مثال:

یک کنترل دکمه ASP.NET استاندارد:

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


HTML زیر را ارائه می دهد:

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

اگر چه  کلاس های CSS بوت استرپ را می توان برای یک تگ input بکار گرفت، اما بوت استرپ بین محتوای تگ های شروع و پایان ساپورت نمی شود. این یک مشکل در زمان استفاده از glyphicon های بوت استرپ می باشد. Glyphicon ها گرافیک های جذاب و کوچک ساخته شده در بوت استرپ هستند که می توانند برای بسیاری از تگ های HTML بدون نیاز به فایل تصویر استفاده شوند. آنها در قالب یک فونت می آیند و به صورت خودکار قابل رنگ آمیزی و مقیاس پذیر هستند.

در اینجا نمونه ای از یک دکمه بوت استرپ با یک glyphicon نشان داده شده است:

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

و به صورت زیر خروجی می دهد:

همانطور که می بینید، تگ <span> حاوی glyphicon است که نیاز به یک تگ <button> داخلی به منظور ارائه آن روی دکمه استفاده می شود. از آن جا که یک تگ <input> هیچ نوع محتوای داخلی تگ را پشتیبانی نمی کند، شما نمی توانید glyphicon ها را با یک کنترل دکمه ASP.NET استفاده کنید. مگر اینکه کنترل سمت سرور خود را به صورت سفارشی ایجاد کنید که این عمل را انجام دهد.

استفاده از کد

کد BootstrapButton  زیر از کنترل دکمه(Button) ساخته شده در ASP.NET ارث بری می کند، اما تگ HTML را به صورتی که ارائه شده بازنویسی کرده است. این کار برای تمام  کنترل ساخته شده در ASP.NET قابل انجام است اما با یک تگ <button> به جای یک تگ <input> استفاده می شود. علاوه بر این یک صفت Glyphicon جدید نیز اضافه می کند. اگر ویژگی وجود داشت، یک تگ <span> مربوط را با یک شناسه glyphicon صحیح ارائه می دهد.

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);
        }
    }
}

بنابراین به منظور ایجاد همان دکمه ستاره بالا باید از صفحه HTML زیر استفاده کنیم:

<%@ 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" />

آموزش بوت استرپ