MVC @Html控件

传统的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（）

表示表单结束 如

 @Html.BeginForm("index", "default", FormMethod.Post, new {id="form1"})
 <input type="text" />
 @{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

是否是选中状态

 @{Html.BeginForm("index", "default", FormMethod.Post);}
     男人 @Html.RadioButton("radiobtn","man",true,new{@class="radioStyle"})
     女人 @Html.RadioButton("radiobtn","woman",false,new{@class="radioStyle"})
 @{Html.EndForm();}

Html.RadioButtonFor（expression,value,htmlAttribute）

同样是创建单选按钮的方法 但+For后缀的方法可以使用强类型作为参数expression的参数 推导出类型的属性 它可以将类型的属性名字作为表单元素的name的值

expression

类型为System.Linq.Express.Expression.<Fun<dynamic,Tproperty>>的表达式  如

 @model Course.Models.Employee
 @{Html.BeginForm("index", "default", FormMethod.Post);}
     北京 @Html.RadioButtonFor(n=>n.Address,"北京",new{@class="radioStyle",@checked="checked"})
     上海 @Html.RadioButtonFor(n=>n.Address,"上海",new{@class="radioStyle"})
 @{Html.EndForm();}

Html.CheckBox（）

创建复选框

不建议使用此方法来创建复选框 服务端不好获取值 请直接使用input 注意每个复选框需要有value值 否则获取的选中的复选框的值永远是on

 <input type="checkbox" class="Book" value="" name="Books" checked="checked"/>民谣<br/>
 <input type="checkbox" class="Book" value="" name="Books" checked="checked"/>电子<br/>
 <input type="checkbox" class="Book" value="" name="Books" />低保真<br/>

在Action中这样获取

 public ActionResult Editor(int[] Books)
 {
     foreach (var item in Books)
     {
     }
 }

Html.CheckBoxFor（）

不建议使用此方法

Html.DropDownList（name , selectList , defaultSelected,htmlAttribute）

创建下拉选项

name

下拉选项的name

selectList

一个IEnumerable<SelectListItem>集合 集合中的每个选项是SelectListItem类型的 我们可以在Action中创建实现了IEnumerable<selectListItem>接口的集合 然后将集合作为此方法的第二个参数 如

 public ActionResult Index()
 {
     List<SelectListItem> itemList = new List<SelectListItem>
     {
         new SelectListItem{Text="荔枝",Value="荔枝", Selected=false},
         new SelectListItem{Text="番茄",Value="番茄",Selected=false},
         new SelectListItem{Text="芒果",Value="芒果",Selected=false}
     };
     ViewData["choose"] = itemList;
     return View();
 }

在视图中

 @{Html.BeginForm("index", "default", FormMethod.Post);}
     @Html.DropDownList("choose",ViewData["choose"] as IEnumerable<SelectListItem>,new{@class="selectStyle"})
 @{Html.EndForm();}

defaultSelected

一个文本 表示默认选择的项 可选

 @Html.DropDownList("choose",ViewData["choose"] as IEnumerable<SelectListItem>,"请选择",new{@class="selectStyle"})

使用Linq创建下拉选项集合 如

 public ActionResult Index()
 {
     List<Employee> empList = new List<Employee>
     {
             new Employee{ ID=, Name="sam"},
             new Employee{ ID=, Name="leo"},
             new Employee{ ID=, Name="korn"}
     };
     List<SelectListItem> itemList = (from n in empList.ToList()
                                         select new SelectListItem { Text = n.Name, Value = n.ID.ToString(), Selected = false }).ToList();

     ViewData["choose"] = itemList;
     return View();
 }

还可以直接创建SelectList对象来得到同样的结果 这种方式更简洁 如

 public ActionResult Index()
 {
     List<Employee> empList = new List<Employee>
     {
             new Employee{ ID=, Name="sam"},
             new Employee{ ID=, Name="leo"},
             new Employee{ ID=, Name="korn"}
     };
     SelectList selecyList = new SelectList(empList, "ID", "Name");
     ViewData["choose"] = selecyList;
     return View();
 }

在视图中只需两个参数 参数1为choose 引用的是ViewData["choose"]中的键

 @Html.DropDownList("choose","请选择")

Html.DropDownListFor（expression,selectList,htmlAttribute）

同样是创建下拉选项的方法 但+For后缀的方法可以使用强类型作为参数expression的参数 推导出类型的属性 它可以将类型的属性名字作为下拉选项元素的name的值

expression

类型为System.Linq.Express.Expression.<Fun<dynamic,Tproperty>>的表达式

selectList

类型为SelectLlist的对象

 public ActionResult Index()
 {
     List<Employee> empList = new List<Employee>
     {
             new Employee{ ID=, Name="sam"},
             new Employee{ ID=, Name="leo"},
             new Employee{ ID=, Name="korn"}
     };
     SelectList selectList = new SelectList(empList, "ID", "Name");
     ViewData["choose"] = selectList;
     return View();
 }

在视图中

 @model Course.Models.Employee
 @{Html.BeginForm("index", "default", FormMethod.Post);}
     @Html.DropDownListFor(n=>n.Name,ViewData["choose"] as SelectList,new{@class="selectStyle"})
 @{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"}

 @Html.ActionLink("详细","Detail",new { id=})

生成的超链接为

 生成对应的超链接为：
 <a href="default/Detail/1">详细</a>

提供多个查询字符

 Html.ActionLink("详细","Detail",new { id=,name="sam"})
 生成对应的超链接为：
 <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;width: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;width:200px;padding:10px;">
        这是Index视图<br /><br />
        @Html.Partial("TestPartial")
    </div>
</body>

运行http://localhost:8559/default/index 结果如图：

viewData参数和model参数的用法如下

<body>
    <div style="background:#ffd800;width: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;width: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;width: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 如

 <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Encode（）

对URL地址进行加密

 @Url.Encode("http://www.cnblogs.com/")

生成http%3a%2f%2fwww.cnblogs.com%2f