七、创建自定义的HTML Helper

最新推荐文章于 2024-07-27 21:41:27 发布

weixin_30273175

最新推荐文章于 2024-07-27 21:41:27 发布

阅读量101

点赞数

文章标签：测试 xhtml c#

原文链接：http://www.cnblogs.com/zxktxj/archive/2012/04/21/2461520.html

版权

这篇文章我们来讨论一下如何创建我们自己的HTML Helper ，以便在MVC视图中使用。使用HTML Helper可以减少书写那些烦人的HTML标记。
在这篇文章的第一部分，我们来谈一下ASP.NET MVC框架中现有的HTML Helper，然后我们再来研究两种创建自定义HTML Helper的方法：通过静态方法创建和通过扩展方法创建。

一、理解HTML Helper
HTML Helper就是一个返回字符串的方法，这个字符串能提供你想要的各种类型的内容。比如，我们可以使用HTML Helper呈显标准的HTML标记（<input>和<img>等），我们也可以使用HTML Helper呈显一些稍复杂的内容，如属性页或HTML Table表格。
ASP.NET MVC框架主要包含下列标准的HTML Helper，但不全。
  Html.ActionLink()
   Html.BeginForm()
   Html.CheckBox()
   Html.DropDownList()
   Html.EndForm()
   Html.Hidden()
   Html.ListBox()
   Html.Password()
   Html.RadioButton()
   Html.TextArea()
   Html.TextBox()
下面的表单中，使用HTML Helper的两个方法Html.BeginForm()和Html.TextBox()呈显了一个表单。

《图1》
Listing 1 – Views\Home\Index.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml ">
   <head id="Head1" runat="server">
    <title>Index</title>
   </head>
   <body>
    <div>
   <% using (Html.BeginForm()){ %>
    <label for="firstName">First Name:</label>
    <br />
   <%= Html.TextBox("firstName")%>
    <br /><br />
    <label for="lastName">Last Name:</label>
    <br />
   <%= Html.TextBox("lastName")%>
    <br /><br />
    <input type="submit" value="Register" />
   <% } %>      1
    </div>
   </body>
</html>
Html.BeginForm()方法用来创建一对<form>标记，我们注意到Html.BeginForm()方法放在using语句中，using语句确保在using语句块结束的时候产生一个</form>结束标记。
当然我们也可以不使用using语句块，我们可以使用Html.EndForm()方法来产生</form>结束标记。使用哪种方式可以根据自己的情况来选择。
Html.TextBox()方法用来显示<input>标记，如果我们在浏览器中点击“查看源文件”会看到我们的HTML Helper变成HTML标记了。
Listing 2 – Index.aspx Source
<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
    <title>Index</title> </head>
   <body>
    <div>
   <form action="http://localhost:33102/" method="post">
    <label for="firstName">First Name:</label>
    <br />
   <input id="firstName" name="firstName" type="text" value="" />
    <br /><br />
    <label for="lastName">Last Name:</label>
    <br />
   <input id="lastName" name="lastName" type="text" value="" />
    <br /><br />
    <input id="btnRegister" name="btnRegister" type="submit" value="Register" />
   </form>
    </div>
   </body>
</html>
注意：要用<%= %>来显示Html.Text()的内容，而不能用<%%>标记，否则不会在浏览器显示任何数据。
在ASP.NET MVC框架中包含一部分HTML Helper，好多情况下我们需要自定义HTML Helper来扩展MVC框架。在下面的部分我们来学习两种自定义HTML Helper的方法。

二、使用静态方法来创建HTML Helper
最简单的创建HTML Helper的途径是使用返回字符串的静态方法。假设，我们要创建一个HTML Helper，该HTML Helper用来呈显<label>标签，我们可以使用下面的代码来实现
Listing 2 – Helpers\LabelHelper.cs
using System;
namespace MvcApplication1.Helpers
{
  public class LabelHelper
   {
   public static string Label(string target, string text)
    {
    return String.Format("<label for='{0}'>{1}</label>", target, text);
    }
   }
}
在上面的代码中没有什么特殊的地方，Label()方法返回一个HTML字符串。

