在 ASP.NET MVC 中创建自定义 HtmlHelper 控件

概述

 

在ASP.NET MVC框架中已经封装了很多基于Html标准的Html控件，我们可以方便的使用这些控件输出想要的内容，使开发变得快捷。

例如ASP.NET MVC框架包括以下设置标准的HTML控件（部分控件）：

• Html.ActionLink()
• Html.BeginForm()
• Html.CheckBox()
• Html.DropDownList()
• Html.EndForm()
• Html.Hidden()
• Html.ListBox()
• Html.Password()
• Html.RadioButton()
• Html.TextArea()
• Html.TextBox()
  

1.
在ASP.NET MVC应用程序的开发中，我们常碰到类似Html.Label或Html.TextBox这样的代码，它将在网页上产生一个label或input标记。这些HtmlHelper的扩展方法有些像WebForm中的控件，只需传入一些参数即可生成相应的HTML代码。本文将介绍创建HtmlHelper的方法。

Html.Textbox方法的返回值是MvcHtmlString，它生成了一些HTML代码。创建HtmlHelper，就像在生成HTML代码。下面以一个带有简要描述功能的链接HtmlHelper为例介绍创建自定义HtmlHelper的方法。它将显示一个链接并在下方简要介绍该与该链接内容有关的信息。在某些带有简要描述的项列表页上可能会需要类似的功能。最后的结果预览如下图。

上面使用了3次自定义的HtmlHelper，每次生成的代码如下

1 <div>
2 <p class="LinkTitle"><a href="#">链接标题</a></p>
3 <p class="LinkDescription">链接描述</p>
4 </div>
 

可能稍微有点复杂，因为有了标签的嵌套。

做好准备工作以后，新建一个静态类LinkWithDescriptionExtensions，添加静态方法LinkWithDescription，代码如下

代码 
 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;

namespace MvcApp.Web.CustomerControllers
{
    public static class HtmlHelpersExtensions
    {
        /// <summary>  
        /// 获取值时：value值为1表示男，value值为2表示女  
        /// 默认选中男  
        /// </summary>  
        /// <param name="helper"></param>
        /// <param name="defaultChecked"></param>  
        /// <returns></returns>  
        public static MvcHtmlString LabelGender(this HtmlHelper helper, string defaultChecked = "male")
        {
            StringBuilder str = new StringBuilder();
            str.AppendFormat("<input type='radio' name='sex' value=1 {0}></input>",
                             defaultChecked == "male" ? "checked='checked'" : string.Empty);
            str.AppendFormat("<label for='{0}'>{1}</label>", "male", "男"); // 显示男性值  
            str.AppendFormat("<input type='radio' name='sex' value=2 {0} ></input>",
                             defaultChecked == "female" ? "checked='checked'" : string.Empty);
            str.AppendFormat("<label for='{0}'>{1}</label>", "female", "女"); // 显示女性值  
            return new MvcHtmlString(str.ToString());
        }

        /// <summary>
        /// 带描述的链接扩展方法
        /// </summary>
        /// <param name="htmlHelper">要扩展的HtmlHelper类</param>
        /// <param name="title">标题</param>
        /// <param name="url">链接地址</param>
        /// <param name="description">描述</param>
        /// <returns>HTML代码</returns>
        public static MvcHtmlString LinkWithDescription(this HtmlHelper htmlHelper, string title, string url,
                                                        string description)
        {
            // 生成与标题链接有关的HTML代码
            TagBuilder titleContainer = new TagBuilder("p"); // 标题链接容器p
            TagBuilder titleLink = new TagBuilder("a"); // 标题中的文字要有链接,所以包含在a标签内
            titleLink.MergeAttribute("href", url); // 为a添加href属性并指定链接地址
            titleLink.SetInnerText(title); // 标题文字
            titleContainer.InnerHtml = titleLink.ToString(); // 将a放到p中
            titleContainer.AddCssClass("LinkTitle"); // 为标题添加样式

            // 生成与链接描述有关的HTML代码
            TagBuilder descriptionContainer = new TagBuilder("p"); // 连接描述容器p
            descriptionContainer.InnerHtml = description; // 描述文字
            descriptionContainer.AddCssClass("LinkDescription"); // 为描述添加样式

            // 将上述元素放入一个DIV中
            TagBuilder div = new TagBuilder("div");
            div.InnerHtml = string.Format("{0}{1}", titleContainer.ToString(), descriptionContainer.ToString());
            // 返回生成的HTML代码
            return MvcHtmlString.Create(div.ToString());
        }

    }
}

