按钮、下拉框、文本框等控件在C/S结构和Web Form都是界面可视化可拉动的服务端控件形式，在.NET MVC [Web开发框架](http://www.hocode.com/)中则采用HTML表单标签来实现， 如果用纯Html标签代码写控件，效率并不高，且容易出错。为了方便开发人员，也为了提高效率，从MVC3开始，@Html.XXX(),这个.net 提供的HtmlHelper类及其辅助类，辅助我们快速开发前台页面，也提供了可扩展的接口，前台页面的标签可以做到高度可重用。
HtmlHelper类，表示支持在视图中呈现 HTML 控件
我们在"@Html"上F12，结果如图，可以发现Html是一个HtmlHelper类型的属性，并且其从属于WebViewPage类。
那HtmlHelper类又是何方神圣呢，如下图关于HtmlHelper类，从属于System.Web.Mvc程序集，其构造函数中有ViewContext类型,使用指定的视图上下文和视图数据容器来初始化 HtmlHelper 类的新实例， 这个新实例可以获取当前视图的数据字典、上下文信息、甚至于路由集合，各位看客，看到这是否已经明白@Html为什么能在当前视图页里面起大作用了吧。
按钮、下拉框、文本框等控件在C/S结构和Web Form都是界面可视化可拉动的服务端控件形式，在.NET MVC Web开发框架中则采用HTML表单标签来实现， 如果用纯Html标签代码写控件，效率并不高，且容易出错。为了方便开发人员，也为了提高效率，从MVC3开始，@Html.XXX(),这个.net 提供的HtmlHelper类及其辅助类，辅助我们快速开发前台页面，也提供了可扩展的接口，前台页面的标签可以做到高度可重用。
我们在"@Html"上F12，结果如图，可以发现Html是一个HtmlHelper类型的属性，并且其从属于WebViewPage类。
那HtmlHelper类又是何方神圣呢，如下图关于HtmlHelper类，从属于System.Web.Mvc程序集，其构造函数中有ViewContext类型,使用指定的视图上下文和视图数据容器来初始化 HtmlHelper 类的新实例， 这个新实例可以获取当前视图的数据字典、上下文信息、甚至于路由集合，各位看客，看到这是否已经明白@Html为什么能在当前视图页里面起大作用了吧。
标题 ##HtmlHelper辅助类，大量简单易用快速创建页面控件的扩展方法
下面我们用一个简单的例子一个一个的来认识那些常用又重要的控件。
@Html.ActionLink("HtmlHelper-AcionLink","HtmlActionLinkTest","Home",new{name="Hello,我在中国！"})
<a href="/Home/Home/HtmlActionLinkTest?name='Hello,我在中国！'">HtmlHelper-AcionLink</a>
ActionLink相关参数说明：
public ActionResult HtmlActionLinkTest(string sname)
{
ViewBag.Sname = sname;
return View("TestResult");
}
Html.Action：直接执行，返回执行结果
Public ActionResut HtmlActionTest(string sname){
return Content(sname);
}
注：Action和Actionlink区别：action返回自动执行action后的htmlstring；actionlink是返回a标签的htmlstring，并不执行action。
<pre>public static MvcForm BeginForm(
this HtmlHelper htmlHelper, // 扩展的HTML 帮助器实例
string actionName, //操作方法的名称
string controllerName, //控制器的名称
RouteValueDictionary routeValues, //一个包含路由参数的对象
FormMethod method, //用于处理窗体的 HTTP 方法（GET 或 POST）。
IDictionary<string, Object> htmlAttributes //一个对象，其中包含要为该元素设置的 HTML 特性。
)</pre>
返回值：System.Web.Mvc.Html.MvcForm
@using (Html.BeginForm("HtmlHelperTest", "Home", FormMethod.Post, new { id="beginformtest"})) { @Html.EditorFor(m=>m.TextBoxValue) @*或者 @Html.TextBox("inputt",Model.TextBoxValue)*@ @Html.Raw(Model.TextBoxValue) <input type="submit" class="study-btn" value="提交"/> } ```
转化成Html：
InputExtention之CheckBox、TextBox、RadioButton、Hidden、Password
@Html.HiddenFor(m => m.Id) @** 或者 @Html.Hidden("Id")*@ @using (Html.BeginForm("HtmlHelperTest", "Home", FormMethod.Post, new { id = "beginformtest" })) { <div class="row"> <div class="col-md-1">@Html.Label("Editor:")</div> <div class="col-md-2">@Html.EditorFor(m => m.EditorValue) @*或者 @Html.Editor("inputt",Model.EditorValue)*@</div> <div class="col-md-1">@Html.Label("TextBox:")</div> <div class="col-md-2">@Html.TextBoxFor(m => m.TextBoxValue) @*或者 @Html.TextBox("inputt",Model.TextBoxValue)*@</div> <div class="col-md-1">@Html.Label("CheckBox:")</div> <div class="col-md-2">@Html.CheckBoxFor(m => m.CheckBoxValue) @*或者 @Html.CheckBox("inputt",Model.CheckBoxValue)*@</div> </div> <div class="row"> <div class="col-md-1">@Html.Label("RadioBtn:")</div> <div class="col-md-2">@Html.RadioButtonFor(m => m.RadioButtonValue, 1) @*或者 @Html.RadioButton("inputt",Model.TextBoxValue,1)*@</div> <div class="col-md-1">@Html.Label("Password:")</div> <div class="col-md-2">@Html.PasswordFor(m => m.PasswordValue) @*或者 @Html.Password("inputt",Model.PasswordValue)*@</div> </div> <input type="submit" class="study-btn" value="提交" /> @Html.Raw(Model==null?"":Model.TestResult) } ``` 转化成Html： ``` <
TextAreaExtention之TextArea，SelectExtensions之DropDownList、ListBox
<div class="col-md-1">@Html.Label("TextArea:")</div> <div class="col-md-3">@Html.EditorFor(m => m.TextAreaValue) @*或者 @Html.TextArea("TextArea",Model.TextAreaValue)*@</div> <div class="col-md-1">@Html.Label("TextBox:")</div> <div class="col-md-3">@Html.DropDownListFor(m => m.DropDownListValue, (List<SelectListItem>)ViewBag.ListValues) @*或者 @Html.DropDownList("DropDownList",Model.DropDownListValue,(List<SelectListItem>)ViewBag.ListValues)*@</div> <div class="col-md-1">@Html.Label("ListBoxValue:")</div> <div class="col-md-3">@Html.ListBoxFor(m => m.ListBoxValue, (List<SelectListItem>)ViewBag.ListValues) @*或者 @Html.ListBox("ListBox",Model.ListBoxValue,(List<SelectListItem>)ViewBag.ListValues)*@</div> ```
转化成Html：
<div class="col-md-3"><select id="DropDownListValue" name="DropDownListValue"><option value="1">value1</option> <option value="2">value2</option> </select> </div> <div class="col-md-1"><label for="ListBoxValue:">ListBoxValue:</label></div> <div class="col-md-3"><select id="ListBoxValue" multiple="multiple" name="ListBoxValue"><option value="1">value1</option> <option value="2">value2</option> </select> </div> ```
PartialExtention之Partial，ValidationExtensions之Validation
@Html.Partial(“PartialName”)是局部视图，表示将分部视图呈现为 HTML 编码字符串的功能。B/S开发框架我们在可重用视图片段、大业务场景视图时可用到分部视图，目的是代码重用性高和可读写性强。分部视图我们会单写一章来介绍。
ValidationExtensions之Validation，这是一个非常常用的扩展函数，我们窗体中很多重要的数据都需要数据验证，比如需要控制一个数值不能大于1000,控制如下：
Model中字段申明:
[DisplayName("Validation")] [Required] [Range(0,1000)] public int ValidationValue { get; set;} View层代码： <div class="col-md-1">@Html.LabelFor(m=>m.ValidationValue)</div> <div class="col-md-3"> @Html.TextBoxFor(m => m.ValidationValue) @*或者 @Html.TextBox("inputt",Model.ValidationValue)*@ @Html.ValidationMessageFor(m => m.ValidationValue) </div>
转化成Html：
<div class="col-md-1"><label for="ValidationValue">Validation</label></div> <div class="col-md-3"> <input data-val="true" data-val-number="The field Validation must be a number." data-val-range="字段 Validation 必须在 0 和 1000 之间。" data-val-range-max="1000" data-val-range-min="0" data-val-required="Validation 字段是必需的。" id="ValidationValue" name="ValidationValue" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="ValidationValue" data-valmsg-replace="true"></span> </div> ```
文章转载自：Web开发框架 web框架UI系列–MVC常用控件讲解
web开发框架--云微平台
本文标题：web框架UI系列–MVC常用控件讲解
本文地址：http://www.my-framework.com/OrgTec/UI/0004.html