32-HTML辅助方法

时间  2020-06-04
标签 html 辅助 方法 栏目 HTML 繁體版
原文   原文链接

      顾名思义，HTML辅助方法（HTML Helper）就是用来辅助产生HTML之用，在开发View的时候必定会面对许多HTML标签，处理这些HTML的工做很是繁琐，为了下降View的复杂度，可使用HTML辅助方法帮助你产生一些HTML标签或内容，因这些HTML标签都有固定标准的写法，因此将其包装成HTML辅助方法，可以让View开发更快速，也能够避免没必要要的语法错误。css

      ASP.NET MVC中内建了许多HTML辅助方法，这些HTML辅助方法都是利用C#3.0的扩充方法特性，将各类不一样的HTML辅助方法扩充在HtmlHelper类别里，而且都拥有多载。html

      经过HTML辅助方法的讲解，能够有效协助你面对常见但又繁琐的HTML编写工做，例如，超连接、表单声明（<form>）、表单元素（<input>、<select>、<textarea>）、HTML编码与解码、载入其余分部视图页面（Partial View Page）、显示Model验证失败的错误信息等，撰写ASP.NET MVC必定少不了它。web

1.使用HTML辅助方法输出超连接ajax

      在开发View页面时最经常使用的HTML辅助方法莫过于输出超连接，在View中输出ASP.NET MVC的超连接一般会用Html.ActionLink辅助方法，该方法用于产生文字连接，其文字部分会自动进行HTML编码（HtmlEncode）。具体使用状况以下所示。数据库

语法范例 说明
@Html.ActionLink("连接文字","ActionName") 这是最基本的用法，要跳转的控制器为本视图所在的控制器。连接文字不可为空字符串、空白字符串或null值，不然会抛出The Value cannot be null or empty的异常。
@Html.ActionLink("连接文字","ActionName","ControllerName") 指定连接文字、动做、控制器
@Html.ActionLink("连接文字","ActionName",new{id=123,page=5}) 当须要设定额外的RouteValue时，能够在第三个参数传入object类型的数据
@Html.ActionLink("连接文字","ActionName",null,new{@class="btnLink"})

当须要传入超连接额外的HTML属性时，能够将参数加载第四个参数上。模块化

请注意：因为HTML标签里在套用CSS样式类型时会用到class属性名称，而在C#里class属于关键字，因此必须使用@class的方式，才能确保C#正确编译。post

此外，若是要输出HTML属性包括减号（-）时，例如data-value属性，应使用“_”下划线代替。ui
 @Html.ActionLink("连接文字","ActionName","ControllerName", null,new{@class="btnLink"})

 5个参数this

      使用Html.AcionLink()时，第一个参数为超连接的显示文字，此参数不能够输入空字符串、空白字符串或null值，不然会跑出The Value cannot be null or empty的异常。编码

      若是想设计一个包含超连接的图片按钮，可选择用<a>超连接标签来输出，并经过CSS加上一个背景图，以下。

<a href="@Url.Action("ActionName")" class="lnkButton"></a>

      ASP.NET MVC还有另外一个Html.RouteLink辅助方法，其用法与Html.ActionLink很是类似，差异仅在于输入的参数要以RouteValue为主。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

练习1：使用Html.ActionLink编写一个超连接，能够跳转至\home\about动做，并传入路由参数id=5，以及css属性超连接文本为绿色。

练习2：设计一个包含超连接的图片按钮，能够跳转至\account\login。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

2.使用HTML辅助方法输出表单

（1）产生表单元素

      在使用表单以前，你们应该已经看过好几遍关于Html.BeginForm()的使用，该辅助方法主要用来产生<form>标签，能够经过using语法来使用，也能够配合Html.EndForm()使用以产生适当的</form>表单结尾。如下是几个Html.BeginForm()的代码范例。

a.使用using语法产生表单标签

@using(Html.BeginForm("About","Home")) { @Html.TextArea("Date") @Html.TextArea("MEMO") <input type="submit"/> }

b.使用Html.BeginForm辅助方法输出的表单预设输出的method属性会是POST，若是想指定为GET的话，能够输入第三个参数，以下。

@using(Html.BeginForm("Search","Home",FormMethod.Get)) { @Html.TextArea("Keyword") <input type="submit" /> }

c.若是想要用HTML表单实现文件上传的功能，那么必须在输出的<form>表单标签加上一个enctype属性，且内容必须设定为multipart/form-data，以下。

@using(Html.BeginForm("Upload","File",FormMethod.Post,new{enctype="multipart/form-data"})) { @Html.TextBox("File1","",new{type="file",size="25"}) <input type="submit"/> }

      Html辅助方法并无File方法，所以必须用TextBox方法来代替，并传入第三个参数将内建的type属性换成file便可。

>>>实训001--表单提交文件<<<

（2）经常使用表单输入元素

Html.BeginForm()，输出<form>标签

