MVC5 + EF6 + Bootstrap3 (9) HtmlHelper用法大全(下)
MVC5 + EF6 + Bootstrap3 (9) HtmlHelper用法大全(下)
上一节:MVC5 + EF6 + Bootstrap3 (8) HtmlHelper用法大全(上)
下一节:MVC5 + EF6 + Bootstrap3 (10) 数据查询页面
源码下载:点我下载
目录:
- 说明
- Form表单
- 使用TagBuilder创建自定义标签
- 强类型HtmlHelper
- LabelFor数据标签
- DisplayFor 和 EditorFor显示和编辑Model数据
- 思考题
说明
本节接续上一节MVC5 + EF6 + Bootstrap3 (8) HtmlHelper用法大全(上),继续讨论HtmlHelper的用法。
下面所有HtmlHelper代码均写在Views文件夹下DefaultController文件夹里的DefaultAction.cshtml文件中。这个View文件对应一个名为DefaultController的控制器。
Form表单
在HtmlHelper中生成表单Form会用到两个函数:BeginForm和EndForm。有两种方法可以生成<form>...</form>表单,使用方法如下所示:
@using (Html.BeginForm("actionName", "controllerName", FormMethod.Get)) {@Html.TextBox("NameId")<input type="submit" value="SubmitButton" /> }@{Html.BeginForm("actionName", "controllerName", FormMethod.Post);}@Html.TextBox("NameId")<input type="submit" value="SubmitButton" /> @{Html.EndForm();}
我们在Form中写入了一个TextBox和一个提交按钮。TextBox的HtmlHelper用法上一节已经讲过,而比较奇特的是提交按钮没有对应的HtmlHelper函数来生成,需要用HTML语言直接写。后面我们会解决这个问题。
仔细看上面两种生成Form方法的区别:第一种方法将Html.BeginForm()函数放入@using (){}结构中这种方法可以直接生成form的开始标记和结束标记;第二种方法先写Html.BeginForm()函数生成开始标记,再在最后写Html.EndForm()函数生成结尾标记。这两种方法生成的结果是一样的。结果如下:
<form action="/controllerName/actionName" method="get"> <input id="NameId" name="NameId" type="text" value="" /> <input type="submit" value="SubmitButton" /> </form> <form action="/controllerName/actionName" method="post"> <input id="NameId" name="NameId" type="text" value="" /><input type="submit" value="SubmitButton" /> </form>
从运行结果可以看出BeginForm()的第一个参数指定Action的名字,第二个参数指定Controller的名字,第三个参数指定提交的时候是用Post方法还是Get方法。上面代码中第一个Form用的是Get方法,第二个Form用的是Post方法。
使用TagBuilder创建自定义标签
前面说到没有提交按钮对应的HtmlHelper函数,那么我们就自己动手创建一个。
上帝关上了一扇门,就一定会为我们打开一扇窗。这个窗户就是TagBuilder。顾名思义,TagBuilder就是标签建造器,我们就用它来建造属于我们自己标签生成函数。
首先在项目中创建一个Classes文件夹,用来存放我们将要创建的类。在这个文件夹中创建一个名为HtmlExtensions.cs的类,这个类名不是强制性的,写什么都可以。在这个类中写入如下代码:
using System.Web.Mvc; public static class HtmlExtensions {/// <summary>/// 自定义一个@html.Submit()/// </summary>/// <param name="helper"></param>/// <param name="value">value属性</param>/// <returns></returns>public static MvcHtmlString Submit(this HtmlHelper helper, string value){var builder = new TagBuilder("input");builder.MergeAttribute("type", "submit");builder.MergeAttribute("value", value);builder.ToString(TagRenderMode.SelfClosing);return MvcHtmlString.Create(builder.ToString());} }
我们来解读一下上面的代码:
- 首先,要用TagBuilder就要引入System.Web.Mvc类库。
- 接着我们看这个函数的参数,this HtmlHelper helper保证这个方法会被添加到HtmlHelper中,string value对应将来的提交按钮显示的文字,也就是value属性。
- var builder = new TagBuilder("input");使我们创建的标签名字设为input。
- MergeAttribute函数给创建出的元素添加属性,如MergeAttribute("type", "submit") 就是加入 type="submit" 属性。
- TagRenderMode.SelfClosing使生成的标签自我关闭,也就是说有<input />这种形式。
- 最后用MvcHtmlString作为返回值是为了使返回值不被转义,比如"<"不会被转成"<"。这是我们不想看到的。
然后我们在View中写入下面代码调用刚才写好的函数:
@Html.Submit("SubmitButton")
生成结果如下:
<input type="submit" value="SubmitButton" />
可以看到我们在函数中所设置的标签名、属性、自包含都做到了。这样我们就成功生成了自创的submit按钮。
强类型HtmlHelper
HtmlHelper有强类型和弱类型之分。前面所介绍的这些函数统统都是弱类型的。那么强类型和弱类型有什么区别?简单点说就是强类型会用到MVC中的Model,而弱类型不用。
Htmlhelper中几乎每一个弱类型函数都会对应一个强类型函数,它们的对应关系是强类型函数名比弱类型函数名多了一个For。比如TextBox()是一个弱类型函数,那么其对应的强类型函数就是TextBoxFor()。
后面的部分我们需要借助Model来展示代码,因此在解决方案中的Models文件夹中创建一个简单的Model,就叫Simple类。文件名为Simple.cs代码如下:
namespace SlarkInc.Models {public class Simple{public string Name{ get; set; }} }
既然是一个简单的Model,那我们就只给它一个属性:Name。
创建好这个Model之后我们就可以在Controller中给这个Model初始化并赋值,并把它传递给View来为我们的强类型HtmlHelper做准备。编辑DefaultControllerController.cs文件,写入如下代码:
using System.Web.Mvc; using SlarkInc.Models;namespace SlarkInc.Controllers {public class DefaultControllerController : Controller{// GET: /DefaultController/public ActionResult DefaultAction(){Simple s = new Simple();s.Name= "Slark";return View(s);}} }
图中黄色部分初始化Model,给Model赋值并将Model传递给View。
下面我们就在View中用强类型HtmlHelper将Model中的数据显示出来。从上面的代码可以看出DefaultController调用的是名为DefaultAction的View。因此我们在Views文件夹下找到DefaultController文件夹,编辑其中的DefaultAction.cs文件。在文件第一行加入如下代码:
@model SlarkInc.Models.Simple
这行代码表示这个View用的是Simple这个Model。
然后在文件中插入如下代码:
@Html.TextBoxFor(m =>m.Name)
这就是我们的强类型HtmlHelper函数的一个例子TextBoxFor。这个函数只有一个参数m =>m.Name。这里的m可以换成其他名字,它都指代我们这里的Model。TextBoxFor的这个参数的意思就是取Model的Name属性。由于我们在Controller中初始化了这个值,那么这个值应该是"Slark"。运行结果如下。
<input id="Name" name="Name" type="text" value="Slark" />
由上面结果可以看出,属性的名字Name被赋值给了这个元素的id和name,属性值Slark赋值给了value属性。这样我们就完成了一个简单的强类型HtmlHelper。
LabelFor数据标签
强类型的一大好处是我们可以通过改动Model而改变这个Model在所有View中的显示。如下图的一个输入框:
怎么样可以通过改动Model来改动输入框前面的文字呢?这里我们就要用到DataAnnotations,有人叫它元数据,或者叫数据批注。简单来说它就是对数据的描述。之后用HtmlHelper的LabelFor就可以读到这个信息并显示出来。我们把之前的Simple类写成如下样子:
using System.ComponentModel.DataAnnotations; namespace SlarkInc.Models { public class Simple{[Display(Name = "Name")] public string Name { get; set; }[Display(Name = "E-mail")] public string Email { get; set; }} }
代码中黄色的部分就是我们为了使用元数据而增加的代码。第一行的部分是引入了要使用元数据所需要的类库。[Display(Name = "E-mail")]这一行表示当要显示这个变量的名字的时候我们显示"E-mail"这个字符串。HtmlHelper函数LabelFor()正是从这里获取到需要显示的字符串。
在DefaultController中我们要给Email变量赋值,代码如下:
using System.Web.Mvc; using SlarkInc.Models;namespace SlarkInc.Controllers {public class DefaultControllerController : Controller{// GET: /DefaultController/public ActionResult DefaultAction(){Simple s = new Simple();s.Name = "Slark";s.Email = "xxx@163.com";return View(s);}} }
在对应的View中写下如下代码:
@Html.LabelFor(m => m.Email) : @Html.TextBoxFor(m => m.Email)
黄色标记的LabelFor函数获得的参数是Simple类的Email属性,LabelFor函数就会去寻找Model中对应Email的属性的Display元数据,进而生成结果如下:
<label for="Email">E-mail</label> : <input id="Email" name="Email" type="text" value="xxx@163.com" />
看生成的结果LabelFor函数会生成<Label>标签,并且其属性for的值对应变量名"Email",而标签的内部文字InnerText就是Display元数据的Name属性对应的值"E-mail"。
DisplayFor 和 EditorFor显示和编辑Model数据
元数据在ASP.NET MVC的一个最主要的应用就是可以通过Model来控制数据显示和修改时所生成的HTML元素的类型。在HtmlHelper中DisplayFor是用来显示数据的,而EditorFor是用来编辑数据的。它们都会根据元数据对数据的描述生成不同类型的HTML元素。
将Simple改成如下代码:
using System.ComponentModel.DataAnnotations; namespace SlarkInc.Models { public class Simple{[Display(Name = "Name")] public string Name { get; set; }[Display(Name = "E-mail")][DataType(DataType.EmailAddress)] public string Email { get; set; }} }
代码中黄色部分是对Email数据类型的描述。它的数据类型是邮件地址EmailAddress。在View中写下如下代码:
@Html.DisplayFor(m => m.Email) @Html.EditorFor(m => m.Email)
DisplayFor和EditorFor都将Model的Email属性作为自己的参数。运行结果如下:
对应的代码如下:
<a href="mailto:xxx@163.com">xxx@163.com</a> <input class="text-box single-line" id="Email" name="Email" type="email" value="xxx@163.com" />
从结果中可以看到由于数据类型是EmailAddress,其在显示数据时就生成了一个发送邮件的超链接。在编辑数据时就生成了一个email专用的输入框<input type="email">。
思考题
学而不思则罔,思而不学则殆。这里出几个思考题供大家检验学习效果。
1.HtmlHelper生成Form有几种方法?分别怎么写?
2.如何自定义一个能生成<img>元素的HtmlHelper函数。
3.LableFor、DisplayFor、EditorFor函数用法有什么异同?
本篇到此结束。HtmlHelper包含的东西比较多,还有一些东西没有介绍,如果大家有兴趣我可以继续拓展。欢迎讨论。喜欢的话就推荐一下吧!
MVC5 + EF6 + Bootstrap3 (9) HtmlHelper用法大全(下)相关推荐
- MVC5 + EF6 + Bootstrap3
MVC5 + EF6 + Bootstrap3 (16) 客户端验证 摘要: 本节介绍MVC客户端验证.阅读全文 posted @ 2015-05-26 07:15 Slark.NET 阅读(6333 ...
- MVC5 + EF6 + Bootstrap3 (14) 分部视图PartialView
Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-partialview.html 系列教程:MVC5 + E ...
- MVC中HtmlHelper用法大全
MVC中HtmlHelper用法大全参考 解析MVC中HtmlHelper控件7个大类中各个控件的主要使用方法(1) 2012-02-27 16:25 HtmlHelper类在命令System.Web ...
- C# ASP.NET MVC HtmlHelper用法大全
C# ASP.NET MVC HtmlHelper用法大全 (原文) HTML扩展类的所有方法都有2个参数: 以textbox为例子 public static string TextBox( thi ...
- MVC HtmlHelper用法大全
http://www.cnblogs.com/jyan/archive/2012/07/23/2604474.html HtmlHelper用来在视图中呈现 HTML 控件. 以下列表显示了当前可用的 ...
- ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用
ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 原文:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 文章来源: Slark.N ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统-WebApi的用法与调试
ASP.NET MVC5+EF6+EasyUI 后台管理系统-WebApi的用法与调试 1:ASP.NET MVC5+EF6+EasyUI 后台管理系统(1)-WebApi与Unity注入 使用Uni ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(1)-前言与目录(持续更新中...)
开发工具:VS2015(2012以上)+SQL2008R2以上数据库 您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 日程管理 http:// ...
- MVC5+EF6 入门完整教程四
MVC5+EF6 入门完整教程四 原文:MVC5+EF6 入门完整教程四 上篇文章主要讲了如何配置EF, 我们回顾下主要过程: 创建Data Model à 创建Database Context à创 ...
最新文章
- 消息中间件和JMS介绍
- 六级核心词汇pdf_人民日报总结的500个四六级【核心词汇】,祝你一次必过!
- 使用GDI+绘制高质量图和字体(2)
- 4. 怎么在生活中提升专注力?
- sift算法c语言实现
- Linux下使用rsync最快速删除海量文件的方法分享
- 齿轮计算机在线,齿轮参数计算器(萝卜花齿轮计算工具)9.5 中
- 2款QQ空间首页好看的psd源码
- MATLAB 图片压缩一简易方法
- STM32 触摸屏触摸功能
- 什么是数据科学家与数据科学
- 简单手机短信发送软件
- 免费阅读正在杀死腾讯阅文?
- java eav_entity-framework-4 – 实体框架4和ddd中的EAV
- ubuntu 安装bazel
- Ansj添加停用词表
- VMware虚拟机 扩展Ubuntu系统磁盘空间方法
- python seed用法
- 将baml 转换为xaml_将XAML实施SAML
- 我爬取了杭州的数据分析招聘岗位(内附原始数据)