传统的Html元素不能和服务端数据进行绑定 HtmlHelper类提供了一系列的方法来生成Html元素 并可以实现与数据绑定在一起 然后生成Html
Html.BeginForm（actionName , controllerName , FormMethod , htmlAttribute）
创建一个表单
actionName 和 controllerName
这两个参数表示表单要提交到哪个controllerName下的哪个Action方法中
FormMethod
此参数是一个枚举 表示表单提交方式 GET or POST
htmlAttribute
表示form元素的Html属性 是一个object对象 使用new {html属性名字="值"} class也是html属性 但同时它是C#关键字 只能这样指定：new {@class="formstyle"}
Html.EndForm（）
表示表单结束 如
1 @Html.BeginForm("index", "default", FormMethod.Post, new {id="form1"}) 2 <input type="text" /> 3 @{Html.EndForm();}
BeginForm方法返回System.Web.Mvc.Html.MvcForm类型 如果不用中括号括起来 则表示要输出该方法返回的值 EndForm无返回值 所以也需要使用中括号括起来 最后一个参数通过objecr来指定它的Html属性
Html.Raw()
@Html.Raw() 方法输出带有html标签的字符串，如：
@Html.Raw("<div
style='color:red'>输出字符串</div>")
结果：输出字符串
Html.RadioButton（name,value,Ischecked,htmlAttribute）
创建单选按钮
name
单选按钮的name
value
单选按钮的值
Ischecked
是否是选中状态
1 @{Html.BeginForm("index", "default", FormMethod.Post);} 2 男人 @Html.RadioButton("radiobtn","man",true,new{@class="radioStyle"}) 3 女人 @Html.RadioButton("radiobtn","woman",false,new{@class="radioStyle"}) 4 @{Html.EndForm();}
Html.RadioButtonFor（expression,value,htmlAttribute）
同样是创建单选按钮的方法 但+For后缀的方法可以使用强类型作为参数expression的参数 推导出类型的属性 它可以将类型的属性名字作为表单元素的name的值
expression
类型为System.Linq.Express.Expression.<Fun<dynamic,Tproperty>>的表达式 如
1 @model Course.Models.Employee 2 @{Html.BeginForm("index", "default", FormMethod.Post);} 3 北京 @Html.RadioButtonFor(n=>n.Address,"北京",new{@class="radioStyle",@checked="checked"}) 4 上海 @Html.RadioButtonFor(n=>n.Address,"上海",new{@class="radioStyle"}) 5 @{Html.EndForm();}
Html.CheckBox（）
创建复选框
不建议使用此方法来创建复选框 服务端不好获取值 请直接使用input 注意每个复选框需要有value值 否则获取的选中的复选框的值永远是on
1 <input type="checkbox" class="Book" value="1" name="Books" checked="checked"/>民谣<br/> 2 <input type="checkbox" class="Book" value="2" name="Books" checked="checked"/>电子<br/> 3 <input type="checkbox" class="Book" value="3" name="Books" />低保真<br/>
在Action中这样获取
1 public ActionResult Editor(int[] Books) 2 { 3 foreach (var item in Books) 4 { 5 } 6 }
Html.CheckBoxFor（）
不建议使用此方法
Html.DropDownList（name , selectList , defaultSelected,htmlAttribute）
创建下拉选项
name
下拉选项的name
selectList
一个IEnumerable<SelectListItem>集合 集合中的每个选项是SelectListItem类型的 我们可以在Action中创建实现了IEnumerable<selectListItem>接口的集合 然后将集合作为此方法的第二个参数 如
1 public ActionResult Index() 2 { 3 List<SelectListItem> itemList = new List<SelectListItem> 4 { 5 new SelectListItem{Text="荔枝",Value="荔枝", Selected=false}, 6 new SelectListItem{Text="番茄",Value="番茄",Selected=false}, 7 new SelectListItem{Text="芒果",Value="芒果",Selected=false} 8 }; 9 ViewData["choose"] = itemList; 10 return View(); 11 }
在视图中
1 @{Html.BeginForm("index", "default", FormMethod.Post);} 2 @Html.DropDownList("choose",ViewData["choose"] as IEnumerable<SelectListItem>,new{@class="selectStyle"}) 3 @{Html.EndForm();}
defaultSelected
一个文本 表示默认选择的项 可选
1 @Html.DropDownList("choose",ViewData["choose"] as IEnumerable<SelectListItem>,"请选择",new{@class="selectStyle"})
使用Linq创建下拉选项集合 如
1 public ActionResult Index() 2 { 3 List<Employee> empList = new List<Employee> 4 { 5 new Employee{ ID=1, Name="sam"}, 6 new Employee{ ID=2, Name="leo"}, 7 new Employee{ ID=3, Name="korn"} 8 }; 9 List<SelectListItem> itemList = (from n in empList.ToList() 10 select new SelectListItem { Text = n.Name, Value = n.ID.ToString(), Selected = false }).ToList(); 11 12 ViewData["choose"] = itemList; 13 return View(); 14 }
还可以直接创建SelectList对象来得到同样的结果 这种方式更简洁 如
1 public ActionResult Index() 2 { 3 List<Employee> empList = new List<Employee> 4 { 5 new Employee{ ID=1, Name="sam"}, 6 new Employee{ ID=2, Name="leo"}, 7 new Employee{ ID=3, Name="korn"} 8 }; 9 SelectList selecyList = new SelectList(empList, "ID", "Name"); 10 ViewData["choose"] = selecyList; 11 return View(); 12 }
在视图中只需两个参数 参数1为choose 引用的是ViewData["choose"]中的键
1 @Html.DropDownList("choose","请选择")
Html.DropDownListFor（expression,selectList,htmlAttribute）
同样是创建下拉选项的方法 但+For后缀的方法可以使用强类型作为参数expression的参数 推导出类型的属性 它可以将类型的属性名字作为下拉选项元素的name的值
expression
类型为System.Linq.Express.Expression.<Fun<dynamic,Tproperty>>的表达式
selectList
类型为SelectLlist的对象
1 public ActionResult Index() 2 { 3 List<Employee> empList = new List<Employee> 4 { 5 new Employee{ ID=1, Name="sam"}, 6 new Employee{ ID=2, Name="leo"}, 7 new Employee{ ID=3, Name="korn"} 8 }; 9 SelectList selectList = new SelectList(empList, "ID", "Name"); 10 ViewData["choose"] = selectList; 11 return View(); 12 }
在视图中
1 @model Course.Models.Employee 2 @{Html.BeginForm("index", "default", FormMethod.Post);} 3 @Html.DropDownListFor(n=>n.Name,ViewData["choose"] as SelectList,new{@class="selectStyle"}) 4 @{Html.EndForm();}
Html.ActionLink(linkText , actionName , controlName , routeValues , htmlAttribut）
//var url = "Url.Action("SearchResult")" + "?name=" + keyword;
创建超链接
linkText
超链接文本
actionName
提交到哪个Action处理
controlName
提交到哪个控制器 可选 默认就是当前视图所属的Action所在的控制器
routeValues
object对象 设置超链接查询字符 跟设置html属性是一样的 如new {id=1,name="sam"}
1 @Html.ActionLink("详细","Detail",new { id=1})
生成的超链接为
1 生成对应的超链接为： 2 <a href="default/Detail/1">详细</a>
提供多个查询字符
1 Html.ActionLink("详细","Detail",new { id=1,name="sam"}) 2 生成对应的超链接为： 3 <a href="default/Detail?id=1&name=1">详细</a>
Html.Partial（）
将分布视图渲染到当前视图页面 该方法具有多个重载版 所有参数介绍如下
partialName
参数为分布视图名称
viewData
一个ViewDataDictionary类型的对象
model
分布视图需要使用的强类型对象
分布视图可以手动在当前视图的目录中创建 扩展名还是cshtml 只不过里面没有<html>/<head>/<body>标签 你可以在分布视图中编写body以下级别的html元素 也可以写Js和服务端脚本 除了没有几个主体标签 其它和视图都是一样的 可以右击Action - 添加视图 选择分布视图 如
打开TestPartial文件 输入以下代码做个测试
<div style="background:#010067;200px;height:100px;padding-top:50px;text-align:center;color:white;"> <label style="color:red;font-size:20px;font-weight: bolder;vertical-align:middle;">+</label> <label style="vertical-align:middle;">这个框里的内容是分布视图TestPartial</label> </div>
接着打开Index视图 调用此方法来加载分布视图TestPartial
<body> <div style="background:#ffd800;200px;padding:10px;"> 这是Index视图<br /><br /> @Html.Partial("TestPartial") </div> </body>
运行http://localhost:8559/default/index 结果如图：
viewData参数和model参数的用法如下
<body> <div style="background:#ffd800;200px;padding:10px;"> 这是Index视图<br /><br /> @Html.Partial("TestPartial", new Course.Models.Employee{ ID=1, Name="sam"}, new ViewDataDictionary { {"music1","Free Jazz"},{"music2","BossaNova"}}) </div> </body>
在分布视图中可获取viewData和model model必须声明一下
@model Course.Models.Employee <div style="background:#010067;200px;height:100px;padding-top:50px;text-align:center;color:white;"> <label style="color:red;font-size:20px;font-weight: bolder;vertical-align:middle;">+</label> <label style="vertical-align:middle;">@Model.Name</label> <p><label style="vertical-align:middle;">@ViewData["music1"]</label></p> <p><label style="vertical-align:middle;">@ViewData["music2"]</label></p> </div>
运行http://localhost:8559/default/index 结果如图：
Html.RenderPartial（）
与Partial方法有类似的行为 区别在于Partial是将分布视图作为字符串加入主视图 而RenderPartial则是将分布式图写入响应输出流 在性能上RenderPartial要优于前者 但以往内此方法不返回值 所以必须使用中括号括起来
@{Html.RenderPartial("TestPartial");}
@{Html.RenderPartial("TestPartial", new Course.Models.Employee{ ID=1, Name="sam"}, new ViewDataDictionary { {"music1","Free Jazz"},{"music2","BossaNova"}});}
Html.Action（）
调用一个子操作（Action） 并以Html形式返回结果
actionName
Action的名称
controllerName
控制器的名称
routeValues
路由参数 格式:new {id=xx,code=xxx}
此方法与Partial类似 区别在于 Partial方法不经过Action处理 它直接加载一个分部视图页面 而Action方法会先经过Action处理再加载分布视图 其用法如下
public ActionResult Menu() { return PartialView("Menu"); }
右击Menu方法 创建一个分部视图Menu 打开分部视图 输入如下代码
<div style="background: #010067; text-align: center; color: white;"> <p>这是分布视图</p> <ul> <li>坂本龍一 </li> <li>Ian Brown</li> <li>Ataraxia </li> </ul> </div>
在Index页面调用此方法
<body> <div style="background:#ffd800;200px;padding:10px;"> 这是Index视图<br /><br /> @Html.Action("Menu") </div> </body>
结果
Html.RenderAction（）
与Action方法有类似的行为 区别在于Action方法是将分布视图作为字符串加入主视图 而RenderAction则是将分布式图写入响应输出流 在性能上RenderAction要优于前者 但以往内此方法不返回值 所以必须使用中括号括起来
类似的Html辅助方法还有Html.Hidden（）、Html.PassWord（）、Html.TextBox（） 略 ……
UrlHelper类提供了方法用于生成URL
Content（）
将一个虚拟的、相对的URL转换为应用程序的绝对URL 如
1 <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
Encode（）
对URL地址进行加密
1 @Url.Encode("http://www.cnblogs.com/")
生成http%3a%2f%2fwww.cnblogs.com%2f