前言：之前学习过很多的Bootstrap组件，博主就在脑海里构思：是否可以封装一套自己Bootstrap组件库呢。再加上看到MVC的Razor语法里面直接通过后台方法输出前端控件的方式，于是打算仿照HtmlHelper封装一套BootstrapHelper，今天只是一个开头，讲述下如何封装自己的Html组件，以后慢慢完善。

本文原创地址：

一、揭开HtmlHelper的“面纱”

经常使用Razor写法的园友都知道，在cshtml里面，我们可以通过后台的方法输出成前端的html组件，比如我们随便看两个例子：

输出成Html之后

博主的好奇心又来了，它是怎么做到的呢？于是将 Html 对象以及 Label() 方法转到定义

由此可以看出Html对象是HtmlHelper类型的一个实例，而Label()方法则是HtmlHelper类型的一个扩展方法，所以就可以直接通过Html.Label()这种方式直接调用。不熟悉C#扩展方法的园友可以看看。

 既然我们想要封装自己的HtmlHelper，那么我们就必须要了解Label()方法里面是如何实现的，我们伟大的Reflector又派上用场了。我们来反编译System.Web.MVC.dll看看。找到LabelExtensions这个类

经过一系列的转到定义，我们找到最终的方法

同样，我们找到TextBox()最终定义的方法

哟西，原来就是TagBuilder这个一个小东西，让人觉得神奇得不要不要的。所以有时我们需要敢于反编译，或许看似高级的背后其实很简单呢~~

二、BootstrapHelper组件封装准备 1、定义BootstrapHelper

有了以上的基础做准备，接下来就是具体的实现了，我们新建了一个空的MVC项目，添加如下文件。

编译发现报错如下

将HtmlHelper转到定义发现它有两个构造函数，分别有两个、三个参数

 那么，我们的BootstrapHelper也定义两个构造函数，于是代码变成这样：

namespace Extensions { public class BootstrapHelper : System.Web.Mvc.HtmlHelper { 使用指定的视图上下文和视图数据容器来初始化 BootstrapHelper 类的新实例。 BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer) : base(viewContext, viewDataContainer) { } 使用指定的视图上下文、视图数据容器和路由集合来初始化 BootstrapHelper 类的新实例。 BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer, RouteCollection routeCollection) : base(viewContext, viewDataContainer, routeCollection) { } } }

这样通过子类复用父类的构造函数的方式即可解决以上问题。编译通过！

2、定义LabelExtensions

上面我们研究过HtmlHelper，在HtmlHelper里面，不同的html组件定义了不同的Extension（扩展），下面我们就以最简单的Label标签为例定义我们BootstrapHelper里面的Label标签。

同样，在Extensions文件夹里面我们新建了一个文件LabelExtensions.cs，用于定义Label标签的扩展，它里面的基本实现如下：

namespace Extensions { LabelExtensions { 通过使用指定的 HTML 帮助器和窗体字段的名称，返回Label标签 MvcHtmlString Label(this BootstrapHelper html, string id, string content, string cssClass, object htmlAttributes) { //定义标签的名称 TagBuilder tag = ); //给标签增加额外的属性 IDictionary<string, object> attributes = BootstrapHelper.AnonymousObjectToHtmlAttributes(htmlAttributes); if (!string.IsNullOrEmpty(id)) { attributes.Add(, id); } if (!string.IsNullOrEmpty(cssClass)) { //给标签增加样式 tag.AddCssClass(cssClass); } //给标签增加文本 tag.SetInnerText(content); tag.AddCssClass(); tag.MergeAttributes(attributes); return MvcHtmlString.Create(tag.ToString()); } } }