Html.EndForm()，输出</form>标签

Html.Label()，输出<label>标签

Html.TextBox()，输出<input type="text">标签

Html.TextArea()，输出<textarea>标签

Html.Password()，输出<input type="password">标签

Html.CheckBox()，输出<input type="checkbox">标签

Html.RadionButton()，输出<input type="radio">标签

Html.DropDownList()，输出<select>标签。

Html.ListBox()，输出<select multiple>标签

Html.Hidden()，输出<input type="hidden">标签

Html.ValidationSummary()，输出表单验证失败时的错误信息摘要

a.标签的使用

@Html.Label("Username","帐户") @Html.TextBox("Username")

b.文本框的使用

      Html.TextBox的重载以下：

@Html.TextBox("Username") //id,name的值为Username
@Html.TextBox("Username", "will") //id,name的值为Username; value的值为will
@Html.TextBox("Username", "will", new { size=32 })//id,name的值为Username; html属性值size=3

      若是要传递多个html属性值，而且在多处使用，能够按照下面的例子来作。

 public ActionResult HelperSample1()
        {
            IDictionary<string, object> attr = new Dictionary<string, object>();
            attr.Add("size", "32");
            attr.Add("style", "color:red;");
            ViewData["Dictionary"] = attr;
            return View();
        }
@{
    var htmlAttribute = ViewData["Dictionary"] as IDictionary<string, object>;
}
@Html.TextBox("name","Value",htmlAttribute)<br />
@Html.Password("password","Value",htmlAttribute)<br />
@Html.TextBox("email","Value",htmlAttribute)<br />
@Html.TextBox("tel","Value",htmlAttribute)<br />
@Html.Hidden("id","1")

c.Html.DropDownList()的使用

1)不读取数据库的下拉列表

复制代码 
        public ActionResult HelperSample2() { List<SelectListItem> listItem = new List<SelectListItem>(); listItem.Add(new SelectListItem { Text = "是", Value = "1" }); listItem.Add(new SelectListItem { Text = "否", Value = "0" }); ViewData["List"] = new SelectList(listItem, "Value", "Text", ""); return View(); }
复制代码 
@Html.DropDownList("List", ViewData["List"] as SelectList, "请选择") //参数依次为下拉列表的名字，指定的列表项，默认选择项的值

2)数据来自数据库的下拉列表

        public ActionResult Index()
        {
            var list = new SelectList(db.Students, "Id", "Age", "3");  //参数依次为数据集合，数据值，数据文本，选中项的值
            ViewBag.List = list;
            return View();
        }
@Html.DropDownList("List")

3)数据来自枚举类型

 ViewBag.Role = new SelectList(Enum.GetValues(typeof(SystemRole)), "");
@Html.DropDownList("Role")

>>>实训002--用数据库值填充下拉列表<<<

（3）使用强类型辅助方法

      ASP.NET MVC从2.0版开始更进一步地提供了强类型的辅助方法，避免由于输入错误而致使数据没有显示或是编辑时没法存储的问题，除此以外，若是能活用这些强类型辅助方法还能提高总体开发效率。

      基本上，属于强类型的辅助方法命名方式皆为“原先的名称最后加上For”，例如，Html.TextBoxFor()或Html.LabelFor()。使用强类型辅助方法，在View页面的最上方必定要用@model定义出这个View页面的参考数据模型，若是没有生命就没法正常使用强类型辅助方法。

Html.LabelFor()，输出<label>标签，显示字段的名字。

Html.TextBoxFor()

Html.TextAreaFor()

Html.PasswordFor()

Html.CheckBoxFor()

Html.RadioButtonFor()

Html.DropDownListFor()，输出<select>标签。

Html.ListBoxFor()，输出<select multiple>标签。

Html.HiddenFor() ，生成HTML窗体的隐藏域。

Html.DisplayNameFor()，显示数据模型在Metadata定义的显示名称。

Html.DisplayTextFor()，显示数据模型的文字资料。

Html.ValidationMessageFor()，显示数据模型当输入验证失败时显示的错误信息。

Html.EditorFor()，用来输出表单域可编辑文本框。

      作一个例子，首页显示商品明细，点击添加商品连接，打开添加商品页面，输入信息可添加商品。商品的模型类和添加商品页面代码以下：

复制代码 
    public class Product { public int Id { get; set; } [Required] [DisplayName("产品名称")] public string Name { get; set; } [MaxLength(200)] [DisplayName("产品说明")] public string Description { get; set; } [Required] public int UnitPrice { get; set; } }
复制代码
复制代码 
@model MvcApplication1.Models.Product