先理清结构再使用TagBuilder生成HTML代码是比较方便的。这里也可以使用拼接字符串的方式来生成HTML代码，只要最后得到所需的HTML代码就可以，但是我个人不建议使用拼接字符串的方式，这样不仅思维容易混乱而且容易出错。使用TagBuilder既结构清晰，又不容易出错。

在ASPX页中，可以使用
<%@ Import Namespace="MvcApp.Web.Controllers" %>

1 <%:Html.LinkWithDescription("测试链接1", "#", "这是测试链接1的描述")%>
2 <%:Html.LinkWithDescription("测试链接2", "#", "这是测试链接2的描述")%>
3 <%:Html.LinkWithDescription("测试链接3", "#", "这是测试链接3的描述")%>
 

来调用上面的扩展方法，这里的链接标题、链接地址和描述等信息可以通过ViewData等方式传入。在Action中写

代码
 1 /// <summary>
 2 /// Demo
 3 /// </summary>
 4 /// <returns>Demo视图</returns>
 5 public ActionResult Demo()
 6 {
 7     // 创建链接信息列表
 8     List<LinkInfo> links = new List<LinkInfo>();
 9     links.Add(new LinkInfo { Description = "这是测试链接1的描述", Title = "测试链接1", Url = "#" });
10     links.Add(new LinkInfo { Description = "这是测试链接2的描述", Title = "测试链接2", Url = "#" });
11     links.Add(new LinkInfo { Description = "这是测试链接3的描述", Title = "测试链接3", Url = "#" });
12
13
14     ViewData["Links"] = links;
15
16     return View();
17 }
 

在ASPX页中写
<%@ Import Namespace="MvcApp.Web.Controllers" %>

1 <%List<LinkInfo> links=ViewData["Links"] as List<LinkInfo>;
2 foreach (var link in links)
3 {   %>
4 <%:Html.LinkWithDescription(link.Title, link.Url, link.Description)%>
5 <%} %>

该文章转载自无忧考网：http://www.51test.net

2.
在asp.net mvc 中每一个Html控件都返回了MvcHtmlString ，他继承了HtmlString。
下面自定义一个关于显示男女性别的自定义Html控件，使在创建页面时，可以直接调用该自定义的Html控件。
可以查看其他的Html控件返回的是HtmlHelper,所以自定义的时候也要返回相同的类型
直接在Controls文件夹下建立要自定义的html控件
代码如下：

此类要返回的value值也可以根据参数的方式传入
using MvcApp.Web.Controllers

在页面中只需调用： @Html.LabelGender()  

显示如图：

注意事项：
a、注意创建类的命名空间要与本身的@Html保持一致

b、创建的类须为静态类，命名规则一般后缀为Extensions

能对HtmlHelper控件进行扩展，为建立自己的html标签提供了很大的方便。

3.

Html控件扩展类

 

先看下面的代码

        //
        // 摘要:
        //     获取或设置 System.Web.Mvc.HtmlHelper 对象，该对象用于呈现 HTML 元素。
        //
        // 返回结果:
        //     用于呈现 HTML 元素的 System.Web.Mvc.HtmlHelper 对象。
        public HtmlHelper<TModel> Html { get; set; }

复制代码

这是系统对页面上@Html属性的定义。

我们可以看到该Html是返回了一个HtmlHelper

看到这里我们的入口点就找到了，就是以HtmlHelper作为扩展类型。

继续在建好的Controls文件夹中建立名为LabelExtensions的类和RadioButtonExtensions的类

代码

    public static class LabelExtensions
    {
        public static MvcHtmlString LKLabel(this HtmlHelper helper, string fortarget, string text)
        {
            string str = String.Format("<label for='{0}'>{1}</label>", fortarget, text);
            return new MvcHtmlString(str);
        }
    }

    public static class RadioButtonExtensions
    {
        public static MvcHtmlString LKRadioButton(this HtmlHelper helper, string nametarget, string idtarget)
        {
            string str = String.Format("<input type='radio' name='{0}' id='{1}' />", nametarget, idtarget);
            return new MvcHtmlString(str);

        }
    }

复制代码

　　

调用控件

此时我们再写Html控件看看

页面代码

@using MvcApplication.Controls;
@Html.LKLabel("male", "男")
@Html.LKRadioButton("sex", "male")
<br />
@Html.LKLabel("female", "女")
@Html.LKRadioButton("sex", "female")

复制代码

　　

运行效果

 

总结

 

对于控件的扩展极大的满足了我们在编程过程中的各种需求，使得我们在页面编程上面变得简单快捷。