很久没在博客园发表文章了,今天来总结一下如何在asp.net mvc中添加自定义的HTML辅助方法。我们现在设计这么一个目前,利用自定义的HTML方法来渲染一个普通的img标记。直接进入主题吧:

首先我们先来看一下一个普通的img标签在HTML中的代码:

<img src="Content/images/封面.jpg" alt="图片" id="img01" width="500px" height="250px" class="img" style="" />

  这个是我们渲染之后从服务器端输出到浏览器中的结果,那么现在我们来实现它。

第一步,我们需要定义一个扩展方法,这个扩展方法就是用来渲染img元素的,代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; //注意:第一点,名称空间必须为System.Web.Mvc.Html
namespace System.Web.Mvc.Html
{
//第二点,类名称可以为任意名称,但是必须为静态类
public static class CreateImageExtensions
{
/*
public static MvcHtmlString Image(this HtmlHelper html, string id,string url,string width,string height,Dictionary<string,object> attributes)
{
TagBuilder tagHelper = new TagBuilder("image");
tagHelper.GenerateId(id);
tagHelper.MergeAttribute("src", url);
tagHelper.MergeAttribute("width", width);
tagHelper.MergeAttribute("height", height);
if (attributes!=null&&attributes.Count>0)
tagHelper.MergeAttributes(attributes);
return MvcHtmlString.Create( tagHelper.ToString());
}*/ //第三,扩展方法的名称可以使用任意名称,但是此方法必须满足以下两点:
//01. 必须扩展自HtmlHelper类;
//02. 方法的返回值类型必须为:MvcHtmlString
public static MvcHtmlString CreateImage(this HtmlHelper html, string id, string src, string width, string height,string cssClass, Dictionary<string, object> attributes)
{
TagBuilder tagHelper = new TagBuilder("img");
tagHelper.GenerateId(id);
tagHelper.MergeAttribute("src", src);
tagHelper.MergeAttribute("width", width);
tagHelper.MergeAttribute("height", height);
if (attributes != null && attributes.Count > 0)
tagHelper.MergeAttributes(attributes);
return MvcHtmlString.Create(tagHelper.ToString(TagRenderMode.SelfClosing));
}
}
}

  这里有三点值得注意的:

1.  名称空间必须为System.Web.Mvc.Html,这一点至关重要;

2. 类名称可以为任意名称,但是必须为静态类。事实上扩展方法也必须定义在一个静态类中;

3. 扩展方法的名称可以使用任意名称,但是必须扩展自HtmlHelper类,并且方法的返回值类型必须为:MvcHtmlString。

当然方法的参数列表和实现代码我们可以根据实际情况来进行定义和书写,我这里只是简单的整理一下步骤,我的实现代码很简单,仅仅是为了解释步骤。事实上类名和方法名也应该以具有“实际意义”的名称来名称,我们可以按照MVC框架的“约定”来进行命名,比如类名为ImageExtensions,方法名为Image等。值得注意的另一点是,其实我们可以定义重载方法用来满足我们的其他需求,比如强类型的版本,这个可以参考MVC框架的HTML辅助方法。

有了我们刚刚说的三点,接下来就是在View中调用我们刚刚定义的HTML辅助方法了,比如我们在Index.cshtml文件中添加如下代码:

<div>@Html.CreateImage("img01", Url.Content("~/Content/images/IMG_9084_2寸蓝底.jpg"),"551px","787px","imgCls", null)</div>

  这个就和我们一般的调用mvc框架的HTML辅助方法完全一致。

