C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper(二)
阅读目录
- 一、新增泛型的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变成了这样。
![](/assets/blank.gif)
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){ }} }
![](/assets/blank.gif)
我们的Bootstrap对象也定义成泛型对象
![](/assets/blank.gif)
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(); }}
![](/assets/blank.gif)
这样做的意义就是为了在cshtml页面里面可以使用 @Bootstrap.TextBoxFor(x => x.Name) 这种写法。这个后面介绍,这里先埋个伏笔。
二、TextBoxExtensions
TextBoxExtensions.cs的实现代码如下:
![](/assets/blank.gif)
![](/assets/blank.gif)
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/里面的写法,进行了如下封装:
![](/assets/blank.gif)
![](/assets/blank.gif)
博主将label和checkbox放到了一起,调用的时候传入对应的label文本即可,使用如下:
![](/assets/blank.gif)
<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>
![](/assets/blank.gif)
得到的结果:
四、ButtonExtensions
关于bootstrap的按钮样式,bootstrap官网上面也有详细的说明。比如常见的按钮类型由普通按钮、提交按钮、重置按钮;常见的按钮样式主要有如下几种:
另外,按钮的大小也有分类:
基于此,我们将bootstrap类型的按钮做了如下封装
![](/assets/blank.gif)
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(二)相关推荐
- C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper(三:附源码)...
阅读目录 一.NumberBoxExtensions 二.DateTimeBoxExtensions 1.初始方案 2.改进方案 三.TextareExtensions 四.SelectExtensi ...
- 一步一步封装自己的HtmlHelper组件:BootstrapHelper
前言:之前学习过很多的Bootstrap组件,博主就在脑海里构思:是否可以封装一套自己Bootstrap组件库呢.再加上看到MVC的Razor语法里面直接通过后台方法输出前端控件的方式,于是打算仿照H ...
- (转)C#进阶系列——WebApi 接口返回值不困惑:返回值类型详解
原文链接:https://www.cnblogs.com/landeanfen/p/5501487.html 阅读目录 一.void无返回值 二.IHttpActionResult 1.Json(T ...
- 一步一步学Silverlight 2系列(8):使用样式封装控件观感
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(21):如何在Silverlight中调用JavaScript
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 成为进阶Linux大佬的第一步
成为进阶Linux大佬的第一步 一.操作系统 1.操作系统为接口的示意图 2.不同领域的主流操作系统 桌面操作系统 服务器操作系统 嵌入式操作系统 移动设备操作系统 3.虚拟机 二.操作系统的发展史 ...
- 一步一步学Silverlight 2系列(21):如何在Silverlight中调用JavaScriptjavascript
一步一步学silverlight 2系列(21):如何在silverlight中调用javascript 概述 silverlight 2 beta 1版本发布了,无论从runtime还是tools都 ...
- 一步一步学Silverlight 2系列(3):界面布局
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(10):使用用户控件
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
最新文章
- 一些通讯知识、TCP/IP、三次握手四次分手(正确的图,网上很多错了)、HTTP\HTTPS、DNS、UDP
- jquery 开发总结(不断更新)
- 重塑世界的区块链技术你必须要懂得
- python中等于号可以用is代替_python中字符串比较使用is、==和cmp()总结
- tebluea 仪表板如何联动_报告厅音响设备和辅助设备.doc
- java中随机生成26个字母组合的随机验证码
- Python读取文件中汉字方法:导入codecs,添加encoding='utf-8'
- Eclipse中自动提示的方法参数都是arg0,arg1的解决方法
- html标签属性值拼接,js拼接url以及为html某标签属性赋值
- 小米笔试题--数组移动
- 变相解决Unidac无法向Postgresql传游标RefCursor的问题
- python打包exe与反编译exe文件与防止反编译方式生成exe
- matlab中figure的基本用法
- Java8新特性 方法引用(三)
- 刷题时遇到的经典解法(实时更新)
- Win10 上切换至Administrator用户
- 日期时间存入数据库会差一天?
- CSS篇一一简短介绍下CSS
- matlab2012a到期重新激活
- 重启计算机关闭账户,电脑开机重启提示您的账户已被停用怎么办
热门文章
- ng的概念层次(官方文档摘录)
- JavaScript事件冒泡和事件委托
- nmon监控Linux服务器系统资源
- CV学习笔记-图像滤波器
- Eigen问题解决:eigen_assert_exception’ is not a member of ‘Eigen’
- Linux CGLIB升级,cglib升级建议
- java 删除list_Java 删除List元素的正确方式
- jsf如何与数据库连接_JSF数据库示例– MySQL JDBC
- python导入模块_Python导入
- Android ViewGroup