- 准备工作
- 链接
- input控件
- 列表框
- 添加属性
- 结尾
HtmlHelper简介
在ASP.NET MVC5的View页面中，HtmlHelper被用来输出HTML代码。更官方点的描述，System.Web.Mvc.HtmlHelper对象，该对象用于呈现HTML元素。如下图所示。
HtmlHelper中的每一个函数都对应生成一种标签，后面会逐一详细介绍给大家。
很多人会问为什么要用HtmlHelper而不直接写html？
我觉得有下面几个原因：
- 直接写HTML的话如果语句有语法错误，如缺少结尾标记</b>，编译器不会报错，出来的页面可能会很乱且难以查出错误在哪。如果用HtmlHelper在编译的时候就会指出错误，可以及时修改。
- View中的页面一般都是动态页面，也就是说如果没有HtmlHelper，我们经常会写如<input type="text" value="@id">这样的服务器端代码和HTML代码的混合代码。这样写不仅形式混乱、执行顺序不好判断，而且出错也不容易发现，不如全部用HtmlHelper写成服务器端代码。而且用HtmlHelper做数据绑定更方便。
- HtmlHelper和HTML语言的关系，我觉得跟Linq和SQL语言的关系差不多。就是说微软给你提供了一种方式让你在不熟悉HTML或SQL这种非.NET语言的时候，使用.NET框架内的与之等价的类来帮助你更好的解决问题。
准备工作
为了更好的演示HtmlHelper，我们在项目中新建一个默认Controller和默认Action。
在解决方案资源管理器中右键点击Controllers文件夹选择添加->控制器。在弹出的窗口中选择MVC 5 控制器 - 空，点确定。输入默认控制器名，DefaultControllerController。将下面代码写入DefaultControllerController.cs文件。
using System.Web.Mvc; namespace SlarkInc.Controllers { public class DefaultControllerController : Controller { // // GET: /DefaultController/ public ActionResult DefaultAction() { return View(); } } }
从上面代码可以看出在名为DefaultController的Controller中我们创建了一个名为DefaultAction的的Action。
然后我们来创建对应的View。在Views文件夹下的DefaultController文件夹里删除已有的View添加一个名为DefaultAction的View。打开这个DefaultAction.cshtml文件，删除掉所有代码。这样我们的准备工作就完成了。下面开始添加HtmlHelper代码。
链接
ActionLink
ActionLink用来生成HTML中的<a>标签，在页面中生成一个超链接下面给出ActionLink的三个常用重载：
@Html.ActionLink("LinkText", "ActionName") @Html.ActionLink("LinkText", "ActionName", "ControllerName") @Html.ActionLink("LinkText", "ActionName", new { id = 1 })
点击在浏览器中查看。运行结果：
<a href="/DefaultController/ActionName">LinkText</a> <a href="/ControllerName/ActionName">LinkText</a> <a href="/DefaultController/ActionName/1">LinkText</a>
LinkText是链接显示出的文字，如果ActionLink的参数中给出Controller则链接指向对应的Controller下的Action。如果没有给出Controller则指向当前页面对应的Controller下的Action。如果ActionLink的参数中给出要传递的参数，如id，则在链接的最后写出id值。
RouteLink
RouteLink同样是用来生成HTML中的<a>标签的，但是其参数和ActionLink不同。我们这里给出能实现上面三行HTML代码的RouteLink代码：
@Html.RouteLink("LinkText", new { action = "ActionName" }) @Html.RouteLink("LinkText", new { action = "ActionName", controller = "ControllerName" }) @Html.RouteLink("LinkText", new { action = "ActionName", id = 1 })
从上面代码可以看出LinkText依然是链接显示的文字，而链接的其他信息则包含在RouteLink的第二个参数中。这个参数是个Object，它的action属性表示指向的Action而controller属性表示指向的Controller。如果没有controller属性则指向当前Controller。id属性则为要传递的参数。
Input控件
TextBox
TextBox用来生成HTML中的<input type="text">标签，常用重载有下面两种：
@Html.TextBox("NameId") @Html.TextBox("NameId","Value")
生成标签如下：
<input id="NameId" name="NameId" type="text" value="" /> <input id="NameId" name="NameId" type="text" value="Value" />
可见TextBox的第一个参数被赋值给input标签的id和name属性，如果没有value参数则value为空，如果有则赋值给value属性。
Hidden
Hidden用来在页面中写入<input type="hidden">标签，其用法和TextBox类似。代码如下：
@Html.Hidden("NameId") @Html.Hidden("NameId", "Value")
结果如下：
<input id="NameId" name="NameId" type="hidden" value="" /> <input id="NameId" name="NameId" type="hidden" value="Value" />
Password
Password用来写入<input type="password">标签，其用法和TextBox类似。代码如下：
@Html.Password("NameId") @Html.Password("NameId", "Value")
结果如下：
<input id="NameId" name="NameId" type="password" value="" /> <input id="NameId" name="NameId" type="password" value="Value" />
CheckBox
CheckBox这个函数比较特殊，先看代码和运行结果：
@Html.CheckBox("NameId", true) @Html.CheckBox("NameId", false)
<input checked="checked" id="NameId" name="NameId" type="checkbox" value="true" /><input name="NameId" type="hidden" value="false" /> <input id="NameId" name="NameId" type="checkbox" value="true" /><input name="NameId" type="hidden" value="false" />
本来，正常情况下它应该只生成一个<input type="checkbox">的标签，如果CheckBox第二个参数是true则有checked="checked"属性，表示这个框打勾。但是为什么这个标签有value="true"而且后面还有个尾巴<input name="NameId" type="hidden" value="false" />呢？
因为在我们ASP.NET MVC中这样子写的效果就是：如果这个CheckBox打勾了，那么提交之后就会传给目标页面一个NameId="true"的值，如果没打勾就会传一个NameId="false"的值。这个值就是由<input name="NameId" type="hidden" value="false" />传递的。若是没有<input name="NameId" type="hidden" value="false" />这一段，如果打勾了之后提交，仍然会传给目标页面一个NameId="true"的值，而不打勾则不会传NameId的值过去。
RadioButton
RadioButton会生成一个<input type="radio">标签，代码如下：
@Html.RadioButton("NameId","Value", true) @Html.RadioButton("NameId", "Value", false)
生成代码如下：
<input checked="checked" id="NameId" name="NameId" type="radio" value="Value" /> <input id="NameId" name="NameId" type="radio" value="Value" />
可以看出RadioButton和CheckBox一样都有checked参数，而RadioButton多了一个Value参数可以设置。
列表框
DropDownList
DropDownList函数可以创建<select>标签表示的下拉菜单。在创建下拉菜单之前我们需要创建用<option>标签表示的菜单选项列表，创建方法如下：
@{ SelectListItem item; List<SelectListItem> list = new List<SelectListItem>(); for(int i=1;i<5;i++) { item = new SelectListItem(); item.Text = "Text" + i; item.Value = "Value" + i; item.Selected = (i==2); list.Add(item); } }
SelectListItem类会生成一个菜单项，其Text属性表示其显示的文字，Value属性表示其对应的值，Selected属性表示其是否被选中。上面代码生成了若干个<option>标签并且当i为2时，标签被选中。
通过下面代码可以生成包含上面选项列表的下拉菜单：
@Html.DropDownList("Id", list)
生成的结果如下：
<select id="NameId" name="NameId"> <option value="Value1">Text1</option> <option selected="selected" value="Value2">Text2</option> <option value="Value3">Text3</option> <option value="Value4">Text4</option> </select>
可见DropDownList函数的第一个参数是其id和name，第二个参数就是其四个选项组成的List。每一个选项都有各自的Text、Value，并且第二个选项被选中。
ListBox
ListBox可以生成一个多选列表框，对应HTML里的<select multiple="multiple">标签，ListBox的结构和DropdownList的结构基本一样，只是多了multiple="multiple"属性。我们这里依然使用上面创建的选项列表来创建我们的ListBox，代码如下：
@Html.ListBox("NameId", list)
生成的结果如下：
<select id="NameId" multiple="multiple" name="NameId"> <option value="Value1">Text1</option> <option selected="selected" value="Value2">Text2</option> <option value="Value3">Text3</option> <option value="Value4">Text4</option> </select>
添加属性
例如想给一个标签添加class和style可以用下面办法：
@Html.TextBox("NameId", "Value", new { @class = "classText",@style="width:200px" })
得到结果如下：
<input class="classText" id="NameId" name="NameId" style="width:200px" type="text" value="Value" />
上面黄色标记部分即为添加的属性。其实你可以以同样的方式添加任意的属性名和属性值，都会生效。
结尾
目录：
说明
本节接续上一节MVC5 + EF6 + Bootstrap3 (8) HtmlHelper用法大全(上)，继续讨论HtmlHelper的用法。
下面所有HtmlHelper代码均写在Views文件夹下DefaultController文件夹里的DefaultAction.cshtml文件中。这个View文件对应一个名为DefaultController的控制器。
Form表单
在HtmlHelper中生成表单Form会用到两个函数：BeginForm和EndForm。有两种方法可以生成<form>...</form>表单，使用方法如下所示：
@using (Html.BeginForm("actionName", "controllerName", FormMethod.Get)) { @Html.TextBox("NameId") <input type="submit" value="SubmitButton" /> } @{Html.BeginForm("actionName", "controllerName", FormMethod.Post);} @Html.TextBox("NameId") <input type="submit" value="SubmitButton" /> @{Html.EndForm();}
我们在Form中写入了一个TextBox和一个提交按钮。TextBox的HtmlHelper用法上一节已经讲过，而比较奇特的是提交按钮没有对应的HtmlHelper函数来生成，需要用HTML语言直接写。后面我们会解决这个问题。
仔细看上面两种生成Form方法的区别：第一种方法将Html.BeginForm()函数放入@using (){}结构中这种方法可以直接生成form的开始标记和结束标记；第二种方法先写Html.BeginForm()函数生成开始标记，再在最后写Html.EndForm()函数生成结尾标记。这两种方法生成的结果是一样的。结果如下：
<form action="/controllerName/actionName" method="get"> <input id="NameId" name="NameId" type="text" value="" /> <input type="submit" value="SubmitButton" /> </form> <form action="/controllerName/actionName" method="post"> <input id="NameId" name="NameId" type="text" value="" /> <input type="submit" value="SubmitButton" /> </form>
从运行结果可以看出BeginForm()的第一个参数指定Action的名字，第二个参数指定Controller的名字，第三个参数指定提交的时候是用Post方法还是Get方法。上面代码中第一个Form用的是Get方法，第二个Form用的是Post方法。
使用TagBuilder创建自定义标签
前面说到没有提交按钮对应的HtmlHelper函数，那么我们就自己动手创建一个。
上帝关上了一扇门，就一定会为我们打开一扇窗。这个窗户就是TagBuilder。顾名思义，TagBuilder就是标签建造器，我们就用它来建造属于我们自己标签生成函数。
首先在项目中创建一个Classes文件夹，用来存放我们将要创建的类。在这个文件夹中创建一个名为HtmlExtensions.cs的类，这个类名不是强制性的，写什么都可以。在这个类中写入如下代码：
using System.Web.Mvc; public static class HtmlExtensions { /// <summary> /// 自定义一个@html.Submit() /// </summary> /// <param name="helper"></param> /// <param name="value">value属性</param> /// <returns></returns> public static MvcHtmlString Submit(this HtmlHelper helper, string value) { var builder = new TagBuilder("input"); builder.MergeAttribute("type", "submit"); builder.MergeAttribute("value", value); return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing)); } }
我们来解读一下上面的代码：
- 首先，要用TagBuilder就要引入System.Web.Mvc类库。
- 接着我们看这个函数的参数，this HtmlHelper helper保证这个方法会被添加到HtmlHelper中，string value对应将来的提交按钮显示的文字，也就是value属性。
- var builder = new TagBuilder("input");使我们创建的标签名字设为input。
- MergeAttribute函数给创建出的元素添加属性，如MergeAttribute("type", "submit") 就是加入 type="submit" 属性。
- TagRenderMode.SelfClosing使生成的标签自我关闭，也就是说有<input />这种形式。
- 最后用MvcHtmlString作为返回值是为了使返回值不被转义，比如"<"不会被转成"<"。这是我们不想看到的。
然后我们在View中写入下面代码调用刚才写好的函数：
@Html.Submit("SubmitButton")
生成结果如下：
<input type="submit" value="SubmitButton" />
可以看到我们在函数中所设置的标签名、属性、自包含都做到了。这样我们就成功生成了自创的submit按钮。
强类型HtmlHelper
HtmlHelper有强类型和弱类型之分。前面所介绍的这些函数统统都是弱类型的。那么强类型和弱类型有什么区别？简单点说就是强类型会用到MVC中的Model，而弱类型不用。
Htmlhelper中几乎每一个弱类型函数都会对应一个强类型函数，它们的对应关系是强类型函数名比弱类型函数名多了一个For。比如TextBox()是一个弱类型函数，那么其对应的强类型函数就是TextBoxFor()。
后面的部分我们需要借助Model来展示代码，因此在解决方案中的Models文件夹中创建一个简单的Model，就叫Simple类。文件名为Simple.cs代码如下：
namespace SlarkInc.Models { public class Simple { public string Name{ get; set; } } }
既然是一个简单的Model，那我们就只给它一个属性：Name。
创建好这个Model之后我们就可以在Controller中给这个Model初始化并赋值，并把它传递给View来为我们的强类型HtmlHelper做准备。编辑DefaultControllerController.cs文件，写入如下代码：
using System.Web.Mvc; using SlarkInc.Models; namespace SlarkInc.Controllers { public class DefaultControllerController : Controller { // GET: /DefaultController/ public ActionResult DefaultAction() { Simple s = new Simple(); s.Name= "Slark"; return View(s); } } }
图中黄色部分初始化Model，给Model赋值并将Model传递给View。
下面我们就在View中用强类型HtmlHelper将Model中的数据显示出来。从上面的代码可以看出DefaultController调用的是名为DefaultAction的View。因此我们在Views文件夹下找到DefaultController文件夹，编辑其中的DefaultAction.cshtml文件。在文件第一行加入如下代码：
@model SlarkInc.Models.Simple
这行代码表示这个View用的是Simple这个Model。
然后在文件中插入如下代码：
@Html.TextBoxFor(m =>m.Name)
这就是我们的强类型HtmlHelper函数的一个例子TextBoxFor。这个函数只有一个参数m =>m.Name。这里的m可以换成其他名字，它都指代我们这里的Model。TextBoxFor的这个参数的意思就是取Model的Name属性。由于我们在Controller中初始化了这个值，那么这个值应该是"Slark"。运行结果如下。
<input id="Name" name="Name" type="text" value="Slark" />
由上面结果可以看出，属性的名字Name被赋值给了这个元素的id和name，属性值Slark赋值给了value属性。这样我们就完成了一个简单的强类型HtmlHelper。
LabelFor数据标签
强类型的一大好处是我们可以通过改动Model而改变这个Model在所有View中的显示。如下图的一个输入框：
怎么样可以通过改动Model来改动输入框前面的文字呢？这里我们就要用到DataAnnotations，有人叫它元数据，或者叫数据批注。简单来说它就是对数据的描述。之后用HtmlHelper的LabelFor就可以读到这个信息并显示出来。我们把之前的Simple类写成如下样子：
using System.ComponentModel.DataAnnotations; namespace SlarkInc.Models { public class Simple { [Display(Name = "Name")] public string Name { get; set; } [Display(Name = "E-mail")] public string Email { get; set; } } }
代码中黄色的部分就是我们为了使用元数据而增加的代码。第一行的部分是引入了要使用元数据所需要的类库。[Display(Name = "E-mail")]这一行表示当要显示这个变量的名字的时候我们显示"E-mail"这个字符串。HtmlHelper函数LabelFor()正是从这里获取到需要显示的字符串。
在DefaultController中我们要给Email变量赋值，代码如下：
using System.Web.Mvc; using SlarkInc.Models; namespace SlarkInc.Controllers { public class DefaultControllerController : Controller { // GET: /DefaultController/ public ActionResult DefaultAction() { Simple s = new Simple(); s.Name = "Slark"; s.Email = "xxx@163.com"; return View(s); } } }
在对应的View中写下如下代码：
@Html.LabelFor(m => m.Email) : @Html.TextBoxFor(m => m.Email)
黄色标记的LabelFor函数获得的参数是Simple类的Email属性，LabelFor函数就会去寻找Model中对应Email的属性的Display元数据，进而生成结果如下：
<label for="Email">E-mail</label> : <input id="Email" name="Email" type="text" value="xxx@163.com" />
看生成的结果LabelFor函数会生成<Label>标签，并且其属性for的值对应变量名"Email"，而标签的内部文字InnerText就是Display元数据的Name属性对应的值"E-mail"。
DisplayFor 和 EditorFor显示和编辑Model数据
元数据在ASP.NET MVC的一个最主要的应用就是可以通过Model来控制数据显示和修改时所生成的HTML元素的类型。在HtmlHelper中DisplayFor是用来显示数据的，而EditorFor是用来编辑数据的。它们都会根据元数据对数据的描述生成不同类型的HTML元素。
将Simple改成如下代码：
using System.ComponentModel.DataAnnotations; namespace SlarkInc.Models { public class Simple { [Display(Name = "Name")] public string Name { get; set; } [Display(Name = "E-mail")] [DataType(DataType.EmailAddress)] public string Email { get; set; } } }
代码中黄色部分是对Email数据类型的描述。它的数据类型是邮件地址EmailAddress。在View中写下如下代码：
@Html.DisplayFor(m => m.Email) @Html.EditorFor(m => m.Email)DisplayFor和EditorFor都将Model的Email属性作为自己的参数。运行结果如下：
对应的代码如下：
<a href="mailto:xxx@163.com">xxx@163.com</a> <input class="text-box single-line" id="Email" name="Email" type="email" value="xxx@163.com" />
从结果中可以看到由于数据类型是EmailAddress,其在显示数据时就生成了一个发送邮件的超链接。在编辑数据时就生成了一个email专用的输入框<input type="email">。
思考题
学而不思则罔，思而不学则殆。这里出几个思考题供大家检验学习效果。
1.HtmlHelper生成Form有几种方法？分别怎么写？
2.如何自定义一个能生成<img>元素的HtmlHelper函数。
3.LableFor、DisplayFor、EditorFor函数用法有什么异同？
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
3.Form 2种方法跟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><%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 ,
5.TextArea<%=Html.TextBox("input1") %><%=Html.TextBox("input2",Model.CategoryName,new{ @style ="width:300px;"}) %><%=Html.TextBox("input3", ViewData["Name"],new{ @style ="width:300px;"}) %><%=Html.TextBoxFor(a => a.CategoryName,new{ @style ="width:300px;"})%>生成结果：<input id="input1"name="input1"type="text"value=""/><input id="input2"name="input2"style="width:300px;"type="text"value="Beverages"/><input id="input3"name="input3"style="width:300px;"type="text"value=""/><input id="CategoryName"name="CategoryName"style="width:300px;"type="text"value="Beverages"/>6.CheckBox<%=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>7.ListBox<%=Html.CheckBox("chk1",true) %><%=Html.CheckBox("chk1",new{ @class="checkBox"}) %><%=Html.CheckBoxFor(a =>a.IsVaild,new{ @class="checkBox"})%>生成结果：<inputchecked="checked"id="chk1"name="chk1"type="checkbox"value="true"/><input name="chk1"type="hidden"value="false"/><inputclass="checkBox"id="chk1"name="chk1"type="checkbox"value="true"/><input name="chk1"type="hidden"value="false"/><inputchecked="checked"class="checkBox"id="IsVaild"name="IsVaild"type="checkbox"value="true"/><input name="IsVaild"type="hidden"value="false"/>8.DropDownList<%=Html.ListBox("lstBox1",(SelectList)ViewData["Categories"])%><%=Html.ListBoxFor(a => a.CategoryName, (SelectList)ViewData["Categories"])%>生成结果：<selectid="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><selectid="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>9.Partial 视图模板<%= Html.DropDownList("ddl1", (SelectList)ViewData["Categories"],"--Select One--")%><%=Html.DropDownListFor(a => a.CategoryName, (SelectList)ViewData["Categories"],"--Select One--",new{ @class="dropdownlist"})%>生成结果：<selectid="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><selectclass="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>webform里叫自定义控件。功能都是为了复用。但使用上自定义控件真的很难用好。<% Html.RenderPartial("DinnerForm"); %> 看清楚了没有等号的。
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
