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为主。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
练习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的生命周期。
HTML辅助方法的更多相关文章
- MVC学习系列4--@helper辅助方法和用户自定义HTML方法
在HTML Helper,帮助类的帮助下,我们可以动态的创建HTML控件.HTML帮助类是在视图中,用来呈现HTML内容的.HTML帮助类是一个方法,它返回的是string类型的值. HTML帮助类, ...
- 《ASP.NET MVC高级编程(4版)》读书笔记(5)表单和HTML辅助方法
5.1 表单使用 5.1.1 action 和 method 特性 <form action="/Home/Index"> <input name=&qu ...
- MVC辅助方法
我相信很多人虽然经常用mvc去做一些东西,但是可能很少使用mvcHtml辅助方法 首先我们要创建一个mvc项目 二创建一个HtmlHelper文件夹 三编写文件 四调用辅助方法 调用辅助方法 和使用其 ...
- ASP.NET 中HTML和Form辅助方法
Form辅助方法 Form最重要的属性就是action和method,action指明form中的数据被提交到哪里,method指明用什么方法,默认为GET,下面是一个简单的例子: <form ...
- MVC之路随记3--Html辅助方法
概述:MVC中使用@Html.MethodName 来做很多Html的事情,简化了开发工程量,使用方便,并且易于理解 详细方法: 1.表单 <form action="/Home/Se ...
- 表单和 HTML 辅助方法– ASP.NET MVC 4 系列
这里有一个疑问,诸如在文本编辑器中输入 HTML 元素如此简单的任务,也需要任何帮助吗?的确,输入标签名称是很容易的事,但是确保 HTML 页面链接中的 URL 指向正确的位置.表单元素 ...
- MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱
网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...
- MVC4.0 扩展辅助方法
新年第一天上班,写个博客开头吧! 在MVC中,辅助类是很常见的,比如说,Html.TextBox().Html.DropDownListFor()等,这些都是微软帮我们封装好的,可以直接调用的,它们解 ...
- Linux共享库 socket辅助方法
//sockhelp.h#ifndef _vx #define _vx #ifdef __cplusplus extern "C" { #endif /** * readn - 读 ...
- 用MVC的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”
接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...
随机推荐
- SQL Server 索引自动组织维护
公司的一个产品中的数据库,几个热点表因为主键和索引设计不合理,造成索引碎片过大,影响性能. 我尝试新建了一个索引碎片整理的定时任务,用于维护索引锁片和统计信息. 具体的过程如下: 本文原创,转发请表明 ...
- InnoDB中锁的算法(3)
Ⅰ.隐式锁vs显示锁 session1: (root@localhost) [test]> show variables like 'tx_isolation'; +-------------- ...
- Q: Is Consul eventually or strongly consistent?
强一致 最终一致 Frequently Asked Questions - Consul by HashiCorp https://www.consul.io/docs/faq.html Q: Is ...
- [Day15]常用API(Object类、String类)
1.Java的API(API: Application(应用) Programming(程序) Interface(接口)) Java API是JDK中提供使用的类,类已经将底层代码进行封装 在JDK ...
- PrimeNG之Validation
Validation ----primeng输入组件显示验证错误时自动标记为无效值. demo code export class ValidationDemo implements OnInit { ...
- Spring Boot 2.0 新特性和发展方向
以Java 8 为基准 Spring Boot 2.0 要求Java 版本必须8以上, Java 6 和 7 不再支持. 内嵌容器包结构调整 为了支持reactive使用场景,内嵌的容器包结构被重构了 ...
- vim diff 使用
1. 可以在用户目录下编辑.vimrc 文件,设置vim格式.如无该文件,添加即可vim ~/.vimrc 内容自己添加set ts=4 "set tabstop=4set nu &q ...
- SQL Server 2008中的CDC(Change Data Capture)功能使用及释疑
SQL Server 2008中的CDC(Change Data Capture)功能使用及释疑 关键词:CDC 原文:http://www.cnblogs.com/chenxizhang/arc ...
- PHP多维数组转一维
目录 1. array_column函数 2. array_walk函数 3. array_map函数 4. foreach循环 5. array_map变种 参考:https://www.awaim ...
- openshift 容器云从入门到崩溃之四《配置用户验证》
1.配置本地用户 之前安装的时候选择了htpasswd验证方式 先创建用户 # htpasswd -c /etc/origin/master/htpasswd admin 授权为集群管理员 # oc ...