MVC中使用HTML Helper类扩展HTML控件
来源:互联网 发布:linux开机动画 编辑:程序博客网 时间:2024/06/08 00:20
文章摘自:http://www.cnblogs.com/zhangziqiu/archive/2009/03/18/1415005.html
MVC在view页面,经常需要用到很多封装好的HTML控件,这篇文章主要讲述,怎么自己扩展和定制自己需要的控件。
----------------------------------------------------------
HTML Helper类是ASP.NET MVC框架中提供的生成HTML控件代码的类. 本质上与第一种方式一样, 只是我们可以不必手工书写HTML代码,而是借助HTML Helper类中的方法帮助我们生成HTML控件代码.
同时,我们也可以使用扩展方法为HTML Helper类添加自定义的生成控件的方法.
HTML Helper类的大部分方法都是返回一个HTML控件的完整字符串, 所以可以直接在需要调用的地方使用<% =Html.ActionLink() %>的形式输出字符串.
(1)ASP.NET MVC中的HtmlHelper类
在ViewPage中提供了Html属性, 这就是一个HtmlHelper类的实例. ASP.NET MVC框架自带了下面这些方法:
- Html.ActionLink()
- Html.BeginForm()
- Html.CheckBox()
- Html.DropDownList()
- Html.EndForm()
- Html.Hidden()
- Html.ListBox()
- Html.Password()
- Html.RadioButton()
- Html.TextArea()
- Html.TextBox()
上面列举的常用的HtmlHelper类的方法,并不是完整列表.
下面的例子演示如何使用HtmlHelper类:
<div> <% using (Html.BeginForm()) { %> <label style="width:60px;display:inline-block;">用户名:</label> <% =Html.TextBox("UserName", "ziqiu.zhang", new { style="width:200px;" })%> <br /><br /> <label style="width:60px;display:inline-block;">密码:</label> <% =Html.Password("Psssword", "123456", new { style = "width:200px;" })%> <% }%> </div>
上面的代码使用Html.BeginForm输出一个表单对象, 并在表单对象中添加了两个Input, 一个使用Html.TextBox输出, 另一个使用Html.Password输出,区别是Html.Password输出的input控件的type类型为password.
(2)扩展Html Helper类
我们可以自己扩展HtmlHelper类, 为HtmlHelper类添加新的扩展方法, 从而实现更多的功能.
在项目中建立Extensions文件夹, 在其中创建SpanExtensions.cs文件.源代码如下:
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace System.Web.Mvc{ public static class SpanExtensions { public static string Span(this HtmlHelper helper,string id, string text) { return String.Format(@"<span id=""{0}"">{1}</span>", id, text); } }}
上面的代码我们为HtmlHelper类添加了一个Span()方法, 能够返回一个Span的完整HTML字符串.
因为命名空间是System.Web.Mvc,所以页面使用的时候不需要再做修改,Visual Studio会自动识别出来:
请大家一定要注意命名空间, 如果不使用System.Web.Mvc命名空间, 那么一定要在页面上引用你的扩展方法所在的命名空间, 否则我们的扩展方法将不会被识别.
接下来在页面上可以使用我们的扩展方法:
<div> <!-- 使用自定义的Span方法扩展HTML Helper --> <% =Html.Span("textSpan", "使用自定义的Span方法扩展HtmlHelper类生成的Span") %> </div>
(3) 使用TagBuilder类创建扩展方法
上面自定义的Span()方法十分简单, 但是有时候我们要构造具有复杂结构的Html元素, 如果用字符串拼接的方法就有些笨拙.
ASP.NET MVC框架提供了一个帮助我们构造Html元素的类:TagBuilder
TagBuilder类有如下方法帮助我们构建Html控件字符串:
方法名称用途AddCssClass()添加class=””属性GenerateId()添加Id, 会将Id名称中的"."替换为IdAttributeDotReplacement 属性值的字符.默认替换成"_"MergeAttribute()添加一个属性,有多种重载方法.SetInnerText()设置标签内容, 如果标签中没有再嵌套标签,则与设置InnerHTML 属性获得的效果相同.ToString()输出Html标签的字符串, 带有一个参数的重载可以设置标签的输出形式为以下枚举值:- TagRenderMode.Normal -- 有开始和结束标签
- TagRenderMode.StartTag -- 只有开始标签
- TagRenderMode.EndTag -- 只有结尾标签
- TagRenderMode.SelfClosing -- 单标签形式,如<br/>
同时一个TagBuilder还有下列关键属性:
属性名称用途AttributesTag的所有属性IdAttributeDotReplacement添加Id时替换"."的目标字符InnerHTMLTag的内部HTML内容TagNameHtml标签名, TagBuilder只有带一个参数-TagName的构造函数.所以TagName是必填属性下面在添加一个自定义的HtmlHelper类扩展方法,同样是输出一个<Span>标签:public static string Span(this HtmlHelper helper, string id, string text, string css, object htmlAttributes) { //创意某一个Tag的TagBuilder var builder = new TagBuilder("span"); //创建Id,注意要先设置IdAttributeDotReplacement属性后再执行GenerateId方法. builder.IdAttributeDotReplacement = "-"; builder.GenerateId(id); //添加属性 builder.MergeAttributes(new RouteValueDictionary(htmlAttributes)); //添加样式 builder.AddCssClass(css); //或者用下面这句的形式也可以: builder.MergeAttribute("class", css); //添加内容,以下两种方式均可 //builder.InnerHtml = text; builder.SetInnerText(text); //输出控件 return builder.ToString(TagRenderMode.Normal); }
在页面上,调用这个方法:
<% =Html.Span("span.test", "使用TagBuilder帮助构建扩展方法", "ColorRed", new { style="font-size:15px;" })%>
生成的Html代码为:
<span id="span-test" class="ColorRed" style="font-size: 15px;">使用TagBuilder帮助构建扩展方法</span>
- MVC中使用HTML Helper类扩展HTML控件
- .net Mvc HTML Helper控件中的htmlAttributes
- 使用扩展方法创建 HTML Helper
- MVC 之 Html Helper
- 使用扩展方法创建新的HTML Helper
- MVC 中Html 扩展方法的使用与区别
- Asp.net mvc 创建自定义HTML Helper
- ASP.NET MVC 了解 HTML Helper
- Asp.Net MVC 学习心得 之 Html Helper
- MVC @Html 扩展方法
- MVC @Html 扩展方法
- MVC 3.0 使用自定义的Html控件
- Html Helper类中TextBoxFor绑定日期格式化的方法
- Html Helper类中TextBoxFor绑定日期格式化的方法
- Asp.Net MVC HTML Helper 中 LabelFor TextBoxFor的一些理解
- mvc3中helper里生成HTML标记
- Laravel 5中使用 illuminate/html扩展
- .net MVC中Html.Action的使用
- 【转】【容器技术】一个大拿总结的架构模式
- Android防火墙原理分析
- android读取properties配置文件
- linux mmap内核实现
- mysql主从复制设置
- MVC中使用HTML Helper类扩展HTML控件
- jvm中的垃圾收集算法
- 简明 VIM 练级攻略
- Hadoop的伪分布式的部署
- NGUI UISprite和UITexture 的遮罩思路
- Zookeeper环境搭建
- 假期练习--求三个整数中的最大值
- 无人机图传SDK项目总结(APP)
- Android 常见的设计模式