快捷搜索:

ASP.NET MVC使用Bootstrap种类(5)——创造AS

作者: w88官方网站手机版  发布:2019-06-22

序言

ASP.NET MVC允许开荒者创设自定义的HTML Helpers,不管是运用静态方法依然增添方法。多少个HTML Helper本质上实际是出口一段HTML字符串。

HTML Helpers能让大家在多个页面上公用同一段HTML标志,那样不光提升了稳定也可以有利开荒者去维护。当然对于那些可选拔的代码,开荒者也是有益对他们实行单元测试。所以,创制ASP.NET MVC Bootstrap Helpers是及其有不能缺少的。

ASP.NET MVC Bootstrap Helpers

 

阅读目录

  • 序言
  • 内置的HTML Helpers
  • 成立自定义的Helpers
  • 选择静态方法创制Helpers
  • 行使扩张方法创设Helpers
  • 创建Fluent Helpers
  • 创办机关关闭的Helpers
  • 小结

再次回到顶上部分

翻阅目录

内置的HTML Helpers

ASP.NET MVC内置了多少规范HTML Helpers,通过@HTML来调用这个措施在视图引擎中剖判、渲染输出HTML内容,这允许开采者在两个视图中录取公共的点子。

举个栗子,以下代码发生叁个type等于text的Input ,并且其id和name都等于CustomerName,其Value等于Northwind Traders:

  1. @Html.TextBox("CustomerName","Northwind Traders");

大多数置于的HTML helpers提供传入无名类型为要素发生钦点HTML属性的选项,对上述的@HTML.TextBox方法稍作修改,通过传播佚名类型设置输出成分的style属性:

  1. @Html.TextBox("CustomerName","Northwind Traders", new { })

序言

ASP.NET MVC允许开荒者创设自定义的HTML Helpers,不管是应用静态方法如故扩张方法。二个HTML Helper本质上其实是出口一段HTML字符串。

HTML Helpers能让大家在七个页面上公用同一段HTML标识,这样不仅仅坚实了安宁也便于开辟者去敬服。当然对于这几个可选用的代码,开荒者也可能有益于对她们开始展览单元测试。所以,成立ASP.NET MVC Bootstrap Helpers是会同有要求的。

回去最上部

  • 序言
  • 内置的HTML Helpers
  • 创办自定义的Helpers
  • 利用静态方法创造Helpers
  • 运用扩展方法创造Helpers
  • 创建Fluent Helpers
  • 开创机关关闭的Helpers
  • 小结

创办自定义的Helpers

因为Bootstrap提供了汪洋差异的机件,所以创立Bootstrap helpers能够在八个视图上急迅利用那几个组件。在ASP.NET MVC中最简便易行创设Bootstrap helpers是由此@helper语法来贯彻。三个自定义的helper能够包罗别的HTML标识乃至Razor标志,你能够通过如下步骤来创建:

  • 在品种的根目录创造文件夹App_Code
  • 在App_Code文件夹中新建BootstrapHelpers.cshtml文件并插手如下代码
  1. @helper PrimaryButtonSmall(string id,string caption)

  2. {

  3.     <button id="@id" type="button" class="btn btn-primary btn-sm">@caption</button>

  4. }

上述代码应用@helper创制了贰个新的名字为PrimaryButtonSmall helper,它承受2个参数,分别是Id和caption。在那之中,它产生贰个Button类型的HTML标志并设置了Bootstrap的体制。

瞩目:任何自定义的helpers必须存在App_Code文件夹中,那样技巧被ASP.NET MVC视图识别。

  • 在视图中经过 @BootstrapHelpers.PrimaryButtonSmall("btnSave","保存")来使用新创造的helper。
  • 它将产生如下Bootstrap HTML成分:

图片 1

自然,为了让大家的helper特别通用性,举个例子钦赐大小、样式等,对上述稍作如下修改,扩张传入的参数:

  1. @helper Button(string style, string size, string caption, string id)

  2. {

  3.     <button id="@id" type="button" class="btn btn-@style btn-@size">@caption </button>

  4. }

当今咱们得以那样去行使:

  1. @BootstrapHelpers.Button("danger","lg","危险","btnDanger")

它将发生如下样式的开关:

图片 2

而是,这种格局的helper唯一的不足是您须求"hard code"传入样式和尺寸,那只怕须求你特别熟知Bootstrap的体制。

内置的HTML Helpers

ASP.NET MVC内置了若干行业内部HTML Helpers,通过@HTML来调用那一个方法在视图引擎中解析、渲染输出HTML内容,那允许开辟者在几个视图中选定公共的章程。

举个栗子,以下代码发生贰个type等于text的Input ,并且其id和name都等于CustomerName,其Value等于Northwind Traders:

  1. @Html.TextBox("CustomerName","Northwind Traders");

多数停放的HTML helpers提供传入无名类型为因素爆发钦点HTML属性的选项,对上述的@HTML.TextBox方法稍作修改,通过传播无名类型设置输出成分的style属性:

  1. @Html.TextBox("CustomerName","Northwind Traders", new { })

再次回到顶端

回来顶端

应用静态方法创制Helpers

