HtmlHelper

上篇介绍了下封装BootstrapHelper的一些基础知识，这篇继续来完善下。参考HtmlHelper的方式，这篇博主先来封装下一些常用的表单组件。关于BootstrapHelper封装的意义何在，上篇评论里面已经讨论得太多，这里也不想过多纠结。总之一句话：凡事有得必有失，就看你怎么去取舍。有兴趣的可以看看，没兴趣的权当博主讲了个“笑话”吧。

本文原创地址：http://www.cnblogs.com/landeanfen/p/5746166.html

BootstrapHelper系列文章目录

• C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper
• C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper（二）
• C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper（三：附源码）

一、新增泛型的BootstrapHelper

上篇博主只定义了一个BootstrapHelper的普通类型去继承HtmlHelper，由于考虑到需要使用lamada的方式去定义组件，博主又增加了一个BootstrapHelper的泛型类型。于是BootstrapHelper变成了这样。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace BootstrapExtensions
{
    public class BootstrapHelper : System.Web.Mvc.HtmlHelper
    {
        /// <summary>
        /// 使用指定的视图上下文和视图数据容器来初始化 BootstrapHelper 类的新实例。
        /// </summary>
        /// <param name="viewContext">视图上下文</param>
        /// <param name="viewDataContainer">视图数据容器</param>
        public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer)
            : base(viewContext, viewDataContainer)
        { }

        /// <summary>
        /// 使用指定的视图上下文、视图数据容器和路由集合来初始化 BootstrapHelper 类的新实例。
        /// </summary>
        /// <param name="viewContext">视图上下文</param>
        /// <param name="viewDataContainer">视图数据容器</param>
        /// <param name="routeCollection">路由集合</param>
        public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer, RouteCollection routeCollection)
            : base(viewContext, viewDataContainer, routeCollection)
        { }
    }

    /// <summary>
    /// 表示支持在强类型视图中呈现 Bootstrap 控件。
    /// </summary>
    /// <typeparam name="TModel"></typeparam>
    public class BootstrapHelper<TModel> : BootstrapHelper
    {
        /// <summary>
        /// 使用指定的视图上下文和视图数据容器来初始化 <![CDATA[Net.Web.Mvc.BootstrapHelper<TModel>]]> 类的新实例。
        /// </summary>
        /// <param name="viewContext">视图上下文。</param>
        /// <param name="viewDataContainer">视图数据容器。</param>
        public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer)
            : base(viewContext, viewDataContainer)
        { }

        /// <summary>
        /// 使用指定的视图上下文、视图数据容器和路由集合来初始化 <![CDATA[Net.Web.Mvc.BootstrapHelper<TModel>]]> 类的新实例。
        /// </summary>
        /// <param name="viewContext">视图上下文。</param>
        /// <param name="viewDataContainer">视图数据容器。</param>
        /// <param name="routeCollection">路由集合。</param>
        public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer, RouteCollection routeCollection)
            : base(viewContext, viewDataContainer, routeCollection)
        { }
    }
}

我们的Bootstrap对象也定义成泛型对象

    public abstract class BootstrapWebViewPage<TModel> : System.Web.Mvc.WebViewPage<TModel>
    {
        //在cshtml页面里面使用的变量
        public BootstrapHelper<TModel> Bootstrap { get; set; }

        /// <summary>
        /// 初始化Bootstrap对象
        /// </summary>
        public override void InitHelpers()
        {
            base.InitHelpers();
            Bootstrap = new BootstrapHelper<TModel>(ViewContext, this);
        }

        public override void Execute()
        {
            //throw new NotImplementedException();
        }
    }

这样做的意义就是为了在cshtml页面里面可以使用 @Bootstrap.TextBoxFor(x => x.Name) 这种写法。这个后面介绍，这里先埋个伏笔。

二、TextBoxExtensions

TextBoxExtensions.cs的实现代码如下：

 

 

1、考虑到项目中所有基于bootstrap的TextBox文本框都有一个class="form-control"样式，所以在封装文本框的时候直接将它放到了标签里面。当然，如果你的项目里面不需要这么用，或者自定义了文本框样式，这里也可以写入自己的样式，这样就不用每次声明文本框的时候都去添加这些样式了。

2、TextBoxFor()方法里面融合了使用lamada的方式生成文本框，上面声明的泛型BootstrapHelper类型对象就派上用场了，通过反射和泛型去读取lamada里面的属性名和属性值，这里只定义了一个方法，如果还需要其他重载，可以自己新增方法。

3、在使用的时候又遇到一个问题，由于BootstrapHelper是继承至HtmlHelper类型，那么MVC里面原来封装的一些HtmlHelper的扩展方法对于我们的Bootstrap对象也是可以直接调用的，所以很多重载可能出现重复和找不到对应的重载，比如：

这样的话很容易会出现如下错误：

那么，既然问题出现了，我们就要想办法解决。博主想到的一种解决方案是：将view的web.config里面的Html对象所在的命名空间注释掉。比如：

这样的话就能够解决我们上面的问题，运行效果：

将上面的命名空间注释掉之后，在cshtml页面里面我们将不能再使用Html变量的相关扩展方法，如果你自己的Helper够用，不用原生的扩展方法问题应该也不大。

三、RadioExtensions和CheckboxExtensions

关于bootstrap里面的radio和checkbox组件，博主参考了下http://v3.bootcss.com/css/里面的写法，进行了如下封装：

 

 

博主将label和checkbox放到了一起，调用的时候传入对应的label文本即可，使用如下：

            <div class="radio">
                @Bootstrap.Radio("aa", "bb", "cc", "dd", null, true, false, null)
            </div>
            <div>
                @Bootstrap.Radio("fd", "cc", "cc", "法国", "radio-inline", true, false, null)
                @Bootstrap.Radio("dfer", "cc", "cc", "英国", "radio-inline", true, false, null)
                @Bootstrap.Radio("erer", "cc", "cc", "意大利", "radio-inline", true, false, null)
            </div>
            <div>
                @Bootstrap.CheckBox("fd", "cc2", "cc", "法国", "checkbox-inline", true, false, null)
                @Bootstrap.CheckBox("dfer", "cc2", "cc", "英国", "checkbox-inline", true, false, null)
                @Bootstrap.CheckBox("erer", "cc2", "cc", "意大利", "checkbox-inline", true, false, null)
            </div>

得到的结果：

四、ButtonExtensions

关于bootstrap的按钮样式，bootstrap官网上面也有详细的说明。比如常见的按钮类型由普通按钮、提交按钮、重置按钮；常见的按钮样式主要有如下几种：

另外，按钮的大小也有分类：

基于此，我们将bootstrap类型的按钮做了如下封装

 

1、将按钮的类型、样式、大小定义成了枚举类型，这样使用起来更加方便；

2、生成按钮必须的参数有text和icon，保证按钮的基本构成。

3、使用

            <div>
                @Bootstrap.Button("测试按钮", "glyphicon-ok",ButtonClass.Primary)
                @Bootstrap.Button("提交", "glyphicon-ok", ButtonType.Submit, ButtonClass.Success, null, ButtonSize.lg)
            </div>

五、总结

以上封装了几个常用的表单组件，还剩下几个留在下篇吧。上文只是一个初始版本，很多地方可能并不完善，如果有什么不当或者可以优化的地方，还望园友们斧正，博主在此多谢了！如果本篇能够帮到你，请帮忙推荐吧！

本文原创出处：http://www.cnblogs.com/landeanfen/

欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利

 

分类: BS, JS