Asp.net MVC HtmlHelper类 @html 用法

MVC的HtmlHelper类，在页面呈现Html控件，挺好玩的，不过有些我觉得也没啥用，呵呵 了解一下先~~~~~~~~

Html.ActionLink 生成一个特定的控制器行为连接

<%:Html.ActionLink("Edit", "Edit", "Book", new { id = 1}, new { @class = "BookDetail" })%> 具体说明：

Edit，为linkText，具体而言就是显示的字符串

Edit，对应为ActionName；

Book，为Controller；

new { id = 1}，

new { @class = “BookDetail” }，则为元素添加了tag要素

效果：<a class="BookDetail" href="/Book/Edit/1">Edit</a>

Html.CheckBox 生成checkBox

<%:Html.CheckBox("a") %>

效果：<input id="a" name="a" type="checkbox" value="true" />

Html.DropDownList 生成

<%

List<SelectListItem> items = new List<SelectListItem>();

items.Add( new SelectListItem { Text = "AAA", Value = "1" });

items.Add(new SelectListItem { Text = "BBB", Value = "2", Selected = true });

items.Add(new SelectListItem { Text = "CCC", Value = "3" });

ViewData["ListItems"] = items;

%>

<%:Html.DropDownList("ListItems") %>

效果:<select id="ListItems" name="ListItems">

<option value="1">AAA</option>

<option selected="selected" value="2">BBB</option>

<option value="3">CCC</option>

</select>

Html.Hidden 生成表单隐藏字段

<%:Html.Hidden("Type", 1) %>

效果:<input id="Type" name="Type" type="hidden" value="1" />

Html.ListBox 基于列键值对生成下拉框

<%= Html.ListBox("optionsList",

new[] { new SelectListItem { Text = "Option 1", Value = "opt1" },

new SelectListItem { Text = "Option 2", Value = "opt2" }, DropDownList

new SelectListItem { Text = "Option 3", Value = "opt3" }

}, "Choose an option"

) %>

效果:<select Length="16" id="optionsList" multiple="multiple" name="optionsList"><option

value="opt1">Option 1</option>

<option value="opt2">Option 2</option>

<option value="opt3">Option 3</option>

</select>

Html.RadioButton 可选按钮

<%:Html.RadioButton("Name","value") %>

效果:<input id="Name" name="Name" type="radio" value="value" />

Html.TextBox 生成文本框

<%:Html.TextBox("Name", "")%>

效果:<input id="Name" name="Name" type="text" value="" />

Password 呈现一个密码类型文本框

BeginForm 呈现一个form区域开始

EndForm 呈现一个form区域结束

RenderAction 呈现一个控制器行为方法

RenderPartial 由另一个视图引擎可选的呈现部分视图

RenderUserControl 呈现用户控件

RouteLink 生成特定的路由连接

SubmitButton 呈现一个类似按钮提交表单字段

SubmitImage 呈现一个类似图像提交表单字段

TextArea 呈现一个文本域

ValidationMessage 为特定的ViewData呈现一个验证信息

ValidationSummary 呈现一个ViewData的验证摘要。

HTML扩展类的所有方法都有2个参数：

以textbox为例子

public static string TextBox( this HtmlHelper htmlHelper, string name, Object value, IDictionary<string, Object> htmlAttributes )

public static string TextBox( this HtmlHelper htmlHelper, string name, Object value, Object htmlAttributes )

这2个参数代表这个html标签的属性集合。使用方法如下。

1.ActionLink

<%=Html.ActionLink("这是一个连接", "Index", "Home")%>

带有QueryString的写法

<%=Html.ActionLink("这是一个连接", "Index", "Home", new { page=1 },null)%>

<%=Html.ActionLink("这是一个连接", "Index", new { page=1 })%>

有其它Html属性的写法

<%=Html.ActionLink("这是一个连接", "Index", "Home", new { id="link1" })%>

<%=Html.ActionLink("这是一个连接", "Index",null, new { id="link1" })%>

QueryString与Html属性同时存在

<%=Html.ActionLink("这是一个连接", "Index", "Home", new { page = 1 }, new { id = "link1" })%> <%=Html.ActionLink("这是一个连接", "Index" , new { page = 1 }, new { id = "link1" })%>

生成结果为：

<a href="/">这是一个连接</a>

带有QueryString的写法