通过静态方法一样也能便捷方便的创设自定义Bootstrap helpers,同样它也是回去了HTML标志,要开创静态方法,你能够依照如下步骤来促成:

  • 增多命了Helpers的文本夹
  • 创制如下枚举类
  1. public class ButtonHelper

  2.    {

  3.        public static MvcHtmlString Button(string caption, Enums.ButtonStyle style, Enums.ButtonSize size)

  4.        {

  5.            if (size != Enums.ButtonSize.Normal)

  6.            {

  7.                return new MvcHtmlString(string.Format("<button type="button" class="btn btn-{0} btn-{1}">{2}</button>", style.ToString().ToLower(), ToBootstrapSize(size), caption));

  8.            }

  9.            return new MvcHtmlString(string.Format("<button type="button" class="btn btn-{0}">{1}</button>", style.ToString().ToLower(), caption));

  10.        }

  11.  

  12.        private static string ToBootstrapSize(Enums.ButtonSize size)

  13.        {

  14.            string bootstrapSize = string.Empty;

  15.            switch (size)

  16.            {

  17.                case Enums.ButtonSize.Large:

  18.                    bootstrapSize = "lg";

  19.                    break;

  20.  

  21.                case Enums.ButtonSize.Small:

  22.                    bootstrapSize = "sm";

  23.                    break;

  24.  

  25.                case Enums.ButtonSize.ExtraSmall:

  26.                    bootstrapSize = "xs";

  27.                    break;

  28.            }

  29.            return bootstrapSize;

  30.        }

  31.    }

Button方法重回了八个MvcHtmlString对象,它意味着了编码过后的HTML字符。

  • 经过应用静态方法来调用:
  1. @ButtonHelper.Button("危险", Enums.ButtonStyle.Danger, Enums.ButtonSize.Large)

您能够和事先的"hard code"写法举办比较,尽管她们发生同样的结果:

  1. @BootstrapHelpers.Button("danger","lg","危险","btnDanger")

创制自定义的Helpers

因为Bootstrap提供了大批量见仁见智的机件,所以成立Bootstrap helpers能够在多个视图上高速利用这一个零部件。在ASP.NET MVC中最简便易行创立Bootstrap helpers是透过@helper语法来达成。贰个自定义的helper能够分包别的HTML标志以致Razor标志,你能够因而如下步骤来创制:

  • 在品种的根目录创建文件夹App_Code
  • 在App_Code文件夹中新建BootstrapHelpers.cshtml文件并加入如下代码
  1. @helper PrimaryButtonSmall(string id,string caption)

  2. {

  3.     <button id="@id" type="button" >@caption</button>

  4. }

上述代码应用@helper创办了二个新的名称为PrimaryButtonSmall helper,它承受2个参数,分别是Id和caption。在那之中,它发生贰个Button类型的HTML标志并安装了Bootstrap的样式。

小心:任何自定义的helpers必须存在App_Code文件夹中,那样技巧被ASP.NET MVC视图识别。

  • 在视图中通过 @BootstrapHelpers.PrimaryButtonSmall("btnSave","保存")来采用新创造的helper。
  • 它将生出如下Bootstrap HTML成分:

图片 3

当然,为了让大家的helper特别通用性,比如钦点大小、样式等,对上述稍作如下修改,增添传入的参数:

  1. @helper Button(string style, string size, string caption, string id)

  2. {

  3.     <button id="@id" type="button" >@caption </button>

  4. }

明天大家得以那样去接纳:

  1. @BootstrapHelpers.Button("danger","lg","危险","btnDanger")

它将生出如下样式的开关:

图片 4

可是,这种措施的helper唯一的阙如是您要求"hard code"传入样式和尺寸,那大概需求您可怜熟练Bootstrap的体制。

归来顶上部分

序言

ASP.NET MVC允许开辟者创立自定义的HTML Helpers,不管是行使静态方法依旧扩张方法。一个HTML Helper本质上其实是出口一段HTML字符串。

HTML Helpers能让我们在七个页面上公用同一段HTML标志,那样不但升高了平静也惠及开采者去维护。当然对于这一个可选拔的代码,开采者也造福对他们开始展览单元测试。所以,创设ASP.NET MVC Bootstrap Helpers是连同有须求的。

回到最上部

利用扩大方法创立Helpers

内置的ASP.NET MVC helper(@HTML)是基于扩充方法的,大家能够再对上述的静态方法实行进级——使用扩张方法来创制Bootstrap helpers。

  • 在Helpers文件夹下创建ButtonExtensions类
  • 修改ButtonExtensions为Static类型
  • 修改Namespace为System.Web.Mvc.Html,那样方便@HTML调用扩充方法
  • 加多扩大方法,重返MvcHtmlString
  1. public static MvcHtmlString BootstrapButton(this HtmlHelper helper, string caption, Enums.ButtonStyle style, Enums.ButtonSize size)

  2.         {

  3.             if (size != Enums.ButtonSize.Normal)

  4.             {

  5.                 return new MvcHtmlString(string.Format("<button type="button" class="btn btn-{0} btn-{1}">{2}</button>", style.ToString().ToLower(), ToBootstrapSize(size), caption));

  6.             }

  7.             return new MvcHtmlString(string.Format("<button type="button" class="btn btn-{0}">{1}</button>", style.ToString().ToLower(), caption));

  8.         }

