本文共 5792 字,大约阅读时间需要 19 分钟。
概述
在ASP.NET MVC框架中已经封装了很多基于Html标准的Html控件,我们可以方便的使用这些控件输出想要的内容,使开发变得快捷。
例如ASP.NET MVC框架包括以下设置标准的HTML控件(部分控件):
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 <%} %>该文章转载自无忧考网:
2. 在asp.net mvc 中每一个Html控件都返回了MvcHtmlString ,他继承了HtmlString。 下面自定义一个关于显示男女性别的自定义Html控件,使在创建页面时,可以直接调用该自定义的Html控件。 可以查看其他的Html控件返回的是HtmlHelper,所以自定义的时候也要返回相同的类型 直接在Controls文件夹下建立要自定义的html控件 代码如下:在页面中只需调用: @Html.LabelGender()
显示如图:
注意事项:
a、注意创建类的命名空间要与本身的@Html保持一致b、创建的类须为静态类,命名规则一般后缀为Extensions
能对HtmlHelper控件进行扩展,为建立自己的html标签提供了很大的方便。
3.Html控件扩展类
先看下面的代码
// // 摘要: // 获取或设置 System.Web.Mvc.HtmlHelper 对象,该对象用于呈现 HTML 元素。 // // 返回结果: // 用于呈现 HTML 元素的 System.Web.Mvc.HtmlHelper 对象。 public HtmlHelperHtml { 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("", 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("", nametarget, idtarget); return new MvcHtmlString(str); } }
调用控件
此时我们再写Html控件看看
页面代码
@using MvcApplication.Controls;@Html.LKLabel("male", "男")@Html.LKRadioButton("sex", "male")@Html.LKLabel("female", "女")@Html.LKRadioButton("sex", "female")
运行效果
总结
对于控件的扩展极大的满足了我们在编程过程中的各种需求,使得我们在页面编程上面变得简单快捷。