ASP.NET MVC HtmlHelper用法集锦

在写一个编辑数据的页面时，我们通常会写如下代码：

<inputtype="text" value='<%=ViewData["title"] %>' name="title"/> ，我们思考，对于这种代码我们是不是也可以用一个Helper来自动绑定数据呢 。

这当然是可以的，ASP.NET MVC提供了一个HtmlHelper用于生成有数据绑定的Html标签。

1.ActionLink

其中最常用的就是Html.ActionLink 1.1基本的使用方式

1: <%=Html.ActionLink("这是一个连接", "Index", "Home")%> 在UrlRouting规则为默认规则的情况下，它生成的HTML代码为 ：<a href="/">这是一个连接</a>

ActionLink中的三个参数分别为 显示的文字  Action   Controller

其中Controller可以省略，省略时指向同一Controller下的Action。

ActionLink中QueryString与Html属性设置

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

其生成结果为：

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

注意，如果连接中不涉及到action及controller就没有必要使用ActionLink,而是直接写HTML代码就可以了，例如

1: <a href="#1">一章</a>

2:<a href="javascript:void(0)"onclick="delete();">删除</a>

ActionLink方法定义

public string ActionLink(string linkText, string actionName)

public string ActionLink(string linkText, string actionName, object values)

public string ActionLink(string linkText, string actionName, RouteValueDictionary valuesDictionary)

public string ActionLink(string linkText, string actionName, string controllerName) 

public string ActionLink(string linkText, string actionName, string controllerName, object values) 

public string ActionLink(string linkText, string actionName, string controllerName, RouteValueDictionary valuesDictionary)

2.RouteLink

2.1 RouteLink与ActionLink

RouteLink与ActionLink相差无几，只是它的地址是由Route生成拿上面的例子

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

来说，如果用RouteLink来写就是

1: <%=Html.RouteLink("这是一个连接", new { controller="Home",action="Index"})%>

结果是： <a href="/Home">这是一个连接</a>

而带上QueryString以及Html属性的ActionLink

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

就可以这样来写

1: <%=Html.RouteLink("这是一个连接", new { action = "index", page = 1 }, new { id="link1"})%>

其实就是用一个新建立的RouteValueDictionary的对象（new{}所实例化的对象将会等价转换为RouteValueDictionary）来替原来的Action,Controller字符串的单独指定。

2RouteLink使用Route规则

除了这些协同的用法，RouteLink还支持使用Route规则名来创建连接

例如我们在Global.asax文件中添加一个Route规则

routes.MapRoute( "about",//这是规则名

　　　　　　　　　　"about",//url

　　　　　　　　　　new {controller = "Home", action = "about"}  );  

那么我们就可以使用这个Route规则

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

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

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

来生成如下的HTML：

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

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

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

3.表单

很多情况下是要生成表单元素的，正如文章开始所述，修改一个内容的情况下，我们可能要将数据与表单绑定。

3.1生成Form

我们当然可以使用纯的Html代码或UrlHelper来生成一个Form。 如

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

<form action="<%=Url.Action("Index","Home")%>" method="post"> </form>

Url.Action说明：

UrlHelper::Action Method (String, String, Object)

String^ Action(
    String^ actionName,
    String^ controllerName,
    Object^ routeValues
)

例子：<a href="<%=Url.Action("CompanyInfo", "Company", new { stockId = "11111",aa="bbb" })%>" >查询</a>

但是因为是在HTML的属性中，所以还是难以维护，幸好ASP.NET MVC为我们提供了一个Helper，我们可以通过以下两种方式生成一个Form：

方法1：

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

表单内容

<%} %>

方法二：

<%Html.BeginForm("index", "home", FormMethod.Post, new { enctype = "multipart/form-data" });%>

表单内容 

<%Html.EndForm(); %>

public static MvcForm BeginForm(
    string actionName,
    string controllerName,
    FormMethod method,Object htmlAttributes
 )

public enum FormMethod{
       Get,
       Post
}

方法三：

<%Html.BeginForm(new { controller="Home", action="PostForm"} );%> //注意这里没有=输出

表单内容 

<%Html.EndForm(); %>

3.2表单元素

ASP.NET MVC提供了多种表单元素的Helper。

其中包括：TextBox(类似input type=text，下面类似)、TextArea、DropDownList（select）、CheckBoxHidden、ListBox、Password、RadionButton。

注意：因为<input type=”submit” />一般情况下是不会绑定数据的，所以ASP.NET MVC并未提供此Helper（曾经提供过在preview2之前）。

如果我们想提供一个input type=text 它的name为t1则以下代码： <%=Html.TextBox("t1") %>

3.3表单元素绑定

如果我们想要让上文中的t1初始时就有一个值，比如 “重典”那么我们可以按以下方式

<%=Html.TextBox("t1","重典") %>

如果数据是从数据库中读取，即得到数据是从Action中获取的，那么我们可以在Action中使用ViewData传递

Action：ViewData["name"]="重典";

View： <%=Html.TextBox("t1",ViewData["name"]) %>

以上方法看似简单，其实ASP.NET MVC为我们提供了更为简便的绑定方式---只要保证ViewData的Key与Helper所生成元素的name保持一致就可以自动绑定：

Action：  ViewData["t1"]="重典";

View： <%=Html.TextBox("t1") %>

这样就可以自动绑定了

 

3.4 列表数据显示与绑定

像TextBox这种值单一的数据比较容易，但是存在的数据比较多的DropDownList或ListBox应该怎么绑定数据及初始化值呢，我们来看看下面的例子：

Action：ViewData["sel1"] = new SelectList( new[] {1, 2, 3} , 3 );

View： <%=Html.DropDownList("sel1")%>

//使用列表的指定项和选定的值来初始化 System.Web.Mvc.SelectList 类的新实例。
public SelectList(IEnumerable items, object selectedValue);

这样就可以将列表内容、默认值、以及表单元素三者绑定在一起了。

而我们的列表内容并不是任何情况下都是数组的，大多情况下还是Key-Value对居多。

我们可以使用以下方式：

List<SelectListItem> list = new List<SelectListItem>
{
　　 new SelectListItem {Text = "重典", Value = "1"},
　　 new SelectListItem {Text = "
4000
邹健", Value = "23", Selected=true},
new SelectListItem {Text = "邹健erre", Value = "3"}
};
ViewData["sel1"] = list; 

// 摘要:
//     表示 System.Web.Mvc.SelectList 类的实例中的选定项。
public class SelectListItem
{
// 摘要:
//     初始化 System.Web.Mvc.SelectListItem 类的新实例。
public SelectListItem();

// 摘要:
//     获取或设置一个值，该值指示是否选择此 System.Web.Mvc.SelectListItem。
//
// 返回结果:
//     如果选定此项，则为 true；否则为 false。
public bool Selected { get; set; }
//
// 摘要:
//     获取或设置选定项的文本。
//
// 返回结果:
//     文本。
public string Text { get; set; }
//
// 摘要:
//     获取或设置选定项的值。
//
// 返回结果:
//     值。
public string Value { get; set; }
}

3.5TextBox , Hidden:

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

 生成结果： 

<input id="input3" name="input3" style="width:300px;" type="text" value="重典Hello World343344" />

3.6.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>

‍

3.7.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" />

3.7.‍ListBox

<%=Html.ListBox("sel1",(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>

3.9.Hidden

<%=Html.Hidden("Hello")%>‍

ViewData["Hello"] = "Hello邹健";

生成结果：

<input id="Hello" name="Hello" type="hidden" value="Hello邹健" />‍
http://www.cnblogs.com/duguqing40/archive/2012/09/19/2694386.html