<a href="/?page=1">这是一个连接</a>

<a href="/?page=1">这是一个连接</a>

有其它Html属性的写法

<a href="/?Length=4" id="link1">这是一个连接</a>

<a href="/" id="link1">这是一个连接</a>

QueryString与Html属性同时存在

<a href="/?page=1" id="link1">这是一个连接</a>

<a href="/?page=1" id="link1">这是一个连接</a>

2.RouteLink

跟ActionLink在功能上一样。

<%=Html.RouteLink("关于", "about", new { })%>

带QueryString

<%=Html.RouteLink("关于", "about", new { page = 1 })%>

<%=Html.RouteLink("关于", "about", new { page = 1 }, new { id = "link1" })%>

生成结果：

<a href="/about">关于</a>

<a href="/about?page=1">关于</a>

<a href="/about?page=1" id="link1">关于</a>

3.Form 2种方法

<%using(Html.BeginForm("index","home",FormMethod.Post)){%>

<%} %>

<%Html.BeginForm("index", "home", FormMethod.Post);//注意这里没有=输出%>

<%Html.EndForm(); %>

生成结果：

<form action="/home/index" method="post"></form>

4.TextBox , Hidden ,

<%=Html.TextBox("input1") %>

<%=Html.TextBox("input2",Model.CategoryName,new{ @style = "300px;" }) %> <%=Html.TextBox("input3", ViewData["Name"],new{ @style = "300px;" }) %>

<%=Html.TextBoxFor(a => a.CategoryName, new { @style = "300px;" })%>

生成结果：

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

<input id="input2" name="input2" style="300px;" type="text" value="Beverages" /> <input id="input3" name="input3" style="300px;" type="text" value="" />

<input id="CategoryName" name="CategoryName" style="300px;" type="text" value="Beverages" />

5.TextArea

<%=Html.TextArea("input5", Model.CategoryName, 3, 9,null)%>

<%=Html.TextAreaFor(a => a.CategoryName, 3, 3, null)%>

生成结果：

<textarea cols="9" id="input5" name="input5" rows="3">Beverages</textarea>

<textarea cols="3" id="CategoryName" name="CategoryName" rows="3">Beverages</textarea>

6.CheckBox

<%=Html.CheckBox("chk1",true) %>

<%=Html.CheckBox("chk1", new { @class="checkBox"}) %>

<%=Html.CheckBoxFor(a =>a.IsVaild, new { @class = "checkBox" })%>

生成结果：

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

<input class="checkBox" id="chk1" name="chk1" type="checkbox" value="true" /><input name="chk1" type="hidden" value="false" />

<input checked="checked" class="checkBox" id="IsVaild" name="IsVaild" type="checkbox" value="true" /><input name="IsVaild" type="hidden" value="false" />

7.ListBox

<%=Html.ListBox("lstBox1",(SelectList)ViewData["Categories"])%>

<%=Html.ListBoxFor(a => a.CategoryName, (SelectList)ViewData["Categories"])%>

生成结果：

<select id="lstBox1" multiple="multiple" name="lstBox1">

<option value="1">Beverages</option>

<option value="2">Condiments</option>

<option selected="selected" value="3">Confections</option>

<option value="4">Dairy Products</option>

<option value="5">Grains/Cereals</option>

<option value="6">Meat/Poultry</option>

<option value="7">Produce</option>

<option value="8">Seafood</option>

</select>

<select id="CategoryName" multiple="multiple" name="CategoryName">

<option value="1">Beverages</option>

<option value="2">Condiments</option>

<option value="3">Confections</option>

<option value="4">Dairy Products</option>

<option value="5">Grains/Cereals</option>

<option value="6">Meat/Poultry</option>

<option value="7">Produce</option>

<option value="8">Seafood</option>

</select>

8.DropDownList

<%= Html.DropDownList("ddl1", (SelectList)ViewData["Categories"], "--Select One--")%>

<%=Html.DropDownListFor(a => a.CategoryName, (SelectList)ViewData["Categories"], "--Select One--", new { @class = "dropdownlist" })%>

生成结果：

<select id="ddl1" name="ddl1">

<option value="">--Select One--</option>

<option value="1">Beverages</option>

<option value="2">Condiments</option>

<option selected="selected" value="3">Confections</option>

<option value="4">Dairy Products</option>

<option value="5">Grains/Cereals</option>