因为BootstrapButton方法是扩大方法,通过如下格局去调用:

  1. @Html.BootstrapButton("很危险",Enums.ButtonStyle.Danger,Enums.ButtonSize.Large)

写法虽差别,但回来的结果都以均等的。

使用静态方法创立Helpers

因此静态方法相同也能飞快方便的始建自定义Bootstrap helpers,同样它也是回来了HTML标志,要创立静态方法,你能够依据如下步骤来落到实处:

  • 增添命了Helpers的文书夹
  • 创设如下枚举类
  1. public class ButtonHelper

  2.    {

  3.        public static MvcHtmlString Button(string caption, Enums.ButtonStyle style, Enums.ButtonSize size)

  4.        {

  5.            if (size != Enums.ButtonSize.Normal)

  6.            {

  7.                return new MvcHtmlString(string.Format("<button type="button" class="btn btn-{0} btn-{1}">{2}</button>", style.ToString().ToLower(), ToBootstrapSize(size), caption));

  8.            }

  9.            return new MvcHtmlString(string.Format("<button type="button" class="btn btn-{0}">{1}</button>", style.ToString().ToLower(), caption));

  10.        }

  11.  

  12.        private static string ToBootstrapSize(Enums.ButtonSize size)

  13.        {

  14.            string bootstrapSize = string.Empty;

  15.            switch (size)

  16.            {

  17.                case Enums.ButtonSize.Large:

  18.                    bootstrapSize = "lg";

  19.                    break;

  20.  

  21.                case Enums.ButtonSize.Small:

  22.                    bootstrapSize = "sm";

  23.                    break;

  24.  

  25.                case Enums.ButtonSize.ExtraSmall:

  26.                    bootstrapSize = "xs";

  27.                    break;

  28.            }

  29.            return bootstrapSize;

  30.        }

  31.    }

Button方法再次回到了三个MvcHtmlString对象,它代表了编码过后的HTML字符。

  • 通过使用静态方法来调用:
  1. @ButtonHelper.Button("危险", Enums.ButtonStyle.Danger, Enums.ButtonSize.Large)

您能够和前边的"hard code"写法进行相比较,就算他们发生同样的结果:

  1. @BootstrapHelpers.Button("danger","lg","危险","btnDanger")

重临顶端

内置的HTML Helpers

ASP.NET MVC内置了若干行业内部HTML Helpers,通过@HTML来调用那么些方法在视图引擎中解析、渲染输出HTML内容,那允许开垦者在七个视图中收音和录音公共的艺术。

举个栗子,以下代码发生一个type等于text的Input ,并且其id和name都等于CustomerName,其Value等于Northwind Traders:

  1. @Html.TextBox("CustomerName","Northwind Traders");

好些个放权的HTML helpers提供传入佚名类型为因素产生内定HTML属性的选项,对上述的@HTML.TextBox主意稍作修改,通过传播佚名类型设置输出成分的style属性:

  1. @Html.TextBox("CustomerName","Northwind Traders", new { style="" })

回去最上部

创建Fluent Helpers

