创建自定义的HTML Helper

Creating Custom HTML Helpers

The goal of this tutorial is to demonstrate how you can create custom HTML Helpers that you can use within your MVC views. By taking advantage of HTML Helpers, you can reduce the amount of tedious typing of HTML tags that you must perform to create a standard HTML page.

In the first part of this tutorial, I describe some of the existing HTML Helpers included with the ASP.NET MVC framework. Next, I describe two methods of creating custom HTML Helpers: I explain how to create custom HTML Helpers by creating a static method and by creating an extension method.

　　这篇教程的目的是演示如何创建在MVC视图中使用的自定义HTML Helper。通过利用HTML Helpers，你可以减少大量HTML标签的输入，你必须输入这些标签来创建标准的HTML页面。

　　在这篇教程的第一部分，我描述了一些在ASP.NET MVC中中已经存在的HTML Helper。接下来，我描述了两种创建自定义HTML Helpers的方法：我将演示如何通过创建静态方法和创建扩展方法来创建自定义HTML Helpers。

Understanding HTML Helpers

An HTML Helper is just a method that returns a string. The string can represent any type of content that you want. For example, you can use HTML Helpers to render standard HTML tags like HTML <input> and <img> tags. You also can use HTML Helpers to render more complex content such as a tab strip or an HTML table of database data.

The ASP.NET MVC framework includes the following set of standard HTML Helpers (this is not a complete list):

• Html.ActionLink()
• Html.BeginForm()
• Html.CheckBox()
• Html.DropDownList()
• Html.EndForm()
• Html.Hidden()
• Html.ListBox()
• Html.Password()
• Html.RadioButton()
• Html.TextArea()
• Html.TextBox()

For example, consider the form in Listing 1. This form is rendered with the help of two of the standard HTML Helpers (see Figure 1). This form uses the Html.BeginForm() and Html.TextBox() Helper methods to render a simple HTML form.

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

ASP.NET MVC框架包含了一系列以下标准的HTML Helpers（这里不是全部的）：省略……

例如，考虑代码清单1中的表单。这个表单是在两个标准的HTML Helpers的帮助下呈现的。这个表单使用了Html.BeginForm()和Html.TextBox()Helper方法来呈现一个简单的HTML表单。

Figure 01: Page rendered with HTML Helpers (Click to view full-size image)