<option value="6">Meat/Poultry</option>

<option value="7">Produce</option>

<option value="8">Seafood</option>

</select>

<select class="dropdownlist" id="CategoryName" name="CategoryName">

<option value="">--Select One--</option>

<option value="1">Beverages</option>

<option value="2">Condiments</option>

<option value="3">Confections</option>

<option value="4">Dairy Products</option>

<option value="5">Grains/Cereals</option>

<option value="6">Meat/Poultry</option>

<option value="7">Produce</option>

<option value="8">Seafood</option>

</select>

9.Partial 视图模板

webform里叫自定义控件。功能都是为了复用。但使用上自定义控件真的很难用好。 <% Html.RenderPartial("DinnerForm"); %> 看清楚了没有等号的

HtmlHelper类的辅助和扩展方法：

(1)ActionLink 生成一个特定的控制器行为连接

<%=Html.ActionLink("Edit", "Edit", "Book", new { id = Model.ID }, new { @class = "BookDetail"})%>

具体说明：

Edit，为linkText，具体而言就是显示的字符串

Edit，对应为ActionName；

Book，为Controller；

new { id = Model.ID }，为生成元素的id定义；

new { @class = “BookDetail” }，则为元素添加了tag要素

(2)AntiForgeryToken 生成一个隐藏的表单字段，可与ValidateAntiForgeryToken属性一起使用以确保Request没有被修改

具体说明：

如果你要保护你的应用程序的多个形式的相互独立,AntiForgeryToken 将生成不同的防伪标志

<%= Html.AntiForgeryToken("someArbitraryString") %>

[ValidateAntiForgeryToken(Salt="someArbitraryString")]

public ViewResult SubmitUpdate()

{

// ... etc

}

(3)AttributeEncode 数据属性编码 :提供了HtmlAttributeEncode功能

具体说明：

<%= Html.AttributeEncode(Url.Action("Login")) %>

(4)DropDownList 基于一对键值对生成DropDownList 具体说明： Html.DropDownList( string name, IEnumerable<SelectListItem> selectList, string optionLabel, object htmlAttributes) name：选择元素的名称，绑定到元素视图的模型属性 selectList：选项列表， optionLabel：类似与“Select …” 可选的默认的标签 htmlAttributes：可添加的属性 使用方法 代码 List<SelectListItem> items = new List<SelectListItem>();

items.Add( new SelectListItem { Text = "Swimming", Value = "1" }); items.Add(new SelectListItem { Text = "Cycling", Value = "2", Selected = true });

items.Add(new SelectListItem { Text = "Running", Value = "3" }); ViewData["ListItems"] = items;

<%= Html.DropDownList("ListItems") %>

(5)Encode 编码字符串，以防跨站脚本攻击

使用方法

< %=Html.Encode("< script src="j . JS">< div background='javascript:alert('');'/>")%>

编码结果

&lt;script src=&quot;j . JS&quot;&gt;&lt;/script&gt;&lt;div background='javascript:alert('');'/&gt;

(6)Hidden 生成表单隐藏字段

<%= Html.Hidden("SearchType", 1) %>

前台源代码：

<input id="SearchType" name="SearchType" type="hidden" value="1" />

(7)ListBox 基于列键值对生成下拉框 使用方法： 代码 <%= Html.ListBox(

"optionsList",

new []

{

new SelectListItem

{

Text = "Option 1",

Value = "opt1"

},

new SelectListItem

{

Text = "Option 2",

Value = "opt2"

},

new SelectListItem

{

Text = "Option 3",

Value = "opt3"

}

},

"Choose an option"

) %>

前台源代码：

<select Length="16" id="optionsList" multiple="multiple" name="optionsList"> <option value="opt1">Option 1</option>

<option value="opt2">Option 2</option>

<option value="opt3">Option 3</option>

</select>

(8)Pasword 生成表单密码字段

使用方法：

<%= Html.Password("password", ViewData["password"]) %>

(9)TextBox 生成文本框

使用方法：

<%=Html.TextBox("Name", Model.Contact.Name)%>

前台源代码：

<input id="Name" name="Name" type="text" value="Alan" / >

(10)Button 生成一个按钮

最新发布2.0.0.0MVC的已经没有了

(11)CheckBox 生成checkBox

使用方法：

<%= Html.CheckBox("a") %>

前台源代码：

