艾伟_转载:[一步一步MVC]第五回:让TagBuilder丰富你的HtmlHelper

简介: 本系列文章导航[一步一步MVC]第一回:使用ActionSelector控制Action的选择[一步一步MVC]第二回:还是ActionFilter,实现对业务逻辑的统一Authorize处理[一步一步MVC]第三回:MVC范例大观园[一步一步MVC]第四回:漫谈ActionLink,有时“...

本系列文章导航

[一步一步MVC]第一回:使用ActionSelector控制Action的选择

[一步一步MVC]第二回:还是ActionFilter,实现对业务逻辑的统一Authorize处理

[一步一步MVC]第三回:MVC范例大观园

[一步一步MVC]第四回:漫谈ActionLink,有时“胡搅蛮缠”

[一步一步MVC]第五回:让TagBuilder丰富你的HtmlHelper

[一步一步MVC]第六回:什么是MVC(上)?

对HtmlHelper进行扩展,是MVC中对于View层进行灵活控制的主要手段之一,对此我在第七回:漫谈ActionLink,有时“胡搅蛮缠”中进行过探讨。在本文,只是一个小技巧,丰富我们在自定义HtmlHelper时可以有更好的选择。

首先,我们先了解一下,几个简单的HtmlHelper扩展是如何实现:

 
 
public static string Label( this HtmlHelper helper, string name, string value)
{
return string .Format( " {1}
"
, name, value);
}

很简单,就是实现一个对HtmlHelper的扩展方法,这样我们就可以在View层通过

 

 
 
<% = Html.Label( " Anytao " , " tao " ) %>

 

而无需:

 

 
 
< label for ="tao" > Anytao </ label >

 

显然,通过Html.Lable方式更加的简洁和灵活,此例仅仅是个简单的举例。事实上,通过Html.XXX可以封装更多的预定义Html代码,实现更多有效、复杂的个性化实现,例如在本文的下一篇我将通过Html.Naviagte方式实现一个封装了Sitemap的Breadcrumb控制,从而使得我们体会更好的Html是如何做到的。

对于Html.Label而言,还有一个重要的内容需要添加,那就是对于Html标记如何动态的指定和渲染,例如我们可以对Label指定id、class还有更多其他的Html属性,这是个有市场的需求,因为至少为Dom元素指定Css是经常发生的事情,例如假设有如下的需求:

 

 
 
< label class ="grey" for ="tao" > Anytao </ label >

 

在原有的Html.Label扩展实现中,class的指定是无法做到的,因此需要从新构造,办法就是添加htmlAttributes参数,实现类似于ActionLink一样的控制,例如:

 

 
 
<% = Html.Label( " Anytao " , " tao " , new { @class = " grey " } %>

 

那么,我们该如何办呢?我想起了TagBuilder,来简化实现的复杂度,事实上TagBuilder就是干这个的主,废话不说给出更新之后的Html.Label实现:

 

 
 
public static string Label( this HtmlHelper helper, string name, string value, 
  object htmlAttributes)
{
TagBuilder tagBuilder
= new TagBuilder( " label " )
{
InnerHtml
= value
};
tagBuilder.MergeAttribute(
" for " , name);
tagBuilder.MergeAttributes(
new RouteValueDictionary(htmlAttributes));
return tagBuilder.ToString(TagRenderMode.Normal);
}

 

办法很简单,在Html.Label内部通过TagBuilder,实现了对htmlAttribute特性的添加,实现的办法非常简单:

 

 
 
tagBuilder.MergeAttributes( new RouteValueDictionary(htmlAttributes));

 

在MergeAttributes方法内部实现对Html Attribute信息的整合,有兴趣大家可以了解具体的实现规则。

既然我们的主角是TagBuilder,那么就顺便近看其面目,总体来说TagBuilder就是创建Html标签的Builder,类似于StringBuilder封装了对Html标签的很多简单而有效的方法(例如MergeAttributes),主要包括:

  • AddCssClass
  • GenerateId
  • MergeAttribute
  • SetInnerText
  • ToString

还包括几个属性:

  • Attributes
  • IdAttributeDotReplacement
  • InnerHtml
  • TagName

工欲善其事,必先利其器。TagBuidler使得HtmlHelper变得简单,自信的观众可以完全不用TagBuilder,通过任何其他的办法来实现类似于MergeAttribute、AddCssClass这样的逻辑,但是既然已经有了,不妨一试。就像它的大哥StringBuilder,给我们处理string带来多少不错的亲近感受,看面子也不妨关照一下小弟TagBuilder。

目录
相关文章
|
前端开发 .NET 数据库
艾伟:ASP.NET MVC,深入浅出IModelBinder,在Post方式下慎用HtmlHelper
本文基于ASP.NET MVC Beta版本,正式版如有变动诸不另行通知! 在开始这个主题之前,我先简要介绍一下如何在ActionMethod中通过Form使用Post的方式进行传递参数。 原生类型参数传递 先看一个简单的示例: public ActionResult SimplePost(str...
1223 0
|
Web App开发 前端开发 数据安全/隐私保护
MVC进阶学习--HtmlHelper控件解析(一)
1.HtmlHelper类      HtmlHelper类位于System.Web.MVC.Html命名空间下。主要包括FormExtensions,InputExtensions,LinkExtensions,SelectExtensions,TextAreaExtensions,Validat...
879 0
|
Web App开发 前端开发
MVC进阶学习--HtmlHelper控件解析(二)
1.InputExtensions类      InputExtensions类主要有5种类型的扩展方法,分别用于CheckBox控件,Hidden控件,Pass控件,RadionButton控件,TextBox控件2.
866 0
|
Web App开发 前端开发
MVC进阶学习--HtmlHelper控件解析(三)
1.LinkExtensions类      该类主要用于生成相关链接,主要扩展了ActionLink和RouteLink方法2.ActionLink       ActionLink扩展方法主要实现一个连接,共有十个重载方法      ActionLink(string linkText,stri...
818 0
|
Web App开发 前端开发 C#
MVC进阶学习--HtmlHelper控件解析(四)
1.RenderPartialExtensions类      RenderPartialExtensions类主要扩展了一个方法 RenderPartial()      RenderPartial(string partialViewName);      RenderPartial(strin...
843 0
|
Web App开发 前端开发
MVC进阶学习--HtmlHelper控件解析(五)
1.SelectExtensions 类      SelectExtensions 主要扩展了两种类型的方法 DropDowList和ListBox,这两个方法主要区别是后者添加了一个属性multiple="multiple",设置这个属性主要是为了能够多选2.
843 0
|
前端开发
MVC进阶学习--HtmlHelper之GridView控件拓展(一)
最近用MVC做项目的时候,感觉脱离了原有WebForm的那种编程方式,心中略有想法。在WebForm中由一个很常用的数据绑定控件GridView,我相信用过.net的同仁都会使用这个控件,在开发中的确给我们带来了不少的方便。
811 0
|
前端开发
MVC进阶学习--HtmlHelper之GridView控件拓展(二)
1.目录结构图      2.自定义集合类 Codeusing System;using System.Collections.Generic;using System.Linq;using System.
789 0
|
前端开发
MVC进阶学习--HtmlHelper之GridView控件拓展(三)
1.扩展核心代码 Code  1 using System;  2 using System.Collections.Generic;  3 using System.Linq;  4 using System.
748 0
|
前端开发
MVC进阶学习--HtmlHelper之GridView控件拓展(四)
1.输出表头 Code 1  ///  2         /// 添加表头行 3         ///  4         ///  5         ///  6         ///  7         ///  8         ///  9         /// 10 ...
755 0