您的位置：首页 > Web前端 > HTML

创建自定义HTML Helper

2010-02-28 15:35 288 查看
此教程向你演示如何在你的MVC视图里创建自定义HTML Helper。利用 HTML Helpers, 可以减少乏味的输入HTML标签。

在教程的第一部分，我描述了ASP.NET MVC框架已有的HTML Helper。然后，我描述了创建自定义HTML Helper的两个方法：我会解释如何通过创建静态方法和扩展方法来创建HTML Helper。

理解 HTML Helper

HTML Helper 只是一个返回字符串的方法。这个字符串可以表示你想要的任何内容。例如，你可以使用HTML Helper来呈现标准的HTML标签如 HTML 
<input>
和 
<img>
标签。你还可以用HTML Helper来呈现更多复杂内容比如一个标签页或者一个数据库数据的HTML表格。

ASP.NET MVC 框架包括了以下标准的HTML Helpers (此列表并不完整):

Html.ActionLink()

Html.BeginForm()

Html.CheckBox()

Html.DropDownList()

Html.EndForm()

Html.Hidden()

Html.ListBox()

Html.Password()

Html.RadioButton()

Html.TextArea()

Html.TextBox()

例如, 考虑代码1的表单。此表单由两个标准HTML Helper呈现（见图1）。此表单用 
Html.BeginForm()
和
Html.TextBox()
Helper 方法来呈现一个简单的HTML表单。




图01: 由HTML Helper呈现的页面 (点击查看完整大小)

代码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>
[/code]
Html.BeginForm() Helper 方法用来创建 HTML 
<form>
标签的开头和结尾。注意 
Html.BeginForm()
方法在一个using语句里调用。 using 语句确保 
<form>
标签在using块最后能够关闭。

如果你愿意，不用using块，你可以调用 Html.EndForm() Helper 方法来关闭 
<form>
标签。觉得哪个直观你就用哪个吧。

Html.TextBox()
Helper 方法用来呈现 HTML 
<input>
标签。如果你在浏览器中选择查看源代码那么你会看到如图2所示的HTML源。注意源代码包含了标准的HTML标签。

重要点: 注意 
Html.TextBox()
-HTML Helper 用 
<%= %>
标签而不是 
<% %>
标签来呈现。如果你不加这个等号，那么浏览器将不呈现任何东西。
ASP.NET MVC 框架包含了一小组helpers。八成情况下，你将需要用自定义HTML Helper来扩展MVC框架。在此教程的其余部分，你会学到两个创建自定义HTML Helper的方法。

代码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>
[/code]

用静态方法创建HTML Helper

新建HTML Helper的最简单的方法是创建一个返回字符串的静态方法。例如，你决定新建一个HTML Helper来呈现 HTML 
<label>
标签。你可以使用代码3中的类来呈现
<label>
。

代码3 – 
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);
}
}
}
[/code]
代码3中的类没什么特别的。 
Label()
方法仅仅返回一个字符串。

代码4中修改后的Index视图用 
LabelHelper
呈现 HTML 
<label>
标签。注意视图包括了一个
<%@ imports %>
指令来引入 
Application1.Helpers
命名空间。

代码4 – 
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>
[/code]

用扩展方法创建HTML Helper

如果你想创建跟ASP.NET MVC框架中的标准HTML Helper那样的HTML Helper，那么你需要创建扩展方法。扩展方法让你可以在现有类中添加新方法。创建HTML Helper方法时，为HtmlHelper类添加新方法，这个类由视图的Html属性表示。

代码5 中的类添加了一个名为Label()扩展方法到 
HtmlHelper。
此类你要注意很多地方。首先，注意这个类是个静态类。你必须定义扩展方法到静态类。

其次, 注意
Label()
方法的第一个参数前面有个关键字 
this
。扩展方法的第一个参数指示了扩展方法所扩展的类。

代码5 – 
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);
}
}
}
[/code]
创建了扩展方法，并成功生成你的应用程序后，扩展方法就可以像其他类中的所有方法那样显示在Visual Studio智能提示中。(见图 2)。唯一不同的是扩展方法旁边的图标比较特殊(一个向下的箭头)。




图02: 使用 Html.Label() 扩展方法(点击查看完整大小)

代码6中修改后的Index视图用 Html.Label() 扩展方法呈现它所有的 
<label>
标签。

代码6 – 
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>
[/code]

总结

在这篇教程里，你学到了两个创建自定义HTML Helper的方法。首先，你学到了如何通过创建一个返回字符串的静态方法来创建一个自定义 
Label()
HTML Helper。 然后，你学到了如何通过在HtmlHelper 类中创建一个扩展方法类创建一个自定义 
Label()
HTML Helper。

在这篇教程里，我专注于建立一个极其简单的HTML Helper方法。注意 HTML Helper 可以随你所想地完成。你可以建立呈现诸如树形列表，菜单或者数据库记录的表格等丰富内容的HTML Helper。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航