如何在asp.net mvc中添加自定义的HTML辅助种方法的更多相关文章

  1. 如何在 ASP.NET MVC 中集成 AngularJS(3)

    今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...

  2. 如何在 ASP.NET MVC 中集成 AngularJS(2)

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...

  3. 如何在 ASP.NET MVC 中集成 AngularJS(1)

    介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...

  4. ASP.NET MVC中Area的另一种用法

    ASP.NET MVC中Area的另一种用法 [摘要]本文只是为一行代码而分享 context.MapRoute("API", "api/{controller}/{ac ...

  5. 在ASP.NET Core中构建路由的5种方法

    原文链接 :https://stormpath.com/blog/routing-in-asp-net-core 在ASP.NET Core中构建路由的5种方法 原文链接 :https://storm ...

  6. C#调用接口注意要点 socket,模拟服务器、客户端通信 在ASP.NET Core中构建路由的5种方法

    C#调用接口注意要点   在用C#调用接口的时候,遇到需要通过调用登录接口才能调用其他的接口,因为在其他的接口需要在登录的状态下保存Cookie值才能有权限调用, 所以首先需要通过调用登录接口来保存c ...

  7. ASP.Net Core中处理异常的几种方法

    本文将介绍在ASP.Net Core中处理异常的几种方法 1使用开发人员异常页面(The developer exception page) 2配置HTTP错误代码页 Configuring stat ...

  8. Spring MVC 中获取session的几种方法

    Spring MVC 中使用session是一种常见的操作,但是大家上网搜索一下可以看到获取session的方式方法五花八门,最近,自己终结了一下,将获取session的方法记录下来,以便大家共同学习 ...

  9. ASP.NET MVC中的错误-友好的处理方法

    转自:http://blog.csdn.net/lizhao1226/article/details/6367400 “/”应用程序中的服务器错误. 无法找到资源. 说明: HTTP 404.您正在查 ...

随机推荐

  1. 腾讯Hermes设计概要——数据分析用的是列存储,词典文件前缀压缩,倒排文件递增id、变长压缩、依然是跳表-本质是lucene啊

    转自:http://data.qq.com/article?id=817 三.Hermes设计概要 架构描述 系统核心进程均采用分散化设计,根据业务发展需求,可随意扩缩容机器; 周期性数据直接通过td ...

  2. Linux-打包和文件系统

    1 文件后缀 在Linux中后缀没有实际意义 2 打包文件 tar c 创建一个归档 v 查看过程 f 指定文件名 t 列出归档内容 x 从归档中解压出文件 C 改变到哪个目录 z gzip压缩 j ...

  3. 并不对劲的bzoj5322:loj2543:p4561:[JXOI2018]排序问题

    题目大意 \(T\)(\(T\leq10^5\))组询问 每次给出\(n,m,l,r\),和\(n\)个数\(a_1,a_2,...,a_n\),要找出\(m\)个可重复的在区间\([l,r]\)的数 ...

  4. SNMP的应用

    前两天项目要求一个附加功能,远程监视服务器的运行状况,要定期监视指定端口,指定业务,还包括服务器的磁盘空间,内存,CPU使用率等等.这头俩事还好说,ping和telnet也就搞定了,实在不行就开个so ...

  5. vue-router 安装

    如果在一个模块化工程中使用它,需要通过Vue.use() 明确的安装路由功能,如果使用全局的script标签,则不需要手动安装. Vue Router是Vue.js官方的路由管理器.它和Vue.js的 ...

  6. ++i和i++的效率孰优孰劣

    在内建数据类型的情况下,效率没有区别: 在自定义数据类型的情况下,++i效率更高! 分析: (自定义数据类型的情况下) ++i返回对象的引用: i++总是要创建一个临时对象,在退出函数时还要销毁它,而 ...

  7. 2014年将会受欢迎的IT技能--你有多少哪?

    据国外媒体报道,据Global Knowledge等十几家研究机构发布的2014年IT技能和薪金调查报告显示,2014年最受欢迎的十大IT技能如下: 1.编程与应用开发 据美国劳工统计局称,开发者和程 ...

  8. Algorithms : Programming Assignment 3: Pattern Recognition

    Programming Assignment 3: Pattern Recognition 1.题目重述 原题目:Programming Assignment 3: Pattern Recogniti ...

  9. 别用visual editor了,用WindowBuilder

    以前利用 Eclipse Visual Editor 项目构建 GUI,现在用WindowBuilder吧. 官网说: The Visual Editor project has been archi ...

  10. VS2010在WIN7下安装报错“下列组件安装失败”如何解决

    VS2010在WIN7下安装报错“下列组件安装失败”如何解决 http://www.111cn.net/net/42/75914.htm