在ASP.NET MVC中,Html辅助方法给我们程序员带来很多方便,其重要性也就不言自明。有时候,我们不想重复地写一些HTML代码,或者MS没有提供我们想要的那个HTML标签的Html辅助方法,那么,我们就可以通过自己定义一个Html扩展方法来达到这个目的。

  比如,到目前为止,Html扩展方法中没有关于<input type="file" />这类标签的辅助方法,那么我们就可以自已实现一个。本文以实现<input type="file" />标签为例,演示如何实现自定义Html扩展方法。

  一、实现自定义弱类型Html扩展方法

  其实实现自定义Html扩展方法并不难,有兴趣的同学可以去看下MVC源代码,关于Html扩展方法部分。要用到System.Web.Mvc命名空间下的TagBuilder类,MvcHtmlString类。TagBuilder类为Html辅助方法生成HTML标签,MvcHtmlString代表HTML编码的字符串。扩展方法代码如下所示:

隐藏行号 复制代码 ?
  1. public static class MyInputExtensions {
    
  2.     public static MvcHtmlString Input(this HtmlHelper htmlHelper, string name)
    
  3.     {
    
  4.         TagBuilder tagBuilder = new TagBuilder("input"); //设è置?标ê签?类à型í为ainput
    
  5.         tagBuilder.Attributes.Add("type", "file");//为a标ê签?添í加ótype属?性?及°值μ
    
  6.         tagBuilder.Attributes.Add("name", name);//为a标ê签?添í加óname属?性?及°值μ
    
  7.         tagBuilder.GenerateId(name);//为a标ê签?生ú成éId,?name参?数y代ú码?Id的?值μ
    
  8. 
    
  9.         //创′建¨经-过yHTML加ó密ü的?字?符?串?
    
  10.         //TagRenderMode.SelfClosing枚?举ù值μ代ú表í当±前°标ê签?是?自?动ˉ关?闭?的?
    
  11.         return MvcHtmlString.Create(tagBuilder.ToString(TagRenderMode.SelfClosing));
    
  12.     }
    
  13. }
    