<input id="a" name="a" type="checkbox" />

(12)BeginForm 生成的HTML表单

使用方法：

<% using (Html.BeginForm(Model.PostAction, "Home", FormMethod.Post))

{ %>

前台源代码：

<form action="/Home/Post" method="post">

(13)Image 生成图像标签

引用一张图片

<%=Html.Image("~/Images/bigwave.jpg") %><br />

设置名称与宽度

<%=Html.Image("~/Images/bigwave.jpg", "myWave", new { width = "30px" })%><br />

(14)Mailto 生成Email连接

Simple Email:

<%=Html.MailTo("mailto:weflytotti@163.com%22,%22Email Me!") %>

With Subject and Body

<%=Html.MailTo("mailto:weflytotti@163.com%22,%22Email Me!","Sending you a note" ,"Hey - wanted to say hi!") %>

(15)RadioButton 可选按钮

<%=Html.RadioButton("Name","value") %>

RenderAction 呈现一个控制器行为方法

RenderPartial 由另一个视图引擎可选的呈现部分视图

RenderUserControl 呈现用户控件

RouteLink 生成特定的路由连接

SubmitButton 呈现一个类似按钮提交表单字段

SubmitImage 呈现一个类似图像提交表单字段 TextArea 呈现一个文本域

ValidationMessage 为特定的ViewData呈现一个验证信息

ValidationSummary 呈现一个ViewData的验证摘要。

现有的HTML辅助方法

ASP.NET MVC 1中发布了一套HTML辅助方法，可以用来在视图模板中帮助生成HTML界面。例如，要输出一个文本框，你可以在你的.aspx视图模板中使用Html.TextBox()辅助方法编写下列代码：

上面辅助方法的第一个参数提供了文本框的名称及id，第二个参数指定了它该有的值，然后上面的辅助方法会显示象下面这样的HTML到浏览器：

<input id="ProductName" type="text" value="Anissed Syrup" />

新的强类型HTML辅助方法

大家对ASP.NET MVC 2要求的一个常用特性是，要我们支持强类型的HTML辅助方法，这样的辅助方法使用 lambda 表达式来引用传到视图模板中的模型或视图模型。这可以促成更好的编译时视图检查（可以在编译时发现缺陷，而不是在运行时），还可以促成视图模板中更好的代码intellisense支持。

新的强类型HTML辅助方法现在已经内置于ASP.NET MVC 2中了，这些方法使用"Html.HelperNameFor()”的命名规范。例如，Html.TextBoxFor(), Html.CheckBoxFor(),

Html.TextAreaFor()等等。它们支持使用lambda表达式来指定元素的名称和id，以及要显示的值。

例如，除了上面的Html.TextBox()辅助方法外，使用ASP.NET MVC 2，我们现在还可以使用新的Html.TextBoxFor()辅助方法：

注意上面，我们不再需要指定 “ProductName” 字符串参数，lambda表达式是相当灵活的，除了值以外，我们还可以获取我们模型对象中的属性/字段的名称。

因为这些HTML辅助方法是强类型的，编写lambda表达式时我们还可以在Visual Studio中得到完整的intellisense支持：

显示的HTML跟前面的后期绑定的HTML辅助方法版本的输出是一样的：

<input id="ProductName" type="text" value="Aniseed Syrup" />

内置于ASP.NET MVC 2中的强类型HTML辅助方法列表

ASP.NET MVC 2对下列强类型的HTML辅助方法提供内置支持：

HTML元素辅助方法:

Html.TextBoxFor()

Html.TextAreaFor()

Html.DropDownListFor()

Html.CheckboxFor()

Html.RadioButtonFor()

Html.ListBoxFor()

Html.PasswordFor()

Html.HiddenFor()

Html.LabelFor()

其他辅助方法:

Html.EditorFor()

Html.DisplayFor()

Html.DisplayTextFor()

Html.ValidationMessageFor()

我会在本系列的后期贴子中讨论ASP.NET MVC 2中改进了的“自动脚手架

（auto-scaffold）"功能时，对新的Html.EditorFor() 和 Html.DisplayFor()辅助方法做进一步介绍。在本系列的下一个博客贴子中讨论ASP.NET MVC 2中改进了的验证支持时，我们还将使用Html.ValidationMessageFor()辅助方法。

Scaffolding中的强类型HTML辅助方法

VS 2008 和 VS 2010两者在用“添加视图”命令“生成（scaffolding）”新的强类型视图模板时，现在都会默认使用新的强类型HTML辅助方法。

例如，假设我们有一个象下面这样的简单 “ProductsController” 类，有一个“Edit” action方法，会为“Product”模型类显示一个编辑表单：

我们可以使用Visual Studio在Edit action方法中右击，选择“添加视图”上下文菜单命令来创建一个视图模板，我们将选择创建一个“Edit”模板，该模板是使用Product对象来生成的(scaffolded)：

在ASP.NET MVC 2中，默认生成的视图模板现在使用了新的强类型HTML辅助方法来引用Product模型对象

结语

包含在ASP.NET MVC 2中的强类型HTML辅助方法提供了一个很好的方式来在视图模板中得到更好的类型安全。这促成了对你的视图的更好的编译时检查（允许你在编译时，而不是运行时发现错误），还在Visual Studio中编辑视图模板时支持更丰富的intellisense。 扩展ASP.NET MVC的HtmlHelper

里面提供了如下一组标准的HtmlHelper： ?

?Html.ActionLink Html.AntiForgeryToken Html.AttributeEncode Html.BeginForm Html.BeginRouteForm Html.CheckBox Html.DropDownList Html.Encode Html.EndForm Html.Equals Html.GetHashCode Html.GetType Html.Hidden Html.ListBox Html.Password Html.RadioButton Html.RenderPartial Html.RouteCollection Html.RouteLink Html.TextArea Html.TextBox Html.ToString Html.ValidationMessage Html.ValidationSummary Html.ViewContext Html.ViewData Html.ViewDataContainer

它们分布在下面这些文件里：

FormExtensions.cs

InputExtensions.cs

LinkExtensions.cs

MvcForm.cs

SelectExtensions.cs

TextAreaExtensions.cs

ValidationExtensions.cs

随着工程的推进，需求的上升，很快便会发现这些方法是不够用的。因此我们需要对其进行扩充，扩充的方式很简单，我们创建一个HelpersTestExtensions.cs文件，内容如下： using System; 1

2 using System.Collections.Generic;

3 using System.Linq;

4 using System.Web;

5 using System.Web.Mvc;

6

7 namespace MvcApplication1.Helper

8 {

9 public static class TestExtensions

10 {

11

12 public static string Type(this HtmlHelper helper ,int i)

13 {

14 switch (i)

15 {

16 case 1: return String.Format("分类一");

17 case 2: return String.Format("分类二");

18 default: return String.Format("未知");

19 }

20 }

21

22 }

23 }

然后在View (aspx)文件里导入命名空间

<%@ Import Namespace="MvcApplication1.Helper" %>

然后Visual Studio的智能感知就能够提示该方法了，我们就可以像使用默认提供的方法一样使用我们新添加的方法。

1 <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"

Inherits="System.Web.Mvc.ViewPage<ienumerable<mvcApplication1.Models.Test2

>>" %>

3

<%@ Import Namespace="MvcApplication1.Helper" %>

4

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent"

5 runat="server"> 6 Home Page

7 </asp:Content> 8

9 <asp:Content

runat="server"> ID="indexContent" ContentPlaceHolderID="MainContent" 1

0 <h2>TestExtensions</h2> 1

1 <table> <tr>

1

2 <th></th>

<th>

1

3 Id 1 </th> 4 <th>

Title 1

5 </th> 1

6 <th>

Description 1

7 </th> 1 <th> 8 Type

1

9 </th> </tr>

2

<% foreach (var item in Model) { %>

2

1

2 <tr>

2 <td>

<%= Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey 2

3 */ }) %> |

<%= Html.ActionLink("Details", "Details", new { /* 2

4 id=item.PrimaryKey */ })%>

</td> 2

5 <td>

2

6 <%= Html.Encode(item.Id) %>

</td>

2

7 <td>

2 <%= Html.Encode(item.Title) %>

8 </td>

<td> 2

9 <%= Html.Encode(item.Description) %>

3 </td>

0 <td> 3

1 <%= Html.Type(item.Type.Value) %>

3

2

</td> 3

3 </tr> 3

4 <% } %>

3

5 </table> 3

6 </asp:Content>

3

7

3

8

3

9

4

4

1

42 43 44 45 46 47 48 49 50 51 52