ASP.NET MVC 隨想錄（5）——?jiǎng)?chuàng)建 ASP.NET MVC Bootstrap Helpers

舉個(gè)例子，我們將創(chuàng)建一個(gè) HTML helper 來產(chǎn)生一個(gè)可關(guān)閉的警告框，使用 Fluent Interface 可以這樣來調(diào)用：

 @Html.Alert("警告").Warning().Dismissible()

所以要?jiǎng)?chuàng)建 Fluent helpers，需要實(shí)現(xiàn)如下步驟：

1.創(chuàng)建 IFluentAlert 實(shí)現(xiàn) IHtmlString 接口，這是非常重要的一步，對于 ASP.NET MVC Razor 視圖引擎，如果 @ 之后返回的類型實(shí)現(xiàn)了 IHtmlString 接口，那么視圖引擎會(huì)自動(dòng)調(diào)用 ToHtmlString() 方法，返回實(shí)際的 HTML 標(biāo)記。

public interface IAlertFluent : IHtmlString 
{

   IAlertFluent Dismissible(bool canDismiss = true);

}

2.創(chuàng)建 IAlert 實(shí)現(xiàn) IFluentAlert 接口

public interface IAlert : IAlertFluent
{

    IAlertFluent Danger();

    IAlertFluent Info();

    IAlertFluent Success();

    IAlertFluent Warning();

}

3.創(chuàng)建 Alert 繼承 IAlert 接口

public class Alert : IAlert
   {
   private Enums.AlertStyle _style;
   private bool _dismissible;
   private string _message;

   public Alert(string message)
   {
       _message = message;
   }

   public IAlertFluent Danger()
   {
       _style = Enums.AlertStyle.Danger;
       return new AlertFluent(this);
   }

   public IAlertFluent Info()
   {
       _style = Enums.AlertStyle.Info;
       return new AlertFluent(this);
   }

   public IAlertFluent Success()
   {
       _style = Enums.AlertStyle.Success;
       return new AlertFluent(this);
   }

   public IAlertFluent Warning()
   {
       _style = Enums.AlertStyle.Warning;
       return new AlertFluent(this);
   }

   public IAlertFluent Dismissible(bool canDismiss = true)
   {
       this._dismissible = canDismiss;
       return new AlertFluent(this);
   }

   public string ToHtmlString()
   {
       var alertDiv = new TagBuilder("div");
       alertDiv.AddCssClass("alert");
       alertDiv.AddCssClass("alert-" + _style.ToString().ToLower());
       alertDiv.InnerHtml = _message;

       if (_dismissible)
       {
           alertDiv.AddCssClass("alert-dismissable");
           alertDiv.InnerHtml += AddCloseButton();
       }

       return alertDiv.ToString();
   }

   private static TagBuilder AddCloseButton()
   {
       var closeButton = new TagBuilder("button");
       closeButton.AddCssClass("close");
       closeButton.Attributes.Add("data-dismiss", "alert");
       closeButton.InnerHtml = "×";
       return closeButton;
   }
   }

上述代碼中，通過 TagBuilder 可以快速的創(chuàng)建 HTML 元素。

4.創(chuàng)建 AlertFluent 繼承 IAlertFluent

public class AlertFluent : IAlertFluent
{
    private readonly Alert _parent;

    public AlertFluent(Alert parent)
    {
        _parent = parent;
    }

    public IAlertFluent Dismissible(bool canDismiss = true)
    {
        return _parent.Dismissible(canDismiss);
    }

    public string ToHtmlString()
    {
        return _parent.ToHtmlString();
    }
}

通過構(gòu)建這種 Fluent API，我們可以鏈?zhǔn)降娜?chuàng)建 Bootstrap 組件，這對于不熟悉 Bootstrap Framework 的人來說是非常方便的，我們可以使用 @HTML.Alert("Title").Danger().Dismissible() 來創(chuàng)建如下風(fēng)格的警告框：

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter5/3.png" alt="" />

創(chuàng)建自動(dòng)閉合的 Helpers

在 ASP.NET MVC 中，內(nèi)置的 @HTML.BeginForm() helper 就是一個(gè)自動(dòng)閉合的 helper。當(dāng)然我們也能自定義自動(dòng)閉合的 helpers，只要實(shí)現(xiàn) IDisposable 接口即可。使用 IDisposable 接口，當(dāng)對象 Dispose 時(shí)我們輸出元素的閉合標(biāo)記，具體按照如下步驟：

1.所以在 Helpers 文件夾下創(chuàng)建一個(gè)名為 Panel 的文件夾 2.添加 Panel，并實(shí)現(xiàn) IDisposable 接口

public class Panel : IDisposable
{
    private readonly TextWriter _writer;

    public Panel(HtmlHelper helper, string title, Enums.PanelStyle style = Enums.PanelStyle.Default)
    {
        _writer = helper.ViewContext.Writer;

        var panelDiv = new TagBuilder("div");
        panelDiv.AddCssClass("panel-" + style.ToString().ToLower());
        panelDiv.AddCssClass("panel");

        var panelHeadingDiv = new TagBuilder("div");
        panelHeadingDiv.AddCssClass("panel-heading");

        var heading3Div = new TagBuilder("h3");
        heading3Div.AddCssClass("panel-title");
        heading3Div.SetInnerText(title);

        var panelBodyDiv = new TagBuilder("div");
        panelBodyDiv.AddCssClass("panel-body");

        panelHeadingDiv.InnerHtml = heading3Div.ToString();

        string html = string.Format("{0}{1}{2}", panelDiv.ToString(TagRenderMode.StartTag), panelHeadingDiv, panelBodyDiv.ToString(TagRenderMode.StartTag));
        _writer.Write(html);
    }

    public void Dispose()
    {
        _writer.Write("</div></div>");
    }
}

上述代碼中利用Write屬性可以在當(dāng)前視圖中輸出HTML標(biāo)記，并在Dispose方法里輸出2個(gè)閉合的div標(biāo)簽。

注意，我們重寫了TagBuilder的ToString()方法，只讓它生成div元素的開始標(biāo)簽。
3.在View中使用自動(dòng)閉合的helpers

@using (Html.Panel("Title", Enums.PanelStyle.Success))
{
    <p>這是自動(dòng)閉合的Helpers</p>
    <p>panel..</p>
}

產(chǎn)生的結(jié)果如下：

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter5/4.png" alt="" />

小結(jié)

在這篇博客中，為了減少書寫HTML標(biāo)記，我們創(chuàng)建了若干Bootstrap helpers來實(shí)現(xiàn)。這些helpers的意義在于能讓不了解Bootstrap Framework的人也能快速上手Bootstrap。