Fluent Interface(参考:

举个栗子,我们将创建一个HTML helper来产生多个可关闭的警示框,使用Fluent Interface能够这么来调用:

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

就此要开创Fluent helpers,须求贯彻如下步骤:

  • 创设IFluentAlert实现IHtmlString接口,那是非常重大的一步,对于ASP.NET MVC Razor视图引擎,假如@之后重临的种类完结了IHtmlString接口,那么视图引擎会自动调用ToHtmlString()方法,重回实际的HTML标志。
  1. public interface IAlertFluent : IHtmlString

  2.     {

  3.         IAlertFluent Dismissible(bool canDismiss = true);

  4.     }

  • 创建IAlert实现IFluentAlert接口
  1. public interface IAlert : IAlertFluent

  2. {

  3.     IAlertFluent Danger();

  4.     IAlertFluent Info();

  5.     IAlertFluent Success();

  6.     IAlertFluent Warning();

  7. }

  • 创建Alert继承IAlert接口
  1. public class Alert : IAlert

  2.    {

  3.        private Enums.AlertStyle _style;

  4.        private bool _dismissible;

  5.        private string _message;

  6.  

  7.        public Alert(string message)

  8.        {

  9.            _message = message;

  10.        }

  11.  

  12.        public IAlertFluent Danger()

  13.        {

  14.            _style = Enums.AlertStyle.Danger;

  15.            return new AlertFluent(this);

  16.        }

  17.  

  18.        public IAlertFluent Info()

  19.        {

  20.            _style = Enums.AlertStyle.Info;

  21.            return new AlertFluent(this);

  22.        }

  23.  

  24.        public IAlertFluent Success()

  25.        {

  26.            _style = Enums.AlertStyle.Success;

  27.            return new AlertFluent(this);

  28.        }

  29.  

  30.        public IAlertFluent Warning()

  31.        {

  32.            _style = Enums.AlertStyle.Warning;

  33.            return new AlertFluent(this);

  34.        }

  35.  

  36.        public IAlertFluent Dismissible(bool canDismiss = true)

  37.        {

  38.            this._dismissible = canDismiss;

  39.            return new AlertFluent(this);

  40.        }

  41.  

  42.        public string ToHtmlString()

  43.        {

  44.            var alertDiv = new TagBuilder("div");

  45.            alertDiv.AddCssClass("alert");

  46.            alertDiv.AddCssClass("alert-" _style.ToString().ToLower());

  47.            alertDiv.InnerHtml = _message;

  48.  

  49.            if (_dismissible)

  50.            {

  51.                alertDiv.AddCssClass("alert-dismissable");

  52.                alertDiv.InnerHtml = AddCloseButton();

  53.            }

  54.  

  55.            return alertDiv.ToString();

  56.        }

  57.  

  58.        private static TagBuilder AddCloseButton()

  59.        {

  60.            var closeButton = new TagBuilder("button");

  61.            closeButton.AddCssClass("close");

  62.            closeButton.Attributes.Add("data-dismiss", "alert");

  63.            closeButton.InnerHtml = "×";

  64.            return closeButton;

  65.        }

  66.    }

上述代码中,通过TagBuilder能够飞速的开创HTML成分。

  • 创建AlertFluent继承IAlertFluent
  1. public class AlertFluent : IAlertFluent

  2.     {

  3.         private readonly Alert _parent;

  4.  

  5.         public AlertFluent(Alert parent)

  6.         {

  7.             _parent = parent;

  8.         }

  9.  

  10.         public IAlertFluent Dismissible(bool canDismiss = true)

  11.         {

  12.             return _parent.Dismissible(canDismiss);

  13.         }

  14.  

  15.         public string ToHtmlString()

  16.         {

  17.             return _parent.ToHtmlString();

  18.         }

  19.     }

  • 最后创立静态方法
  1. public static class AlertHelper

  2. {

  3.     public static Alert Alert(this HtmlHelper html,string message)

  4.     {

  5.         return new Alert(message);

  6.     }

  7. }

透过创设这种Fluent API,大家得以链式的去创设Bootstrap 组件,那对于不熟悉Bootstrap Framework的人的话是不行有利的,大家得以行使@HTML.Alert("Title").Danger().Dismissible()来创立如下风格的警告框:

图片 5

利用扩展方法成立Helpers

内置的ASP.NET MVC helper(@HTML)是依靠扩充方法的,大家得以再对上述的静态方法进行进级换代——使用扩张方法来创制Bootstrap helpers。

  • 在Helpers文件夹下创设ButtonExtensions类
  • 修改ButtonExtensions为Static类型
  • 修改Namespace为System.Web.Mvc.Html,那样便于@HTML调用扩张方法
  • 加上扩展方法,重临MvcHtmlString
  1. public static MvcHtmlString BootstrapButton(this HtmlHelper helper, string caption, Enums.ButtonStyle style, Enums.ButtonSize size)

  2.         {

  3.             if (size != Enums.ButtonSize.Normal)

  4.             {

  5.                 return new MvcHtmlString(string.Format("<button type="button" class="btn btn-{0} btn-{1}">{2}</button>", style.ToString().ToLower(), ToBootstrapSize(size), caption));

  6.             }

  7.             return new MvcHtmlString(string.Format("<button type="button" class="btn btn-{0}">{1}</button>", style.ToString().ToLower(), caption));

  8.         }

因为BootstrapButton方法是扩张方法,通过如下情势去调用:

  1. @Html.BootstrapButton("很危险",Enums.ButtonStyle.Danger,Enums.ButtonSize.Large)

写法虽分裂,但回到的结果都以同等的。

归来最上部

制造自定义的Helpers

因为Bootstrap提供了大气不等的零件,所以创设Bootstrap helpers能够在几个视图上连忙利用那几个零件。在ASP.NET MVC中最简单易行创设Bootstrap helpers是通过@helper语法来贯彻。八个自定义的helper能够涵盖其余HTML标识以致Razor标志,你能够经过如下步骤来创制:

  • 在类型的根目录创造文件夹App_Code
  • 在App_Code文件夹中新建BootstrapHelpers.cshtml文件并进入如下代码
  1. @helper PrimaryButtonSmall(string id,string caption)

  2. {

  3.     <button id="@id" type="button" class="btn btn-primary btn-sm">@caption</button>

  1. }

上述代码应用@helper开创了三个新的名叫PrimaryButtonSmall helper,它接受2个参数,分别是Id和caption。个中,它爆发三个Button类型的HTML标志并安装了Bootstrap的样式。

瞩目:任何自定义的helpers必须存在App_Code文件夹中,那样工夫被ASP.NET MVC视图识别。

  • 在视图中经过 @BootstrapHelpers.PrimaryButtonSmall("btnSave","保存")来使用新创立的helper。

  • 它将时有产生如下Bootstrap HTML成分:

图片 6

自然,为了让我们的helper特别通用性,例如钦命大小、样式等,对上述稍作如下修改,增添传入的参数:

  1. @helper Button(string style, string size, string caption, string id)

  2. {

  3.     <button id="@id" type="button" class="btn btn-@style btn-@size">@caption </button>

  1. }

今后大家能够这么去行使:

  1. @BootstrapHelpers.Button("danger","lg","危险","btnDanger")

它将发生如下样式的开关:

图片 7

可是,这种艺术的helper唯一的贫乏是您供给"hard code"传入样式和尺寸,那或然供给你充裕熟稔Bootstrap的体裁。

回去顶上部分

开创机关关闭的Helpers

在ASP.NET MVC中,内置的@HTML.BeginForm() helper就是四个自动关闭的helper。当然大家也能自定义自动关闭的helpers,只要达成IDisposable接口就能够。使用IDisposable接口,当目的Dispose时大家输出成分的密闭标志,具体根据如下步骤:

  • 就此在Helpers文件夹下创造贰个名叫Panel的文件夹
  • 添加Panel,并实现IDisposable接口
  1. public class Panel : IDisposable

  2.     {

  3.         private readonly TextWriter _writer;

  4.  

  5.         public Panel(HtmlHelper helper, string title, Enums.PanelStyle style = Enums.PanelStyle.Default)

  6.         {

  7.             _writer = helper.ViewContext.Writer;

  8.  

  9.             var panelDiv = new TagBuilder("div");

  10.             panelDiv.AddCssClass("panel-" style.ToString().ToLower());

  11.             panelDiv.AddCssClass("panel");

  12.  

  13.             var panelHeadingDiv = new TagBuilder("div");

  14.             panelHeadingDiv.AddCssClass("panel-heading");

  15.  

  16.             var heading3Div = new TagBuilder("h3");

  17.             heading3Div.AddCssClass("panel-title");

  18.             heading3Div.SetInnerText(title);

  19.  

  20.             var panelBodyDiv = new TagBuilder("div");

  21.             panelBodyDiv.AddCssClass("panel-body");

  22.  

  23.             panelHeadingDiv.InnerHtml = heading3Div.ToString();

  24.  

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

  26.             _writer.Write(html);

  27.         }

  28.  

  29.         public void Dispose()

  30.         {

  31.             _writer.Write("</div></div>");

  32.         }

  33.     }

上述代码中运用Write属性能够在脚下视图中输出HTML标识,并在Dispose方法里输出2个闭合的<div>标签。

留意,大家重写了TagBuilder的ToString()方法,只让它生成<div>成分的早先标签。

  • 在View中央银行使机动关闭的helpers
  1. @using (Html.Panel("Title", Enums.PanelStyle.Success))

  2. {

  3.     <p>那是自动关闭的Helpers</p>

  4.     <p>panel..</p>

  5. }

发出的结果如下:

图片 8

创建Fluent Helpers

Fluent Interface(参考:

举个栗子,大家将开创叁个HTML helper来发生一个可关闭的警示框,使用Fluent Interface能够这么来调用:

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

故而要成立Fluent helpers,需求达成如下步骤:

  • 创制IFluentAlert达成IHtmlString接口,那是不行重大的一步,对于ASP.NET MVC Razor视图引擎,如若@之后再次来到的门类达成了IHtmlString接口,那么视图引擎会自动调用ToHtmlString()方法,重临实际的HTML标志。
  1. public interface IAlertFluent : IHtmlString

  2.     {

  3.         IAlertFluent Dismissible(bool canDismiss = true);

  4.     }

  • 创建IAlert实现IFluentAlert接口
  1. public interface IAlert : IAlertFluent

  2. {

  3.     IAlertFluent Danger();

  4.     IAlertFluent Info();

  5.     IAlertFluent Success();

  6.     IAlertFluent Warning();

  7. }

  • 创建Alert继承IAlert接口
  1. public class Alert : IAlert

  2.    {

  3.        private Enums.AlertStyle _style;

  4.        private bool _dismissible;

  5.        private string _message;

  6.  

  7.        public Alert(string message)

  8.        {

  9.            _message = message;

  10.        }

  11.  

  12.        public IAlertFluent Danger()

  13.        {

  14.            _style = Enums.AlertStyle.Danger;

  15.            return new AlertFluent(this);

  16.        }

  17.  

  18.        public IAlertFluent Info()

  19.        {

  20.            _style = Enums.AlertStyle.Info;

  21.            return new AlertFluent(this);

  22.        }

  23.  

  24.        public IAlertFluent Success()

  25.        {

  26.            _style = Enums.AlertStyle.Success;

  27.            return new AlertFluent(this);

  28.        }

  29.  

  30.        public IAlertFluent Warning()

  31.        {

  32.            _style = Enums.AlertStyle.Warning;

  33.            return new AlertFluent(this);

  34.        }

  35.  

  36.        public IAlertFluent Dismissible(bool canDismiss = true)

  37.        {

  38.            this._dismissible = canDismiss;

  39.            return new AlertFluent(this);

  40.        }

  41.  

  42.        public string ToHtmlString()

  43.        {

  44.            var alertDiv = new TagBuilder("div");

  45.            alertDiv.AddCssClass("alert");

  46.            alertDiv.AddCssClass("alert-" _style.ToString().ToLower());

  47.            alertDiv.InnerHtml = _message;

  48.  

  49.            if (_dismissible)

  50.            {

  51.                alertDiv.AddCssClass("alert-dismissable");

  52.                alertDiv.InnerHtml = AddCloseButton();

  53.            }

  54.  

  55.            return alertDiv.ToString();

  56.        }

  57.  

  58.        private static TagBuilder AddCloseButton()

  59.        {

  60.            var closeButton = new TagBuilder("button");

  61.            closeButton.AddCssClass("close");

  62.            closeButton.Attributes.Add("data-dismiss", "alert");

  63.            closeButton.InnerHtml = "×";

  64.            return closeButton;

  65.        }

  66.    }

上述代码中,通过TagBuilder能够连忙的成立HTML成分。

  • 创建AlertFluent继承IAlertFluent
  1. public class AlertFluent : IAlertFluent

  2.     {

  3.         private readonly Alert _parent;

  4.  

  5.         public AlertFluent(Alert parent)

  6.         {

  7.             _parent = parent;

  8.         }

  9.  

  10.         public IAlertFluent Dismissible(bool canDismiss = true)

  11.         {

  12.             return _parent.Dismissible(canDismiss);

  13.         }

  14.  

  15.         public string ToHtmlString()

  16.         {

  17.             return _parent.ToHtmlString();

  18.         }

  19.     }

  • 最终创立静态方法
  1. public static class AlertHelper

  2. {

  3.     public static Alert Alert(this HtmlHelper html,string message)

  4.     {

  5.         return new Alert(message);

  6.     }

  7. }

透过构建这种Fluent API,大家得以链式的去创建Bootstrap 组件,那对于素不相识Bootstrap Framework的人的话是老大有益的,大家得以应用@HTML.Alert("Title").Danger().Dismissible()来创建如下风格的警告框:

图片 9

归来顶端

选用静态方法成立Helpers

透过静态方法一样也能连忙方便的创办自定义Bootstrap helpers,一样它也是回到了HTML标志,要成立静态方法,你能够依据如下步骤来促成:

  • 加多命了Helpers的文件夹
  • 创办如下枚举类
  1. public class ButtonHelper

  2.    {

  3.        public static MvcHtmlString Button(string caption, Enums.ButtonStyle style, Enums.ButtonSize size)

  1.        {

  2.            if (size != Enums.ButtonSize.Normal)

  1.            {

  2.                return new MvcHtmlString(string.Format("<button type="button" class="btn btn-{0} btn-{1}">{2}</button>", style.ToString().ToLower(), ToBootstrapSize(size), caption));

  1.            }

  2.            return new MvcHtmlString(string.Format("<button type="button" class="btn btn-{0}">{1}</button>", style.ToString().ToLower(), caption));

  3.        }

  4.  

  5.        private static string ToBootstrapSize(Enums.ButtonSize size)

  1.        {

  2.            string bootstrapSize = string.Empty;

  3.            switch (size)

  4.            {

  5.                case Enums.ButtonSize.Large:

  6.                    bootstrapSize = "lg";

  7.                    break;

  8.  

  9.                case Enums.ButtonSize.Small:

  10.                    bootstrapSize = "sm";

  11.                    break;

  12.  

  13.                case Enums.ButtonSize.ExtraSmall:

  1.                    bootstrapSize = "xs";

  2.                    break;

  3.            }

  4.            return bootstrapSize;

  5.        }

  6.    }

Button方法重临了四个MvcHtmlString对象,它表示了编码过后的HTML字符。

  • 通过使用静态方法来调用:
  1. @ButtonHelper.Button("危险", Enums.ButtonStyle.Danger, Enums.ButtonSize.Large)

你能够和事先的"hard code"写法开始展览相比较,纵然她们暴发一样的结果:

  1. @BootstrapHelpers.Button("danger","lg","危险","btnDanger")

回去最上部

小结

在那篇博客中,为了削减书写HTML标识,大家创立了好多Bootstrap helpers来贯彻。那么些helpers的意义在于能让不打听Bootstrap Framework的人也能高效上手Bootstrap。

参照他事他说加以考察代码下载


创建机关关闭的Helpers

在ASP.NET MVC中,内置的@HTML.BeginForm() helper正是一个电动关闭的helper。当然大家也能自定义自动关闭的helpers,只要达成IDisposable接口就可以。使用IDisposable接口,当对象Dispose时大家输出成分的密闭标志,具体根据如下步骤:

  • 故而在Helpers文件夹下创设三个名称为Panel的文件夹
  • 添加Panel,并实现IDisposable接口
  1. public class Panel : IDisposable

  2.     {

  3.         private readonly TextWriter _writer;

  4.  

  5.         public Panel(HtmlHelper helper, string title, Enums.PanelStyle style = Enums.PanelStyle.Default)

  6.         {

  7.             _writer = helper.ViewContext.Writer;

  8.  

  9.             var panelDiv = new TagBuilder("div");

  10.             panelDiv.AddCssClass("panel-" style.ToString().ToLower());

  11.             panelDiv.AddCssClass("panel");

  12.  

  13.             var panelHeadingDiv = new TagBuilder("div");

  14.             panelHeadingDiv.AddCssClass("panel-heading");

  15.  

  16.             var heading3Div = new TagBuilder("h3");

  17.             heading3Div.AddCssClass("panel-title");

  18.             heading3Div.SetInnerText(title);

  19.  

  20.             var panelBodyDiv = new TagBuilder("div");

  21.             panelBodyDiv.AddCssClass("panel-body");

  22.  

  23.             panelHeadingDiv.InnerHtml = heading3Div.ToString();

  24.  

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

  26.             _writer.Write(html);

  27.         }

  28.  

  29.         public void Dispose()

  30.         {

  31.             _writer.Write("</div></div>");

  32.         }

  33.     }

上述代码中选择Write属性能够在当下视图中输出HTML标志,并在Dispose方法里输出2个闭合的<div>标签。

注意,我们重写了TagBuilder的ToString()方法,只让它生成<div>成分的发端标签。

  • 在View中运用机动关闭的helpers
  1. @using (Html.Panel("Title", Enums.PanelStyle.Success))

  2. {

  3.     <p>那是自动关闭的Helpers</p>

  4.     <p>panel..</p>

  5. }

发出的结果如下:

图片 10

回去最上部

动用扩张方法成立Helpers

内置的ASP.NET MVC helper(@HTML)是基于扩展方法的,大家能够再对上述的静态方法进行升高——使用扩充方法来创制Bootstrap helpers。

  • 在Helpers文件夹下创设ButtonExtensions类
  • 修改ButtonExtensions为Static类型
  • 修改Namespace为System.Web.Mvc.Html,那样方便@HTML调用扩大方法
  • 加上扩大方法,再次来到MvcHtmlString
  1. public static MvcHtmlString BootstrapButton(this HtmlHelper helper, string caption, Enums.ButtonStyle style, Enums.ButtonSize size)

  2.         {

  3.             if (size != Enums.ButtonSize.Normal)

  1.             {

  2.                 return new MvcHtmlString(string.Format("<button type="button" class="btn btn-{0} btn-{1}">{2}</button>", style.ToString().ToLower(), ToBootstrapSize(size), caption));

  1.             }

  2.             return new MvcHtmlString(string.Format("<button type="button" class="btn btn-{0}">{1}</button>", style.ToString().ToLower(), caption));

  3.         }

因为BootstrapButton方法是扩张方法,通过如下格局去调用:

  1. @Html.BootstrapButton("很危险",Enums.ButtonStyle.Danger,Enums.ButtonSize.Large)

写法虽分化,但回来的结果都是千篇一律的。

归来顶端

小结

在这篇博客中,为了削减书写HTML标识,大家成立了多少Bootstrap helpers来兑现。那么些helpers的含义在于能让不打听Bootstrap Framework的人也能便捷上手Bootstrap。

参谋代码下载

图片 11

本博客为木益州主原创,基于Creative Commons Attribution 2.5 China Mainland License发表,迎接转发,演绎或用于商业指标,可是必须保留本文的签字木明州主(包涵链接)。如你有别的难题依然授权方面包车型地铁情商,请给本身留言。


创建Fluent Helpers

Fluent Interface(参考:

举个栗子,大家将创造一个HTML helper来爆发多个可关闭的警示框,使用Fluent Interface能够如此来调用:

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

为此要创设Fluent helpers,须求实现如下步骤:

  • 创办IFluentAlert实现IHtmlString接口,那是老大重大的一步,对于ASP.NET MVC Razor视图引擎,假设@之后回来的花色达成了IHtmlString接口,那么视图引擎会自动调用ToHtmlString()方法,再次回到实际的HTML标志。
  1. public interface IAlertFluent : IHtmlString
  1.     {

  2.         IAlertFluent Dismissible(bool canDismiss = true);

  3.     }

  • 创建IAlert实现IFluentAlert接口
  1. public interface IAlert : IAlertFluent
  1. {

  2.     IAlertFluent Danger();

  3.     IAlertFluent Info();

  4.     IAlertFluent Success();

  5.     IAlertFluent Warning();

  6. }

  • 创建Alert继承IAlert接口
  1. public class Alert : IAlert
  1.    {

  2.        private Enums.AlertStyle _style;

  1.        private bool _dismissible;

  2.        private string _message;

  3.  

  4.        public Alert(string message)

  5.        {

  6.            _message = message;

  1.        }

  2.  

  3.        public IAlertFluent Danger()

  4.        {

  5.            _style = Enums.AlertStyle.Danger;

  6.            return new AlertFluent(this);

  1.        }

  2.  

  3.        public IAlertFluent Info()

  4.        {

  5.            _style = Enums.AlertStyle.Info;

  6.            return new AlertFluent(this);

  1.        }

  2.  

  3.        public IAlertFluent Success()

  4.        {

  5.            _style = Enums.AlertStyle.Success;

  6.            return new AlertFluent(this);

  1.        }

  2.  

  3.        public IAlertFluent Warning()

  4.        {

  5.            _style = Enums.AlertStyle.Warning;

  6.            return new AlertFluent(this);

  1.        }

  2.  

  3.        public IAlertFluent Dismissible(bool canDismiss = true)

  4.        {

  5.            this._dismissible = canDismiss;

  6.            return new AlertFluent(this);

  1.        }

  2.  

  3.        public string ToHtmlString()

  4.        {

  5.            var alertDiv = new TagBuilder("div");

  6.            alertDiv.AddCssClass("alert");

  7.            alertDiv.AddCssClass("alert-" _style.ToString().ToLower());

  1.            alertDiv.InnerHtml = _message;

  2.  

  3.            if (_dismissible)

  4.            {

  5.                alertDiv.AddCssClass("alert-dismissable");

  6.                alertDiv.InnerHtml = AddCloseButton();

  7.            }

  8.  

  9.            return alertDiv.ToString();

  10.        }

  11.  

  12.        private static TagBuilder AddCloseButton()

  13.        {

  14.            var closeButton = new TagBuilder("button");

  15.            closeButton.AddCssClass("close");

  16.            closeButton.Attributes.Add("data-dismiss", "alert");

  17.            closeButton.InnerHtml = "×";

  18.            return closeButton;

  19.        }

  20.    }

上述代码中,通过TagBuilder能够高速的创导HTML成分。

  • 创建AlertFluent继承IAlertFluent
  1. public class AlertFluent : IAlertFluent
  1.     {

  2.         private readonly Alert _parent;

  3.  

  4.         public AlertFluent(Alert parent)

  5.         {

  6.             _parent = parent;

  7.         }

  8.  

  9.         public IAlertFluent Dismissible(bool canDismiss = true)

  10.         {

  11.             return _parent.Dismissible(canDismiss);

  1.         }

  2.  

  3.         public string ToHtmlString()

  4.         {

  5.             return _parent.ToHtmlString();

  6.         }

  7.     }

  • 最后创立静态方法
  1. public static class AlertHelper

  2. {

  3.     public static Alert Alert(this HtmlHelper html,string message)

  1.     {

  2.         return new Alert(message);

  3.     }

  4. }

透过塑造这种Fluent API,大家能够链式的去创建Bootstrap 组件,那对于不熟谙Bootstrap Framework的人的话是十一分有益的,大家得以行使@HTML.Alert("Title").Danger().Dismissible()来创建如下风格的警告框:

图片 12

回到顶上部分

开创机关关闭的Helpers

在ASP.NET MVC中,内置的@HTML.BeginForm() helper正是八个自动关闭的helper。当然大家也能自定义自动关闭的helpers,只要完成IDisposable接口就可以。使用IDisposable接口,当对象Dispose时大家输出成分的密闭标识,具体遵照如下步骤:

  • 据此在Helpers文件夹下创立三个名字为Panel的文件夹
  • 添加Panel,并实现IDisposable接口
  1. public class Panel : IDisposable
  1.     {

  2.         private readonly TextWriter _writer;

  3.  

  4.         public Panel(HtmlHelper helper, string title, Enums.PanelStyle style = Enums.PanelStyle.Default)

  5.         {

  6.             _writer = helper.ViewContext.Writer;

  7.  

  8.             var panelDiv = new TagBuilder("div");

  9.             panelDiv.AddCssClass("panel-" style.ToString().ToLower());

  1.             panelDiv.AddCssClass("panel");

  2.  

  3.             var panelHeadingDiv = new TagBuilder("div");

  4.             panelHeadingDiv.AddCssClass("panel-heading");

  5.  

  6.             var heading3Div = new TagBuilder("h3");

  7.             heading3Div.AddCssClass("panel-title");

  8.             heading3Div.SetInnerText(title);

  1.  

  2.             var panelBodyDiv = new TagBuilder("div");

  3.             panelBodyDiv.AddCssClass("panel-body");

  4.  

  5.             panelHeadingDiv.InnerHtml = heading3Div.ToString();

  6.  

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

  1.             _writer.Write(html);
  1.         }

  2.  

  3.         public void Dispose()

  4.         {

  5.             _writer.Write("</div></div>");

  6.         }

  7.     }

上述代码中选取Write属性能够在当下视图中输出HTML标志,并在Dispose方法里输出2个闭合的<div>标签。

注意,大家重写了TagBuilder的ToString()方法,只让它生成<div>成分的起来标签。

  • 在View中运用自动关闭的helpers
  1. @using (Html.Panel("Title", Enums.PanelStyle.Success))

  2. {

  3.     <p>那是全自动关闭的Helpers</p>

  1.     <p>panel..</p>

  2. }

产生的结果如下:

图片 13

回去顶端

小结

在那篇博客中,为了削减书写HTML标识,我们创制了许多Bootstrap helpers来落到实处。这么些helpers的含义在于能让不通晓Bootstrap Framework的人也能高效上手Bootstrap。

参照代码下载

图片 14

本博客为木广陵主原创,基于Creative Commons Attribution 2.5 China Mainland License通告,迎接转发,演绎或用于商业目的,可是必须保留本文的签订契约木钱塘主(包罗链接)。如您有任何疑窦依旧授权方面包车型地铁会谈,请给小编留言。

本文由www.w88985.com发布于w88官方网站手机版,转载请注明出处:ASP.NET MVC使用Bootstrap种类(5)&mdash;&mdash;创造AS

关键词: www.w88985.c