HtmlHelper让我们的效率更高

想了很久才想到这个标题.我们先来看一个简单的DEMO.
IDE:VS2010
mvc版本:3.0rc2
我们新建一个项目:

本文来自博客园Zilch-Wei
现在我们的需求是   添加一个链接 指向Home/About这个action链接为一张图片.这样图片存放在项目根目录/file/1.jpg.
这样我们会尝试使用<%=Html.ActionLink("http://www.cnblogs.com/file/1.jpg", "About") %>编译运行这个项目.如图:

看来我们的html代码被Encode了没有被正确的执行到.当然我们可以用传统的方法来做这个事情.不过HtmlHelper可以帮我们解决这个问题.我们在根目录下新建一个文件夹HtmlHelpers

然后添加一个静态类MyHtmlHelper如图本文来自博客园Zilch-Wei

我们编写一个扩展方法:

本文来自博客园Zilch-Wei

/// <summary>本文来自博客园Zilch-Wei

/// 显示图片链接
/// </summary>
/// <param name="name">鼠标指向时显示的文字,可以为Null</param>
/// <param name="url">点击图片显示的地址,如果为Null则不会跳转</param>
/// <param name="src">图片的路径,如果为Null则在view上看不到任何显示</param>
/// <returns></returns>
public static MvcHtmlString Link_Img(this HtmlHelper htmlhelper,string name,string url,string src)
{
TagBuilder titleContent
= new TagBuilder("a");//创建一个<a>的标签
titleContent.MergeAttribute("alt", name);//鼠标指向图片显示的字
titleContent.MergeAttribute("href", url);//点击转到的地址
TagBuilder imgContent = new TagBuilder("img");//创建一个<a>的标签
imgContent.MergeAttribute("src", src);//图片的路径
titleContent.InnerHtml = string.Format("{0}", imgContent.ToString());
return MvcHtmlString.Create(titleContent.ToString());

}

当然我们不止在一个地方使用这个扩展方法 所以我们在web.config的<namespaces>节点中添加<add namespace="MvcHtmlHelper.HtmlHelpers"/>

这样我们就可以在view用使用它了.使用中的效果如图:本文来自博客园Zilch-Wei

我们运行结果:

好了,我们的目的达到了,这样我们的图片地址可以直接通过数据库取出来做成链接,当然你也可以手动来配置他.

最后HtmlHelper很强大,多用于View层的一些扩展,我也在尝试把jq的一些插件直接扩展进去.

posted @ 2010-12-29 10:05  zilchwei  阅读(1202)  评论(5编辑  收藏  举报