下面的代码就是使用我们的LabelHelper来呈显<label>标签的。这里需要注意的是，视图中包含了一个<%@ import%>指示符，用来导入Application1.Helpers命名空间
Listing 2 – Views\Home\Index2.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2"%>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <head id="Head1" runat="server">
    <title>Index2</title>
   </head>
   <body>
    <div>
   <% using (Html.BeginForm())           { %>
   <%= LabelHelper.Label("firstName", "First Name:") %>
    <br />
    <%= Html.TextBox("firstName")%>
    <br /><br />
   <%= LabelHelper.Label("lastName", "Last Name:") %>
    <br />
    <%= Html.TextBox("lastName")%>
    <br /><br />
    <input type="submit" value="Register" />
   <% } %>
    </div>
   </body>
</html>

三、使用扩展方法来创建HTML Helper
如果我们想让我们自定义的HTML Helper像ASP.NET MVC自带的HTML Helper那样直接使用的话，需要使用扩展方法。扩展方法就是让我们向已存在的类中加入新方法。我们可以给HtmlHelper类中扩展新方法，以达到我们创建自定义HTML Helper的目的。
下面的代码中向HtmlHelper类中扩展了一个名子为Label()的新方法，这里有两点内容需要我们注意：
1、我们自定义扩展方法的类是一个静态类。
2、 Label()方法的第一个参数有一个this关键字声明，这第一个参数就是指示我们这个扩展方法是扩展的哪个类。
Listing 3 – Helpers\LabelExtensions.cs
using System;
using System.Web.Mvc;
namespace MvcApplication1.Helpers
{
  public static class LabelExtensions
   {
    public static string Label(this HtmlHelper helper, string target, string text)
    {
    return String.Format("<label for='{0}'>{1}</label>", target, text);
    }
   }
}
在我们创建完扩展方法后，我们重新生成我们的程序，这时我们就可以在VS的智能感知列表中指到我们的Label()方法，所不一样的是：我们这个扩展方法前面的图标带有一个蓝色的向下箭头。

《图2》

下面是我们使用扩展方法Label()的页面视图代码
Listing 4 – Views\Home\Index3.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index3.aspx.cs" Inherits="MvcApplication1.Views.Home.Index3" %>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <head id="Head1" runat="server">
    <title>Index3</title>
   </head>
   <body>
    <div>
   <% using (Html.BeginForm())
   { %>
   <%= Html.Label("firstName", "First Name:") %>
    <br />
    <%= Html.TextBox("firstName")%>
    <br /><br />
   <%= Html.Label("lastName", "Last Name:") %>
    <br />
    <%= Html.TextBox("lastName")%>
    <br /><br />
    <input type="submit" value="Register" />
   <% } %>
    </div>
   </body>
</html>

总结
在这篇文章中我们学习两种创建自定义HTML Helper的方法。
1、创建返字符串的静态方法创建自定义HTML Helper
2、使用对HtmlHelper类编写扩展方法来创建自定义HTML Helper
在这篇文章中，我们创建了一个很简单的自定义HTML Helper，我们可以编写复杂的HTML Helper，如呈显树状目录，菜单或数据表格等。

转载于:https://www.cnblogs.com/zxktxj/archive/2012/04/21/2461520.html

weixin_30273175

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
七、创建自定义的HTML Helper

这篇文章我们来讨论一下如何创建我们自己的HTML Helper ，以便在MVC视图中使用。使用HTML Helper可以减少书写那些烦人的HTML标记。在这篇文章的第一部分，我们来谈一下ASP.NET MVC框架中现有的HTML Helper，然后我们再来研究两种创建自定义HTML Helper的方法：通过静态方法创建和通过扩展方法创建。一、理解HTML HelperHTML Helper...
复制链接

扫一扫