004.ASP.NET MVC中的HTML Helpers

浏览数：23 / 时间：2015年06月09日

原文链接：http://www.codeproject.com/Articles/794579/ASP-NET-MVC-HTML-Helpers-A-MUST-KNOW

1.什么是HTML Helpers

　　想像HTML Helpers的方法返回一个字符串，是的，它返回的字符串是带有HTML标签的字符串。比如一个img标签、一个a标签，等其它的标签。

　　有ASP.NET开发经验的人开发人员能使用HTML Helpers用于Web Form服务器控件的编写，因为它们两有一个共同的目标。但是HTML Helpers更加轻量级，因为它没有视图状态和事件模型，单独使用HTML Helpers，我们可以建立自定义的helpers的方法。

2.HTML Helpers的标准

　　对于ASP.NET MVC开发人员，理解HTML Helpers是十分可取的。

　　标准的HTML Helpers能分类成下面两种:

　　　　a. URL Heplers = HTML Links + Image Links

　　　　b. HTML Form Elements

3.MVC URL Helpers

　　在MVC中提供链接是必需的，有两种类型可用：HTML Links和Image Links，我们分别来讨论它们.

　　a. HTML Links

　　Html.ActionLink() 帮助方法用于在一个视图中返回HTML Link，该方法可以链接到一个控制器的方法到视图中.

1 @Html.ActionLink(“显示的文本”,”actionName”)

　　上面的方法是Html.ActionLink的一个重载，可以返回一个<a>标签，链接到控制器的actionName方法

1 <a href=”/ControllerName/actionName”>显示的文本</a>

　　b. Image Links

　　Url.Action()帮助方法可了返回一个Image链接

1 <a href=”@Url.Action(“ViewDetails”)”><img src=”./logo.jpg” alt=”View Details” /></a>

　　注意：尽管Image Link做了同样的事情，链接到一个控制器的ViewDetails方法，但是如果使用Html.ActionLink方法就不能包含一个img标签

4.MVC HTML Form Element

　　为了返回HTML中各种元素的标签，MVC为我提供下以下一些HTML帮助方法

@Html.TextBox("strStudentName") renders:

<input id="strStudentName" name="strStudentName" type="text" value="" />

@Html.TextArea("strAcademicBackground", "", 10, 50, null) renders:

<textarea cols="50" id="strAcademicBackground" name="strAcademicBackground" rows="10">

@Html.Password("strPassword") renders:

<input id="strPassword" name="strPassword" type="password" />

@Html.RadioButton("radGender", "Male", true) renders:

<input checked="checked" id="radGender" name="radGender" type="radio" value="Male" />

@Html.CheckBox("chkDuesPaid", true) renders:

<input checked="checked" id="chkDuesPaid" name="chkDuesPaid" type="checkbox" value="true" />
<input name="chkDuesPaid" type="hidden" value="false" />

@Html.DropDownList ("ddlLevel", new SelectList(new [] {"1st Grade", "2nd Grade", "3rd Grade"})) renders:

<select id="ddlLevel" name="ddlLevel">
     <option>1st Grade</option>
     <option>2nd Grade</option>
     <option>3rd Grade</option>
</select>