[翻译：ASP.NET MVC 教程]创建自定义HTML辅助函数
2009-08-28 22:10
781 查看
本教程的目标是向你演示怎样在MVC视图中创建可使用的自定义HTML辅助函数。通过利用HTML辅助函数，你可以减少创建标准HTML页面时必须键入的冗长的HTML标签的数量。
在本教程的第一部分，我将描述包含在ASP.NET MVC框架中一些现存的HTML辅助函数。接着，我将描述两种创建自定义HTML辅助函数的方法：通过创建静态方法以及通过创建扩展方法来创建自定义HTML辅助函数。
理解HTML辅助函数 HTML辅助函数就是一个返回字符串的方法。字符串能代表你想要的任何类型的内容。例如，你可以使用HTML辅助函数来呈现像<input>和<img>这样的标准HTML标签。你也可以使用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中的表单。该表单为两个标准的HTML辅助函数所呈现（见图1）。该表单使用
图1：用HTML辅助函数所呈现的页面
清单1——
Html.BeginForm()辅助函数方法是被用来创建闭合HTML标签<form>的。注意到Html.BeginForm()方法用using语句被调用。using语句确保<form>标签在using语句块的结尾关闭。
如果你愿意，你可以调用Html.EndForm()辅助函数方法来关闭<form>标签以替代using语句块。使用两者之一来创建闭合<form>标签由你的直觉而定。
在清单1中被使用的Html.TextBox()辅助函数方法是用来呈现HTML <input>标签的。如果你在浏览器中选择查看源代码，那么你将见到清单2中的HTML源。注意到该源包含标准HTML标签。
重要：注意到Html.TextBox()辅助函数方法是以<%= %>标签的形式而不是以<% %>的形式所呈现的。如果你没有包含等号，那么浏览器将不呈现任何内容。
ASP.NET MVC框架包含一套小型的辅助函数。多数情况下，你需要通过自定义HTML辅助函数来扩展MVC框架。在本教程之前所提到的，你将了解到两种创建自定义HTML辅助函数的方法。
清单2——
<%@ 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辅助函数
创建一个新的HTML辅助函数的最简单的方法便是创建一个返回字符串的静态方法。设想一下，例如，你决定创建一个呈现HTML标签<label>的HTML辅助函数。你可以使用清单1中的类来呈现一个<label>标签。
清单1——
清单1中的类并没有什么特别之处。Label()方法简单地返回了一个字符串。
清单2中修改过的Index视图使用LabelHelper来呈现HTML标签<label>。注意到这个包含<%@ imports %>页面指令的视图引入了Application1.Helpers命名空间。
清单2——
使用扩展方法来创建HTML辅助函数
如果你想要创建像包含在ASP.NET MVC框架中的标准HTML辅助函数那样工作的HTML辅助函数，那么你需要创建扩展方法。控制方法让你向现存的类中添加新方法。当创建一个HTML辅助函数时，你向代表视图Html属性的HtmlHelper类中添加了方法。
清单3中的类向HtmlHelper类中添加了一个名为Label()的扩展方法。对于该类，有不少事是你应当注意的。首先，注意到该类是一个静态类。你必须用静态类来定义一个扩展方法。
其次，注意到Label()方法的第一个参数是由关键字this所引出的。该扩展方法的第一个参数表示该扩展方法继承自该类（即HtmlHelper）。
清单3——
在你创建完扩展方法，并且成功编译你的应用程序后，该扩展方法会像其它所有类的方法一样出现在Visual Studio代码智能提示中（见图2）。唯一的区别在于这些扩展方法以特殊的图符（一个下载箭头图标）缀前出现。
图2：使用Html.Label()扩展方法
在清单4中修改过的Index视图使用Html.Label()扩展方法来呈现视图中所有的<label>标签。
清单4——
<%@ 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辅助函数的两种方法。首先，你了解到怎样通过创建返回字符串的静态方法来创建一个自定义HTML辅助函数Label()。接着，你了解到怎样通过在HtmlHelper类上创建扩展方法来创建一个自定义HTML辅助函数Label()。
在本教程中，我集中于构建一个极为简单的HTML辅助函数方法。意识到HTML辅助函数的复杂度可以由你掌控。你可以构建呈现富文本，诸如树状视图、菜单或是数据库数据表格这样的HTML辅助函数。
作者：Kinglee
文章出处：Kinglee’s Blog (http://www.cnblogs.com/Kinglee/)
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。
在本教程的第一部分，我将描述包含在ASP.NET MVC框架中一些现存的HTML辅助函数。接着，我将描述两种创建自定义HTML辅助函数的方法：通过创建静态方法以及通过创建扩展方法来创建自定义HTML辅助函数。
理解HTML辅助函数 HTML辅助函数就是一个返回字符串的方法。字符串能代表你想要的任何类型的内容。例如，你可以使用HTML辅助函数来呈现像<input>和<img>这样的标准HTML标签。你也可以使用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中的表单。该表单为两个标准的HTML辅助函数所呈现（见图1）。该表单使用
Html.BeginForm()和
Html.TextBox()
辅助函数方法来呈现一个简单的HTML表单。
图1：用HTML辅助函数所呈现的页面
清单1——
Views\Home\Index.aspx
<%@ 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.BeginForm()辅助函数方法是被用来创建闭合HTML标签<form>的。注意到Html.BeginForm()方法用using语句被调用。using语句确保<form>标签在using语句块的结尾关闭。
如果你愿意，你可以调用Html.EndForm()辅助函数方法来关闭<form>标签以替代using语句块。使用两者之一来创建闭合<form>标签由你的直觉而定。
在清单1中被使用的Html.TextBox()辅助函数方法是用来呈现HTML <input>标签的。如果你在浏览器中选择查看源代码，那么你将见到清单2中的HTML源。注意到该源包含标准HTML标签。
重要：注意到Html.TextBox()辅助函数方法是以<%= %>标签的形式而不是以<% %>的形式所呈现的。如果你没有包含等号，那么浏览器将不呈现任何内容。
ASP.NET MVC框架包含一套小型的辅助函数。多数情况下，你需要通过自定义HTML辅助函数来扩展MVC框架。在本教程之前所提到的，你将了解到两种创建自定义HTML辅助函数的方法。
清单2——
Index.aspx
源代码
<%@ 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辅助函数
创建一个新的HTML辅助函数的最简单的方法便是创建一个返回字符串的静态方法。设想一下，例如，你决定创建一个呈现HTML标签<label>的HTML辅助函数。你可以使用清单1中的类来呈现一个<label>标签。
清单1——
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);}
}
}
清单1中的类并没有什么特别之处。Label()方法简单地返回了一个字符串。
清单2中修改过的Index视图使用LabelHelper来呈现HTML标签<label>。注意到这个包含<%@ imports %>页面指令的视图引入了Application1.Helpers命名空间。
清单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辅助函数
如果你想要创建像包含在ASP.NET MVC框架中的标准HTML辅助函数那样工作的HTML辅助函数，那么你需要创建扩展方法。控制方法让你向现存的类中添加新方法。当创建一个HTML辅助函数时，你向代表视图Html属性的HtmlHelper类中添加了方法。
清单3中的类向HtmlHelper类中添加了一个名为Label()的扩展方法。对于该类，有不少事是你应当注意的。首先，注意到该类是一个静态类。你必须用静态类来定义一个扩展方法。
其次，注意到Label()方法的第一个参数是由关键字this所引出的。该扩展方法的第一个参数表示该扩展方法继承自该类（即HtmlHelper）。
清单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);}
}
}
在你创建完扩展方法，并且成功编译你的应用程序后，该扩展方法会像其它所有类的方法一样出现在Visual Studio代码智能提示中（见图2）。唯一的区别在于这些扩展方法以特殊的图符（一个下载箭头图标）缀前出现。
图2：使用Html.Label()扩展方法
在清单4中修改过的Index视图使用Html.Label()扩展方法来呈现视图中所有的<label>标签。
清单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辅助函数的两种方法。首先，你了解到怎样通过创建返回字符串的静态方法来创建一个自定义HTML辅助函数Label()。接着，你了解到怎样通过在HtmlHelper类上创建扩展方法来创建一个自定义HTML辅助函数Label()。
在本教程中，我集中于构建一个极为简单的HTML辅助函数方法。意识到HTML辅助函数的复杂度可以由你掌控。你可以构建呈现富文本，诸如树状视图、菜单或是数据库数据表格这样的HTML辅助函数。
作者：Kinglee
文章出处：Kinglee’s Blog (http://www.cnblogs.com/Kinglee/)
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [翻译：ASP.NET MVC 教程]创建自定义路由
- [翻译：ASP.NET MVC 教程]创建自定义路由约束
- [转]自定义ASP.NET MVC Html辅助方法
- [转载]自定义ASP.NET MVC Html辅助方法 TagBuilder
- [翻译:ASP.NET MVC 教程]用ASP.NET MVC 创建一个电影数据库应用程序
- 转：自定义ASP.NET MVC Html辅助方法
- Asp.Net MVC 视图(创建自定义HTML Helpers)
- 【EntityFramework系列教程一，翻译】为ASP.NET MVC创建一个数据模型
- Asp.Net MVC 视图(创建自定义HTML Helpers) - Part.2
- [翻译：ASP.NET MVC 教程]创建路由约束
- [翻译：ASP.NET MVC 教程]创建一个控制器
- [翻译] ASP.NET MVC Tip #2 - 创建可以返回Excel文档的自定义ActionResult
- Asp.net mvc 创建自定义HTML Helper
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建
- 【EntityFramework系列教程四，翻译】为ASP.NET MVC程序创建更为复杂的数据模型
- [翻译：ASP.NET MVC 教程]创建路由约束
- [翻译：ASP.NET MVC 教程]创建一个动作
- 自定义ASP.NET MVC Html辅助方法
- [翻译:ASP.NET MVC 教程]用ASP.NET MVC 创建一个电影数据库应用程序——补充
- 自定义ASP.NET MVC Html辅助方法