@using(Html.BeginForm())
{
    @Html.ValidationSummary(true) <fieldset> <legend>产品资讯</legend> <div class="editor-lable"> @Html.LabelFor(model=>model.Name) </div> <div class="editor-field"> @Html.TextBoxFor(model=>model.Name) @Html.ValidationMessageFor(model=>model.Name) </div> <div class="editor-label"> @Html.LabelFor(model=>model.Description) </div> <div class="editor-label"> @Html.TextAreaFor(model=>model.Description) @Html.ValidationMessageFor(model=>model.Description) </div> <p> <input type="submit" /> </p> </fieldset> }
复制代码

3.使用HTML辅助方法载入分部视图

      以往在ASP.NET Web form的开发经验中，对于User Control使用很是频繁，不但能够减小重复的代码，也利于将页面模块化，这个好用的概念也能够用在ASP.NET MVC中，只不过换了一个名字，称为“分部视图（Partial View）”。

（1）什么是分部视图

      从Partial View的字面上翻译，很容易了解它就是一个片断的View，所以，能够利用Partial View把部分的HTML或显示逻辑包装起来，方便重复引用。当你将创建出来的分部视图放置于View\Shared目录时，任何Controller下的Action或View均可以载入。公用的Parital View放在Views\Shared目录。

 

      分部视图的应用范围至关广，由于是片断的HTML显示逻辑，所以，总体重复性高或某段HTML会共同出如今多个视图页面中的网页片断，利用分部视图来开发会是不错的选择，而且基于这个优势，Ajax技术所须要的片断View也就更适合使用分部视图。

（2）如何创建一个分部视图

      创建分部视图与创建视图的步骤同样，在项目的/Views/Shared目录上，单击鼠标右键，在弹出的快捷菜单中选择“添加”->“视图”命令。接着，选中“建立为分部视图”复选框便可。

      使用分部视图不必定须要创建相关的Action，由于它仅仅是片断的HTML，且调用时，也不会调用Action来执行。

（3）使用Html.Partial载入分部视图

      ASP.NET MVC的HTML辅助方法拥有一个专门的扩充方法来载入分部视图，称为Partial，可让你在View中直接将分部视图的执行结果取回。

使用方式 使用范例
Partial(HtmlHelper, String)  Html.Partial("ajaxPage")
Partial(HtmlHelper, String, Object)   Html.Partial("ajaxPage", Model)
Partial(HtmlHelper, String, ViewDataDictionary)    Html.Partial("ajaxPage", ViewData["Model"])
Partial(HtmlHelper, String, Object, ViewDataDictionary) Html.Partial("ajaxPage", Model, ViewData["Model"])

      因分部视图是片断的，必需要选择一个完整的页面来将它载入。   

例子1，分部视图OnlineUserCounter代码以下。

<span style="color:red">线上人数：88888</span>

    在Home/Index视图中载入分部视图。

@Html.Partial("OnlineUserCounter")

      利用上述方式就能将分部视图载入，由于是直接的载入，所以，调用的页面如有传递数据也能够直接调用出来。

      在一个视图页面里，若是载入了多个分部视图，每一个分部视图里也能够存取到本来页面的ViewData、TempData及Model等数据，也就表明着这些从Controller传入的数据模型能够共用于各个分部视图之间。

      不过，载入分部视图时，也能够经过Html.Partial辅助方法传入另外一个Model数据，如此一来，就能让分部视图里与载入该视图页面时使用不一样的模型数据，也能够把视图页面中的一部分数据当成分部视图页面中的数据。

      咱们以AccountController的Login页面为例，这一页在登陆失败时会传入上一页输入的数据，当从视图页面中载入另外一个分部视图时，能够传入一个object类型的参数做为分部视图的模型数据，以下视图页面。

@model LoginModel
@{
    ViewBag.Title="登陆";
}

@Html.Partila("LoginFail", (object)Model.UserName)

      接着在/Views/Account目录下新增一个名为LoginFail的分部视图，其内容以下：

@model System.String
从视图页面传入的模型数据为：@Model

      由上述范例能够知道，在通常视图页面中的Model与LoginFail这个分部视图里的Model已是不一样的东西了。

（4）使用Html.Action辅助方法，从控制器载入分部视图

      分部视图页面除了能够直接从视图页面载入外，也能够像通常视图页面同样从Controller中使用。以下OnlineUserCount这个动做方法就是利用Controller类型中的PartialView辅助方法来载入分部视图，而这种载入方式与用View辅助方法惟一的差异，仅在于它不会套用母版页面，其余则都彻底相同。

public ActionResult OnlineUserCount()
{
    return PartialView();
}

      而后能够在视图页面利用Html.Action来载入这个Action的执行结果：

@Html.Action("OnlineUserCounter")

      经过Html.Action与Html.Partial载入分部视图结果是同样的，但载入的过程却差异很大。若使用Html.Partial载入分部视图是经过HtmlHelper直接读取*.cshtml文件，直接执行该视图并取得结果。若使用Html.Action的话，则会经过HtmlHelper对IIS再进行一次处理要求（经过Server.Execute方法），所以，使用Html.Action会从新执行一遍Controller的生命周期。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程