首页 > 其他分享> > Web框架UI系列--MVC常用控件讲解

Web框架UI系列--MVC常用控件讲解

2020-03-19 22:53:56 作者：互联网

按钮、下拉框、文本框等控件在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类及其辅助类，辅助我们快速开发前台页面，也提供了可扩展的接口，前台页面的标签可以做到高度可重用。

HtmlHelper类，表示支持在视图中呈现 HTML 控件

我们在"@Html"上F12，结果如图，可以发现Html是一个HtmlHelper类型的属性，并且其从属于WebViewPage类。

那HtmlHelper类又是何方神圣呢，如下图关于HtmlHelper类，从属于System.Web.Mvc程序集，其构造函数中有ViewContext类型,使用指定的视图上下文和视图数据容器来初始化 HtmlHelper 类的新实例，这个新实例可以获取当前视图的数据字典、上下文信息、甚至于路由集合，各位看客，看到这是否已经明白@Html为什么能在当前视图页里面起大作用了吧。
helper详情

标题 ##HtmlHelper辅助类，大量简单易用快速创建页面控件的扩展方法

仔细的朋友应该可以看到到目前为止还没有看到一个视图中使用的函数，其实在我们HtmlHelper本身类中并没有一个生成控件的方法，那在哪呢，我们F12进去@Html.TextBox("input1",Model.Name,new{@style="color:#666;"})，可以发现一个名为InputExtensions的静态类，全是HtmlHelper的扩展方法，有CheckBox、TextBox、RadioButton、Hidden、Password五种输入框控件的实现，每一种还都提供强类型（Html.xxxFor(m=>m.Name)）来生成Html标签，是不是很强大，也很体贴！ .NET MVC HTMLHelper不仅提供InputExtensions，还提供Form(表单)、Link（链接）、ChildAction（子操作）、Display（显示）、Select（选择控件）、Editor（编辑）、TextArea（富文本）、Label（Label元素）、 Partial（局部视图）、Validation（验证）等扩展类,他们的命名空间都是System.Web.Mvc.Html,Web开发框架有大量的实例供参考。
下面我们用一个简单的例子一个一个的来认识那些常用又重要的控件。 LinkExtention之@Html.AcionLink() 作用：返回包含指定操作的虚拟路径的定位点元素（a 元素），返回类型：System.Web.Mvc.MvcHtmlString
@Html.ActionLink("HtmlHelper-AcionLink","HtmlActionLinkTest","Home",new{name="Hello,我在中国！"}) 转化成Html：

 <a href="/Home/Home/HtmlActionLinkTest?name='Hello,我在中国！'">HtmlHelper-AcionLink</a>

ActionLink相关参数说明：

后台Controller程序：
public ActionResult HtmlActionLinkTest(string sname)
{
ViewBag.Sname = sname;
return View("TestResult");
} ChildActionExtention之@Html.Action() @Html.Action("HtmlActionTest", "Home", new { sname = "Html.Action：直接执行，返回执行结果" }) 执行后的结果：
Html.Action：直接执行，返回执行结果后台Controller程序：
Public ActionResut HtmlActionTest(string sname){
return Content(sname);
}
注：Action和Actionlink区别：action返回自动执行action后的htmlstring；actionlink是返回a标签的htmlstring，并不执行action。 FormExt FormExtention之@HTML.BeginForm() 函数定义及说明
<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

标签：控件,Web,MVC,视图,Html,HtmlHelper,Model
来源： https://www.cnblogs.com/frfwef/p/12516184.html