文档章节

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

清山博客
 清山博客
发布于 2016/07/15 20:03
字数 1271
阅读 17
收藏 0

在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程序员来说,这是非常实用的。


五、补充

一个完整的扩展示例方法:

         public static MvcHtmlString InputText<TModel, TValue>(this HtmlHelper<TModel> html,
            Expression<Func<TModel, TValue>> expression, IDictionary<string, object> htmlAttributes)
        {  
            TagBuilder tagBuilder = new TagBuilder("input");

            var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);

            //第1步:获取模型字段的显示文本
            string text = metadata.DisplayName ?? metadata.PropertyName;

            //第2步:获取模型字段的字段名
            var name = ExpressionHelper.GetExpressionText(expression);

            //第3步:获取模型字段的值
            #region 模型字段的值

            string value;
            ModelState modelState;
            string fullName = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name);
            if (html.ViewData.ModelState.TryGetValue(fullName, out modelState) && modelState.Errors.Count > 0)
            {
                tagBuilder.AddCssClass(HtmlHelper.ValidationInputCssClassName);
            }
            if (modelState != null && modelState.Value != null)
            {
                value = modelState.Value.AttemptedValue;
            }
            else if (metadata.Model != null)
            {
                value = metadata.Model.ToString();
            }
            else
            {
                value = String.Empty;
            }

            #endregion 

            tagBuilder.Attributes.Add("type", "text");
            tagBuilder.Attributes.Add("name", name);
            tagBuilder.Attributes.Add("value", value);
            //第4步:填充其他自定义属性
            tagBuilder.MergeAttributes(htmlAttributes, true);
            tagBuilder.GenerateId(name);

            return MvcHtmlString.Create(tagBuilder.ToString(TagRenderMode.SelfClosing));
        }

本文转载自:http://blog.csdn.net/a497785609/article/details/50184779

清山博客
粉丝 3
博文 142
码字总数 30397
作品 0
广州
私信 提问
ASP.NET MVC是如何运行的[2]: URL路由

在一个ASP.NET MVC应用来说,针对HTTP请求的处理和相应定义Controller类型的某个Action方法中,每个HTTP请求的目标对象不再像ASP .NET Web Form应用一样是一个物理文件,而是某个Controller的...

长平狐
2012/09/04
176
0
ASP.NET MVC 2 新特性汇总

微软的开源MVC框架ASP.NET MVC 2已经发布了,它同时兼容.NET 3.5和即将发布的.NET 4。 在此版本中,新增了很多新特性: Templated Helpers可以根据类型选择渲染模板,自动生成用于显示和编辑的...

小编辑
2010/03/21
1K
0
工作满一年需要换工作(web方向)简历该怎么整?

在国企干了一年,说句实在话,基本上没有学到多少东西,由于在项目中偏前端开发,正好对这个也兴趣,就准备投web前端方向,自学一些东西,但由于不是专业搞前端的,因此简历很水,惨不忍睹....

yws52417
2016/07/11
1K
6
关于自己写的ASP.NET MVC控件找不到视图的问题

我先简单描述一下,我的一个ASP.NET MVC中用到了我自己编写的一个控件,而这个控件的代码是在一个独立的dll中,我们先来看看在web项目中的调用代码: 再来看看,这个控件在dll中是怎么输出的...

西门帅
2014/09/25
330
2
高性能JavaScript模板引擎template.js原理解析

artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript性能极限,在chrome下渲染效率测试中分别是知名引擎Mustache与micro tmpl的25/32倍(性能测试);artTemplate的模板还...

webmirror
2017/11/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue入门--简单路由配置

本文转载于:专业的前端网站➜vue入门--简单路由配置   在初始化vue init webpack <工程名>时,有一步是询问是否安装vue-router,选择yes,如果没有安装的话,后面需要自己安装。然后在目录...

前端老手
14分钟前
2
0
怎么给视频配音

很多刚开始尝试视频制作的小伙伴,帮助到怎么给制作完成的视频配音,其实给视频配音的方法非常简单,在手机上可以进行制作,下面一起来看看给视频配音的方法吧! 具体步骤如下: 1、首先在手...

白米稀饭2019
24分钟前
2
0
windows批处理bat脚本编写

什么是bat脚本 .bat结尾的文件其实就是windows上的批处理脚本,Windows中的bat文件相当于 Linux中shell编程的.sh脚本,批量执行DOS命令。 其最简单的例子,是逐行书写在命令行中会用到的各种...

孙幼凌
32分钟前
3
0
华为手机翻译功能怎么使用?这三种方法请务必收藏

华为手机翻译功能怎么使用?在我们的生活中会经常遇到翻译问题,许多外语不好的朋友该怎么办呢?华为手机已经为我们解决了这个问题,今天小编就教大家学会使用华为手机中的三种翻译技巧,需要...

翻译小天才
40分钟前
4
0
企业服务软件开发中需要注意的三个问题

在开发企业服务软件时,我们需要分为:业务需求、用户需求、产品需求,三大需求层次,三个层次互相关联,企业服务软件开发首先要服务业务,需要满足业务的需求,再关注用户体验,也就是用户需...

积木创意科技
42分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部