阅读目录

  • 一、新增泛型的BootstrapHelper
  • 二、TextBoxExtensions
  • 三、RadioExtensions和CheckboxExtensions
  • 四、ButtonExtensions
  • 五、总结

正文

前言:上篇介绍了下封装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的实现代码如下:

 TextBoxExtensions.cs
 InputExtensions.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/里面的写法,进行了如下封装:

 RadioExtensions.cs
 CheckboxExtensions.cs

博主将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类型的按钮做了如下封装

 ButtonExtensions.cs

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/p/5746166.html,如需转载请自行联系原作者

C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper(二)相关推荐

  1. C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper(三:附源码)...

    阅读目录 一.NumberBoxExtensions 二.DateTimeBoxExtensions 1.初始方案 2.改进方案 三.TextareExtensions 四.SelectExtensi ...

  2. 一步一步封装自己的HtmlHelper组件:BootstrapHelper

    前言:之前学习过很多的Bootstrap组件,博主就在脑海里构思:是否可以封装一套自己Bootstrap组件库呢.再加上看到MVC的Razor语法里面直接通过后台方法输出前端控件的方式,于是打算仿照H ...

  3. (转)C#进阶系列——WebApi 接口返回值不困惑:返回值类型详解

    原文链接:https://www.cnblogs.com/landeanfen/p/5501487.html 阅读目录 一.void无返回值 二.IHttpActionResult 1.Json(T ...

  4. 一步一步学Silverlight 2系列(8):使用样式封装控件观感

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  5. 一步一步学Silverlight 2系列(21):如何在Silverlight中调用JavaScript

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  6. 成为进阶Linux大佬的第一步

    成为进阶Linux大佬的第一步 一.操作系统 1.操作系统为接口的示意图 2.不同领域的主流操作系统 桌面操作系统 服务器操作系统 嵌入式操作系统 移动设备操作系统 3.虚拟机 二.操作系统的发展史 ...

  7. 一步一步学Silverlight 2系列(21):如何在Silverlight中调用JavaScriptjavascript

    一步一步学silverlight 2系列(21):如何在silverlight中调用javascript 概述 silverlight 2 beta 1版本发布了,无论从runtime还是tools都 ...

  8. 一步一步学Silverlight 2系列(3):界面布局

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  9. 一步一步学Silverlight 2系列(10):使用用户控件

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

最新文章

  1. 一些通讯知识、TCP/IP、三次握手四次分手(正确的图,网上很多错了)、HTTP\HTTPS、DNS、UDP
  2. jquery 开发总结(不断更新)
  3. 重塑世界的区块链技术你必须要懂得
  4. python中等于号可以用is代替_python中字符串比较使用is、==和cmp()总结
  5. tebluea 仪表板如何联动_报告厅音响设备和辅助设备.doc
  6. java中随机生成26个字母组合的随机验证码
  7. Python读取文件中汉字方法:导入codecs,添加encoding='utf-8'
  8. Eclipse中自动提示的方法参数都是arg0,arg1的解决方法
  9. html标签属性值拼接,js拼接url以及为html某标签属性赋值
  10. 小米笔试题--数组移动
  11. 变相解决Unidac无法向Postgresql传游标RefCursor的问题
  12. python打包exe与反编译exe文件与防止反编译方式生成exe
  13. matlab中figure的基本用法
  14. Java8新特性 方法引用(三)
  15. 刷题时遇到的经典解法(实时更新)
  16. Win10 上切换至Administrator用户
  17. 日期时间存入数据库会差一天?
  18. CSS篇一一简短介绍下CSS
  19. matlab2012a到期重新激活
  20. 重启计算机关闭账户,电脑开机重启提示您的账户已被停用怎么办

热门文章

  1. ng的概念层次(官方文档摘录)
  2. JavaScript事件冒泡和事件委托
  3. nmon监控Linux服务器系统资源
  4. CV学习笔记-图像滤波器
  5. Eigen问题解决:eigen_assert_exception’ is not a member of ‘Eigen’
  6. Linux CGLIB升级,cglib升级建议
  7. java 删除list_Java 删除List元素的正确方式
  8. jsf如何与数据库连接_JSF数据库示例– MySQL JDBC
  9. python导入模块_Python导入
  10. Android ViewGroup