Featured Posts

MVC中为我们提供了一些方便生成html标签的方法 （HtmlHelper）

例如：

<p class="site-title">@Html.ActionLink("将你的徽标放置在此处", "Index", "Home")</p>

这是一个生成a标签  超链接的htmlHelper , 那看下他生成的html源文件

 <p class="site-title"><a href="/">将你的徽标放置在此处</a></p>

是不不比写html标签简单多了。。。 呵呵 但是不幸的是微软并没有把所有的html标签都对应有help方法 比如 img 标签

我们今天的任务就是自定义一个HtmlHelper 实现img标签的功能

首先，新建一个static（静态）类 注意必须是public的 ，然后再写一个static方法 注意此方法的方法名就是你Html. 出来的名  比如@Html.ActionLink 其中ActionLink就是方法名。

看下代码：

public static class MyHtmlHelper  2 {  3 /// <summary>  4 /// 自定义一个@html.Image()  5 /// </summary>  6 /// <param name="helper"></param>  7 /// <param name="src">src属性</param>  8 /// <param name="alt">alt属性</param>  9 /// <returns></returns> 10 public static MvcHtmlString Image(this HtmlHelper helper, string src, string alt) 11 { 12 var builder = new TagBuilder("img"); 13 builder.MergeAttribute("src", src); 14 builder.MergeAttribute("alt", alt); 15 builder.ToString(TagRenderMode.SelfClosing); 16 return MvcHtmlString.Create(builder.ToString()); 17 } 18 }

			注意：

1. 方法中的第一个参数必须为this HtmlHelper, 然后其后是此标签需要的参数。

2. 方法的返回值为MvcHtmlString 如果您把返回值定义为String的话 那么返回的字符窜会被转义，为了防止转义所以将其的返回值定义为MvcHtmlString

3. 新建一个TagBuilder类 指定要生成的html标签的名，以及其属性。 
		

View视图中的代码：

1. 引用MyHtmlHelper的命名空间

第一种方法 直接在对应的cshtml文件中写下面代码

@using MvcAppAndEF_Test1.Common

第二种方法 打开Views文件夹中的web.config 文件会看到如下代码

<pages pageBaseType="System.Web.Mvc.WebViewPage"> 2 <namespaces> 3 <add namespace="System.Web.Mvc" /> 4 <add namespace="System.Web.Mvc.Ajax" /> 5 <add namespace="System.Web.Mvc.Html" /> 6 <add namespace="System.Web.Optimization"/> 7 <add namespace="System.Web.Routing" /> 8 </namespaces> 9 </pages>

将命名空间添加到这也行

下面看下自定义HtmlHelper的使用方法

<div> <!-- html方式写的 --> <img src ="abc.jpg" alt ="abc" /> <!-- mvc中的 htmlhelper方法写的 --> @Html.Image("abc.jpg","abc") </div>

Result： 浏览器查看源 看下html生成的源代码

 <div> <!-- html方式写的 --> <img src ="abc.jpg" alt ="abc" /> <!-- mvc中的 htmlhelper方法写的 --> <img alt="abc" src="abc.jpg"></img> </div>

怎么样 是不是很简单呢？