Html辅助方法

参考地址：

自己总结如下：

常用的表单输入元素

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

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

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

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

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

Html.EditorFor(),输出<input type="text">标签

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()，输出表单验证失败时的错误信息摘要

输出超链接：@Html.ActionLink("aaa","ActionName")

但是如果我们要设定完全没有链接内容的时候，一般会是用在输出图片为主的超链接上，因为设计师想设计一个包含超链接的图片按钮，因此图片选择用a标签来输出，并通过css加上一个背景图

比如这种<标签a href="/home/index" class="lnkButton"></标签a>这样的格式输出是没法利用Html.ActionLink来做的，必须该用@Url.Action辅助方法才行

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

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using MvcTest.html
@Html.Img("", Url.Content("~/Content/logo.png"))
@Html.Img("imgLogo", Url.Content("~/Content/logo.png"), "Logo", new { border = "1px solid #666666", @class = "c01" })

生成的HTML代码：

<img alt="" src="/Content/logo.png" />
<img alt="Logo" border="1px solid #666666" class="c01" id="imgLogo" src="/Content/logo.png" />

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")

使用强类型辅助方法

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()，用来输出表单域可编辑文本框。

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

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

什么是分部视图：

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

分部视图的应用范围相当广，因为是片段的HTML显示逻辑，因此，整体重复性高或某段HTML会共同出现在多个视图页面中的网页片段，利用分部视图来开发会是不错的选择，并且基于这个优点，Ajax技术所需要的片段View也就更适合使用分部视图。

使用Html.Partial载入分部视图：

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

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

例子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已经是不同的东西了。

使用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的生命周期。

自定义HTML辅助方法

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.Web.Routing;
using System.Web.Mvc;

namespace MvcTest.html
{
    public static class HtmlExtensions
    {
        public static MvcHtmlString Img(this HtmlHelper htmlHelper, string src)
        {
            return Img(htmlHelper, String.Empty, src, String.Empty, null);
        }
        public static MvcHtmlString Img(this HtmlHelper htmlHelper, string id, string src)
        {
            return Img(htmlHelper, id, src, String.Empty, null);
        }
        public static MvcHtmlString Img(this HtmlHelper htmlHelper, string id, string src, string alt, object htmlAttributes)
        {
            TagBuilder builder = new TagBuilder("img");
            builder.GenerateId(id);
            builder.MergeAttribute("src", src);
            builder.MergeAttribute("alt", alt);
            builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

            return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
        }
    }
}

View Code

posted @ 2017-05-17 23:16 Dukezhou 阅读(136) 评论(0) 收藏举报

刷新页面返回顶部

Dukezhou

只怕不勤，不怕不精;只怕无恒，不怕无成。