.src_container{background-color:#e7e5dc; width:99%; overflow:hidden; margin:12px 0 12px 0 !important; padding:0px 3px 3px 0px}
.src_container .titlebar{ background-color:#d4dfff; border:1px solid #4f81bd; border-bottom:0; padding:3px 24px; margin:0; width:auto; line-height:120%; overflow:hidden; text-align:left; font-size:12px}
.src_container .toolbar{ display:inline; font-weight:normal; font-size:100%; float:right; cursor:hand; color:#00f; text-align:left; overflow:hidden}
.toolbar span.button{ display:inline; font-weight:normal; font-size:100%; cursor:hand; color:#00f; text-align:left; overflow:hidden; cursor:pointer;}
.src_container div.clientarea{ background-color:white; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; height:auto; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys",courier,monospace,serif}
.src_container ol.mainarea{ padding:0 0 0 52px; margin:0; background-color:#f7f7ff !important}
.number_show{ padding-left:52px !important; list-style:decimal outside !important}
.number_show li{ list-style:decimal outside !important; border-left:1px dotted #4f81bd}
.number_hide{ padding-left:0px !important; list-style-type:none !important}
.number_hide li{ list-style-type:none !important; border-left:0px}
ol.mainarea li{ display:list-item !important; font-size:12px !important; margin:0 !important; line-height:18px !important; padding:0 0 0 0px !important; background-color:#f7f7ff !important; color:#4f81bd}
ol.mainarea li pre{color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap ol.mainarea li pre{white-space:pre-wrap; white-space:-moz-pre-wrapwhite-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word}
ol.mainarea li pre.alt{ background-color:#f7f7ff !important}

  需要特别提醒的是,扩展方法类所在的命名空间最好设置为System.Web.Mvc,这样,我们在View中可以通过智能感知轻易找到,也不容易出错或者无法通过VS智能感知找到我们自定义的Html辅助方法,可以为我们省去很多不必要的麻烦。将上面代码编译,我们即可在View中通过智能感知看到我们自定义的Html辅助方法。如下图所示:

使用方法和其它Html辅助方法一样,如下代码所示:


<%: Html.Input("Path") %>
//字符串参数Path代表生成标签的name属性和id属性的值

二、实现自定义强类型Html辅助方法

  强类型辅助方法的一个好处是,我们可以通过编译器为我们检测一些错误,为我们节省一些排错的时间与精力。所以,强类型Html辅助方法是不可缺少的。代码如下:

隐藏行号 复制代码 ?
  1. public static class MyInputExtensions {
    
  2.     public static MvcHtmlString Input<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression)
    
  3.     {
    
  4.         string modelName = ExpressionHelper.GetExpressionText(expression); //从óLambda表í达?式?中D获?取?模£型í对?应|属?性?的?名?称?
    
  5.         TagBuilder tagBuilder = new TagBuilder("input");//设è置?标ê签?类à型í为ainput
    
  6.         tagBuilder.Attributes.Add("type", "file");//为a标ê签?添í加ótype属?性?及°值μ
    
  7.         tagBuilder.Attributes.Add("name", modelName);//为a标ê签?添í加óname属?性?及°值μ
    
  8.         tagBuilder.GenerateId(modelName);//为a标ê签?生ú成éId,?name参?数y代ú码?Id的?值μ
    
  9. 
    
  10.         //创′建¨经-过yHTML加ó密ü的?字?符?串?
    
  11.         //TagRenderMode.SelfClosing枚?举ù值μ代ú表í当±前°标ê签?是?自?动ˉ关?闭?的?
    
  12.         return MvcHtmlString.Create(tagBuilder.ToString(TagRenderMode.SelfClosing));
    
  13.     }
    
  14. }
    

.src_container{background-color:#e7e5dc; width:99%; overflow:hidden; margin:12px 0 12px 0 !important; padding:0px 3px 3px 0px}
.src_container .titlebar{ background-color:#d4dfff; border:1px solid #4f81bd; border-bottom:0; padding:3px 24px; margin:0; width:auto; line-height:120%; overflow:hidden; text-align:left; font-size:12px}
.src_container .toolbar{ display:inline; font-weight:normal; font-size:100%; float:right; cursor:hand; color:#00f; text-align:left; overflow:hidden}
.toolbar span.button{ display:inline; font-weight:normal; font-size:100%; cursor:hand; color:#00f; text-align:left; overflow:hidden; cursor:pointer;}
.src_container div.clientarea{ background-color:white; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; height:auto; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys",courier,monospace,serif}
.src_container ol.mainarea{ padding:0 0 0 52px; margin:0; background-color:#f7f7ff !important}
.number_show{ padding-left:52px !important; list-style:decimal outside !important}
.number_show li{ list-style:decimal outside !important; border-left:1px dotted #4f81bd}
.number_hide{ padding-left:0px !important; list-style-type:none !important}
.number_hide li{ list-style-type:none !important; border-left:0px}
ol.mainarea li{ display:list-item !important; font-size:12px !important; margin:0 !important; line-height:18px !important; padding:0 0 0 0px !important; background-color:#f7f7ff !important; color:#4f81bd}
ol.mainarea li pre{color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap ol.mainarea li pre{white-space:pre-wrap; white-space:-moz-pre-wrapwhite-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word}
ol.mainarea li pre.alt{ background-color:#f7f7ff !important}

  然后我们编译,在View中,我们就可以通过智能感知看到我们新扩展的强类型Html辅助方法了。如下图所示:

 

 我们可以通过如下代码使用新扩展的Html辅助方法:


<%: Html.Input(model => model.Path) %>
//Path代表model的Path属性,生成标签的name和id的属性值均会是Path

三、为标签错误输入添加CSS支持

  对于要求输入的标签,如Text,如果用户输入错误内容,我们可以为当前标签添加CSS错误提示,为用户提供一个更加友好、人性化的界面。代码如下所示:


ModelState modelState;
if (htmlHelper.ViewData.ModelState.TryGetValue(name, out modelState))
{
if (modelState.Errors.Count > 0)
{
//添加错误提示CSS
tagBuilder.AddCssClass(HtmlHelper.ValidationInputCssClassName);
} }

将以上代码复制到我们自定义的扩展方法的返回MvcHtmlString字符串之前即可。

  四、总结

  本文通过演示如果实现自定义<input type="file" />标签的Html辅助方法,展示了如何在ASP.NET MVC中实现自定义Html辅助方法。对于ASP.NET MVC程序员来说,这是非常实用的。

转自:http://www.cnblogs.com/myshell/archive/2010/05/09/1731269.html

【MVC】自定义ASP.NET MVC Html辅助方法的更多相关文章

  1. vs 2013下自定义ASP.net MVC 5/Web API 2 模板(T4 视图模板/控制器模板)

    vs 2013下自定义ASP.net MVC 5/Web API 2  模板(T4 视图模板/控制器模板): Customizing ASP.NET MVC 5/Web API 2 Scaffoldi ...

  2. 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递

    通过第一天的学习之后,我们相信您已经对MVC有一些基本了解. 本节所讲的内容是在上节的基础之上,因此需要确保您是否掌握了上一节的内容.本章的目标是在今天学习结束时利用最佳实践解决方案创建一个小型的MV ...

  3. 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 【转】

    http://www.cnblogs.com/powertoolsteam/p/MVC_two.html 通过第一天的学习之后,我们相信您已经对MVC有一些基本了解. 本节所讲的内容是在上节的基础之上 ...

  4. 七天学会ASP.NET MVC (三)——ASP.Net MVC 数据处理

    第三天我们将学习Asp.Net中数据处理功能,了解数据访问层,EF,以及EF中常用的代码实现方式,创建数据访问层和数据入口,处理Post数据,以及数据验证等功能. 系列文章 七天学会ASP.NET M ...

  5. asp.net mvc ,asp.net mvc api 中使用全局过滤器进行异常捕获记录

    MVC下的全局异常过滤器注册方式如下:标红为asp.net mvc ,asp.net mvc api  注册全局异常过滤器的不同之处 using SuperManCore; using System. ...

  6. 返璞归真 asp.net mvc (8) - asp.net mvc 3.0 新特性之 Model

    原文:返璞归真 asp.net mvc (8) - asp.net mvc 3.0 新特性之 Model [索引页][源码下载] 返璞归真 asp.net mvc (8) - asp.net mvc ...

  7. 返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API

    原文:返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API [索引页][源码下载] 返璞归真 asp.net mvc (10) - asp.net ...

  8. 返璞归真 asp.net mvc (6) - asp.net mvc 2.0 新特性

    原文:返璞归真 asp.net mvc (6) - asp.net mvc 2.0 新特性 [索引页][源码下载] 返璞归真 asp.net mvc (6) - asp.net mvc 2.0 新特性 ...

  9. 七天来学习ASP.NET MVC (两)——ASP.NET MVC 数据传输

    通过第一天的学习之后,我们相信您已经对MVC有一些基本了解. 本节所讲的内容是在上节的基础之上.因此须要确保您是否掌握了上一节的内容. 本章的目标是在今天学习结束时利用最佳实践解决方式创建一个小型的M ...

  10. 七天学会ASP.NET MVC (三)——ASP.Net MVC 数据处理 【转】

    http://www.cnblogs.com/powertoolsteam/p/MVC_three.html 第三天我们将学习Asp.Net中数据处理功能,了解数据访问层,EF,以及EF中常用的代码实 ...

随机推荐

  1. uva 725 Division(暴力模拟)

    Division 紫书入门级别的暴力,可我还是写了好长时间 = = [题目链接]uva 725 [题目类型]化简暴力 &题解: 首先要看懂题意,他的意思也就是0~9都只出现一遍,在这2个5位数 ...

  2. C++模板元编程 - 3 逻辑结构,递归,一点列表的零碎,一点SFINAE

    本来想把scanr,foldr什么的都写了的,一想太麻烦了,就算了,模板元编程差不多也该结束了,离开学还有10天,之前几天部门还要纳新什么的,写不了几天代码了,所以赶紧把这个结束掉,明天继续抄轮子叔的 ...

  3. 使用UltraEdit+BCC5.5搭建C语言学习环境(转)

    今天闲来无聊,想起以前学的C都差不多忘光了,想练练,先搭环境吧,vc bc之类都太大了,我以前在borland下过一个命令行编译工具不错,好像以前看到有人用ultraedit配合命令行工具做过一个开发 ...

  4. ruby1.8到2.1语法改变

    1定义hash的语法改变old_way = {:foo => "bar", :one => 1}new_way = {foo: "bar", one ...

  5. ORACLE 查看数据库中有哪些表

    SELECT TABLE_NAME FROM USER_TABLES ORDER BY TABLE_NAME;

  6. nvl

    NVL是Oracle PL/SQL中的一个函数.它的格式是NVL( string1, replace_with).它的功能是如果string1为NULL,则NVL函数返回replace_with的值, ...

  7. [Flash&Flex] AS3.0 如何利用[Embed(source="...")]嵌入资源

    在flex和flashIDE中我们可以[Embed(source="...")]嵌入图片和swf等资源,但两者之间的嵌入方式又有所区别. flex示例: [Embed(source ...

  8. 栅格系统不是要包裹在container里面吗

    栅格系统不是要包裹在container里面吗 为什么直接设置col-sm 在form表单中 不是应该这样么 <form> <div class="container&quo ...

  9. IOS开发-跨域访问DWR方法

    用Phonegap做手机客户端,服务器用spring+DWR,需要在手机端访问服务器的方法,需要做以下配置,可以参见http://www.iteye.com/topic/337460: 服务器DWR配 ...

  10. Windows 2008 IIS7.0安装FTP教程 IIS7.5 配置多用户FTP

    一. 安装IIS.右键[我的电脑],选择[管理]打开.     选择[角色],选择[添加角色]打开.                   二. 配置DOS.输入: CACLS "%Syste ...