zoukankan      html  css  js  c++  java
  • (转)在 ASP.NET MVC 中创建自定义 HtmlHelper

    原文地址:http://www.cnblogs.com/snowdream/archive/2010/09/21/create-custom-htmlhelper-in-aspnet-mvc.html

    在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 <class="LinkTitle"><href="#">链接标题</a></p>
    3 <class="LinkDescription">链接描述</p>
    4 </div>

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

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

    代码
     1 /// <summary>
     2 /// 带描述的链接扩展方法
     3 /// </summary>
     4 /// <param name="htmlHelper">要扩展的HtmlHelper类</param>
     5 /// <param name="title">标题</param>
     6 /// <param name="url">链接地址</param>
     7 /// <param name="description">描述</param>
     8 /// <returns>HTML代码</returns>
     9 public static MvcHtmlString LinkWithDescription(this HtmlHelper htmlHelper, string title, string url, string description)
    10 {
    11     // 生成与标题链接有关的HTML代码
    12     TagBuilder titleContainer = new TagBuilder("p");    // 标题链接容器p
    13     TagBuilder titleLink = new TagBuilder("a");    // 标题中的文字要有链接,所以包含在a标签内
    14     titleLink.MergeAttribute("href", url);    // 为a添加href属性并指定链接地址
    15     titleLink.SetInnerText(title);    // 标题文字
    16     titleContainer.InnerHtml = titleLink.ToString();    // 将a放到p中
    17     titleContainer.AddCssClass("LinkTitle");    // 为标题添加样式
    18 
    19     // 生成与链接描述有关的HTML代码
    20     TagBuilder descriptionContainer = new TagBuilder("p");    // 连接描述容器p
    21     descriptionContainer.InnerHtml = description;    // 描述文字
    22     descriptionContainer.AddCssClass("LinkDescription");    // 为描述添加样式
    23 
    24     // 将上述元素放入一个DIV中
    25     TagBuilder div = new TagBuilder("div");
    26     div.InnerHtml = string.Format("{0}{1}", titleContainer.ToString(), descriptionContainer.ToString());
    27 
    28     // 返回生成的HTML代码
    29     return MvcHtmlString.Create(div.ToString());
    30 }

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

    在ASPX页中,可以使用

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

    在Models里新建类LinkInfo.cs如下:

    代码
    namespace Snowdream.Demo.LinkWithDescription
    {
        
    /// <summary>
        
    /// 链接信息实体类
        
    /// </summary>
        public class LinkInfo
        {
            
    /// <summary>
            
    /// 标题
            
    /// </summary>
            public string Title;

            
    /// <summary>
            
    /// 地址
            
    /// </summary>
            public string Url;

            
    /// <summary>
            
    /// 描述
            
    /// </summary>
            public string Description;
        }
    }

    来调用上面的扩展方法,这里的链接标题、链接地址和描述等信息可以通过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页中写

    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 <%%>

    示例下载

  • 相关阅读:
    再次或多次格式化导致namenode的ClusterID和datanode的ClusterID之间不一致的问题解决办法
    Linux安装aria2
    POJ 3335 Rotating Scoreboard 半平面交
    hdu 1540 Tunnel Warfare 线段树 区间合并
    hdu 3397 Sequence operation 线段树 区间更新 区间合并
    hud 3308 LCIS 线段树 区间合并
    POJ 3667 Hotel 线段树 区间合并
    POJ 2528 Mayor's posters 贴海报 线段树 区间更新
    POJ 2299 Ultra-QuickSort 求逆序数 线段树或树状数组 离散化
    POJ 3468 A Simple Problem with Integers 线段树成段更新
  • 原文地址:https://www.cnblogs.com/fcsh820/p/1834479.html
Copyright © 2011-2022 走看看