https://www.cnblogs.com/myshell/archive/2010/05/09/1731269.html


 在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编码的字符串。扩展方法代码如下所示:


代码

 public static class MyInputExtensions
{
public static MvcHtmlString Input(this HtmlHelper htmlHelper, string name)
{
TagBuilder tagBuilder = new TagBuilder("input");//设置标签类型为input
tagBuilder.Attributes.Add("type", "file");//为标签添加type属性及值
tagBuilder.Attributes.Add("name", name);//为标签添加name属性及值
 tagBuilder.GenerateId(name);//为标签生成Id,name参数代码Id的值
//创建经过HTML加密的字符串
//TagRenderMode.SelfClosing枚举值代表当前标签是自动关闭的
return MvcHtmlString.Create(tagBuilder.ToString(TagRenderMode.SelfClosing));
}
}

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

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

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

需要说明的是,本例所示是为了生成<input type="file">标签,是不用设置值的,读者可以通过自身情况定义扩展方法。然后运行,通过浏览器查看HTML源代码,如下图所示:

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

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


代码

 public static class MyInputExtensions
{
public static MvcHtmlString Input<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression)
{
string modelName = ExpressionHelper.GetExpressionText(expression);//从Lambda表达式中获取模型对应属性的名称
TagBuilder tagBuilder = new TagBuilder("input");//设置标签类型为input
tagBuilder.Attributes.Add("type", "file");//为标签添加type属性及值
tagBuilder.Attributes.Add("name", modelName);//为标签添加name属性及值
tagBuilder.GenerateId(modelName);//为标签生成Id,name参数代码Id的值
//创建经过HTML加密的字符串
//TagRenderMode.SelfClosing枚举值代表当前标签是自动关闭的
return MvcHtmlString.Create(tagBuilder.ToString(TagRenderMode.SelfClosing));
}
}

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

  

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

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

  运行,我们通过浏览器查看生成的Html源代码如下图所示:

  

  三、为标签错误输入添加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程序员来说,这是非常实用的。

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

  1. 转:自定义ASP.NET MVC Html辅助方法

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

  2. 【MVC】自定义ASP.NET MVC Html辅助方法

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

  3. [转载]自定义ASP.NET MVC Html辅助方法 TagBuilder

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

  4. 自定义ASP.NET MVC Html辅助方法

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

  5. 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 ...

  6. 自定义ASP.NET MVC Html标签辅助方法

    原文:https://blog.csdn.net/a497785609/article/details/50184779 在ASP.NET MVC中,Html辅助方法给我们程序员带来很多方便,其重要性 ...

  7. 用MVC的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”

    接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...

  8. T4 模板 : 一种提升ASP.NET MVC开发速度方法

    最近由于需要在框架中提供一些自定义模板的功能,找到了一篇博客,可惜似乎是翻译工具直接翻的,读不通顺,就试着自己翻译下,我不会完全翻译原文的句子,可能会对原文进行小范围的我认为更合适的句子并添加些注释, ...

  9. Asp.net mvc 中Action 方法的执行(二)

    [toc] 前面介绍了 Action 执行过程中的几个基本的组件,这里介绍 Action 方法的参数绑定. 数据来源 为 Action 方法提供参数绑定的原始数据来源于当前的 Http 请求,可能包含 ...

随机推荐

  1. Java实现 蓝桥杯 算法训练 猴子吃包子(暴力)

    试题 算法训练 猴子吃包子 问题描述 从前,有一只吃包子很厉害的猴子,它可以吃无数个包子,但是,它吃不同的包子速度也不同:肉包每秒钟吃x个:韭菜包每秒钟吃y个:没有馅的包子每秒钟吃z个:现在有x1个肉 ...

  2. Java实现 蓝桥杯VIP 算法训练 校门外的树

    问题描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2,--,L,都种 ...

  3. el-upload配合vue-cropper实现上传图片前裁剪

    需求背景 上传一个封面图,在上传之前需要对图片进行裁剪,上传裁剪之后的图片,类似微信的上传头像. 技术方案 上传肯定是用element的 el-upload 组件实现上传,非常方便,各种钩子函数. 裁 ...

  4. 记录RecyclerView的位置并进行恢复

    //监听RecyclerView滚动状态 mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Overri ...

  5. Android事件传递机制总结

    Android中控件的分类 Activity dispatchTouchEvent(MotionEvent e) onTouchEvent(MotionEvent e) ViewGroup(View) ...

  6. 实战记录之SQL server报错手工注入

    前言 最近测试了一个站点,这个站点挺有意思,发现没有关闭错误提示,初步猜测是SQL server数据库,后来验证确实是.在这里记录一下实战过程,并详细讲解一下用到的知识点. SQL server报错注 ...

  7. pc端网站如何自动跳转到移动wap端网站

    <script type="text/javascript"> var uaTest = /Android|webOS|Windows Phone|iPhone|ucw ...

  8. 【实战】基于OpenCV的水表字符识别(OCR)

    目录 1. USB摄像头取图 2. 图像预处理:获取屏幕ROI 2.1. 分离提取屏幕区域 2.2. 计算屏幕区域的旋转角度 2.3. 裁剪屏幕区域 2.4. 旋转图像至正向视角 2.5. 提取文字图 ...

  9. Linux防火墙iptables详解

    iptables详解(思维导图) 1. 概述 1.1 iptable简介 1.2 防火墙的种类 1.3 netfilter 2. iptables的工作流程 2.1 iptables工作图示 2.2 ...

  10. @bzoj - 3724@ PA2014Final Krolestwo

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 你有一个无向连通图,边的总数为偶数. 设图中有k个奇点(度数为奇 ...