MVC 之HTML辅助方法

顾名思义,HTML辅助方法(HTML Helper)就是用来辅助产生HTML之用,在开发View的时候一定会面对许多HTML标签,处理这些HTML的工作非常繁琐,为了降低View的复杂度,可以使用HTML辅助方法帮助你产生一些HTML标签或内容,因这些HTML标签都有固定标准的写法,所以将其包装成HTML辅助方法,可让View开发更快速,也可以避免不必要的语法错误。

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

通过HTML辅助方法的讲解,可以有效协助你面对常见但又繁琐的HTML编写工作,例如,超链接、表单声明(<form>)、表单元素(<input>、<select>、<textarea>)、HTML编码与解码、载入其他分部视图页面(Partial View Page)、显示Model验证失败的错误信息等,撰写ASP.NET MVC一定少不了它。

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

      在开发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#正确编译。

此外,如果要输出HTML属性包括减号(-)时,例如data-value属性,应使用“_”下划线代替。

 @Html.ActionLink("链接文字","ActionName","ControllerName", null,new{@class="btnLink"})

5个参数

使用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为主。

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

(1)产生表单元素

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

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

@using(Html.BeginForm("About","Home"))  //参数1:actionName 参数2:controllerName
{@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即可。

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

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

原文链接:https://www.cnblogs.com/yytesting/p/4987633.html

如果这篇文章对你有帮助的话,评论或推荐下吧!(转载请注明原作者!)

MVC 之HTML辅助方法相关推荐

  1. [转]自定义ASP.NET MVC Html辅助方法

    本文转自:http://www.cnblogs.com/myshell/archive/2010/05/09/1731269.html 在ASP.NET MVC中,Html辅助方法给我们程序员带来很多 ...

  2. html辅助方法以及常用属性值,ASP.NET MVC 2博客系列之一:强类型HTML辅助方法

    这是我针对即将发布的ASP.NET MVC 2所撰写的贴子系列的第一篇,这个博客贴子将讨论 ASP.NET MVC 2中新加的强类型HTML辅助方法. 现有的HTML辅助方法 ASP.NET MVC ...

  3. ASP.NET MVC如何使用Ajax的辅助方法

    前言:前面我们已经简单的介绍过了MVC如何Jquery,因为我们如果使用Ajax的话必须要了解Jquery,这篇博客我们将大致了解一下ASP.NET MVC如何使用Ajax的辅助方法,此博客是我的读书 ...

  4. 【ASP.NET MVC4】第六课:在MVC 中使用 HTML 辅助方法输出表单

    知识点:HTML辅助方法.表单的使用.获取表单数据 在 Razor 视图中,除了使用 HTML 标签外,ASP.NET MVC 也提供了生成 HTML 代码的简单.有效的方式,以帮助我们提高开发视图的 ...

  5. 第四章 ASP.NET MVC HTML辅助方法生成表单标签具体用法

    (1.)使用HTML辅助方法在试图文件创建表单,参考代码如下: 代码中使用using语法将其包含,以确保form标签在using语句结尾时输出form标签,如果不适用using语句,则需要手动调用 @ ...

  6. 第四章 ASP.NET MVC (表单和HTML辅助方法)

    一.表单的两大属性特性 (1.)action属性特性 action用以告知web浏览器信息发往哪里,所以action值指定的是一个URL,这里的URL可以是相对路径,也可以是绝对路径 (2.)meth ...

  7. html辅助方法引入验证类后怎么写,Html辅助方法

    ASP.NET MVC3 读书笔记二(Html辅助方法) 在实际的程序中,除了在View中展示数据外,还需要在View与后台的数据进行交互,在View中我就需要用的表单相关的元素: 在MVC3框架中, ...

  8. ASP.NET MVC 5 - 验证编辑方法(Edit method)和编辑视图(Edit view)

    在本节中,您将验证电影控制器生成的编辑方法(Edit action methods)和视图.但是首先将修改点代码,使得发布日期属性(ReleaseDate)看上去更好.打开Models \ Movie ...

  9. android屏幕密度高度,Android获取常用辅助方法(获取屏幕高度、宽度、密度、通知栏高度、截图)...

    我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现.下面就分享一下Android中常用的一些辅助方法: 获取屏幕高度: /** * 获得屏幕高度 * @para ...

最新文章

  1. 试图加载格式不正确的程序。 (异常来自 HRESULT:0x8007000B)
  2. go 自定义error怎么判断是否相等_Go Web 小技巧(二)GORM 使用自定义类型
  3. Scala入门到精通——第二十七节 Scala操纵XML
  4. 用rem来做响应式开发
  5. python最好用的助手_推荐5款好用的Python工具
  6. php 获取系统环境变量,java读取操作系统环境变量
  7. Java 基础(条件结构)
  8. pll制作分频器_PLL学习过程记录
  9. ImageMagick命令执行漏洞(CVE-2016–3714)利用及测试
  10. python numpy安装步骤-python的numpy模块安装不成功简单解决方法总结
  11. 为什么找不到使用rem的网站
  12. java集成agent作用_javaagent 基于 javaagent 开发的 APM 工具,收集方法的执行次数和执行时间,定时输出成 json 格式 @codeKK Android开源站...
  13. Gradle之全局配置
  14. 金蝶k3服务器维护,金蝶k3问题处理-完整版.docx
  15. Word中插入图表目录
  16. 如何打开计算机共享文件,如何打开共享文件 局域网文件共享的图文方法
  17. 【CSRF漏洞-01】跨站请求伪造漏洞靶场实战
  18. 《梦里花落知多少》-三毛
  19. 目前已确认 Windows 10 KB5015807 更新中存在的问题
  20. 一般程序员的工资是多少?影响工资的因素有哪些?

热门文章

  1. php zip.so 编译出错,php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法...
  2. 分类模型的评估方法-召回率(Recall)
  3. 【赠书】掌握人工智能重要主题,深度强化学习实践书籍推荐
  4. 【AI-1000问】Face detection、alignment、verification、identification(recognization) 你能分的清楚吗?
  5. 中国汽车零部件行业需求预测及投资前景建议报告2022-2028年版
  6. Windows 2008-IIS 7.0-SSL操作大全
  7. 迈好“转战”第一步-丰收节交易会·陶以平: 谋定乡村振兴
  8. 冒泡排序和其两种优化
  9. 数据库-数据类型及主键外键
  10. LeetCode Design TinyURL