MVC学习笔记五:HTML辅助方法【上】
2013-11-12 23:00
609 查看
HTML辅助方法
概要
在一些视图中,经常看到类似下面的一些代码:如:
@Html.TextBox("xxx") @Html.EditorFor(m=>m.name) @Html.CheckBox("ccc",new people()) ……这些都是 HtmlHelper类 的扩展方法,该类被称为HTML辅助方法或HTML辅助器,这里先记录下一些常用的HTML辅助器方法,以及如何自定义属于我们自己的扩展方法。
建立默认视图
首先,新建一个MVC3项目,项目名称取为“HtmlSampleApp”,为了方便检查网页里的元素,这里选择空项目。创建一个控制器"HomeController",为控制器里的Index方法添加一个默认的视图。
默认的视图代码为:
@{ ViewBag.Title = "这是默认的视图标题"; } <h2>这是一个默认的原始视图!</h2>编译运行可以看到:
然后我们右击鼠标查看网页的源码:
<!DOCTYPE html> <html> <head> <title>这是默认的视图标题</title> <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> </head> <body> <h2>这是一个默认的原始视图!</h2> </body> </html>可以发现, ViewBag.Title为我们生成了网页的title标签值,<h2>标签还是原生的没变。
认识MvcHtmlString
接下来我将视图中的代码改成如下:@{ ViewBag.Title = "这是默认的视图标题"; } <h2>这是一个默认的原始视图!</h2>运行一下,查看网页源码如下:
@{
var mvcHtmlString = MvcHtmlString.Create("Hello,World!");
}
<h3>@mvcHtmlString.ToHtmlString()</h3>
<!DOCTYPE html> <html> <head> <title>这是默认的视图标题</title> <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> </head> <body> <h2>这是一个默认的原始视图!</h2> <h3>Hello,World!</h3> </body> </html>从定义看到,MvcHtmlString的静态方法Create接受了一个常规字符串string型的参数,处理完成后返回了一个MvcHtmlString类型的实例:
namespace System.Web.Mvc { // 摘要: // Represents an HTML-encoded string that should not be encoded again. public sealed class MvcHtmlString : HtmlString { // 摘要: // Creates an HTML-encoded string using the specified text value. // // 参数: // value: // The value of the string to create . // // 返回结果: // An HTML-encoded string. public static MvcHtmlString Create(string value); } }而且可以借助父类的ToHtmlString方法将MvcHtmlString转化成用于显示的常规string:
namespace System.Web { // 摘要: // 表示不应再次进行编码的 HTML 编码的字符串。 public class HtmlString : IHtmlString { // 摘要: // 返回 HTML 编码的字符串。 // // 返回结果: // HTML 编码的字符串。 public string ToHtmlString(); } }接下来我将视图代码中的ToHtmlString方法去掉,即:
@{ ViewBag.Title = "这是默认的视图标题"; } <h2>这是一个默认的原始视图!</h2>生成的源码还是:
@{
var mvcHtmlString = MvcHtmlString.Create("Hello,World!");
}
<h3>@mvcHtmlString</h3>
<!DOCTYPE html> <html> <head> <title>这是默认的视图标题</title> <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> </head> <body> <h2>这是一个默认的原始视图!</h2> <h3>Hello,World!</h3> </body> </html>
接下来对Create参数赋予另一种格式的字符串,如下:
@{ ViewBag.Title = "这是默认的视图标题"; } <h2>这是一个默认的原始视图!</h2>返回的网页:
@{
var mvcHtmlString = MvcHtmlString.Create("Hello,World!");
}
<h3>@mvcHtmlString</h3>
@{
var mvcHtmlStringTextBox = MvcHtmlString.Create("<input type=\"text\" name=\"text1\" value=\"Hello World!\" />");
}
@mvcHtmlStringTextBox.ToHtmlString()
@mvcHtmlStringTextBox
源码是:
<!DOCTYPE html> <html> <head> <title>这是默认的视图标题</title> <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> </head> <body> <h2>这是一个默认的原始视图!</h2> <h3>Hello,World!</h3> <input type="text" name="text1" value="Hello World!" /> <br /> <input type="text" name="text1" value="Hello World!" /> </body> </html>
说明MvcHtmlString实例的ToHtmlString方法是将字符串显示出来,而如果网页中直接返回MvcHtmlString,那么如果遇到控件标签则会被解释成html控件。
那如果我故意将控件标签或属性写错会发生什么现象么,这里试一下,我将input写成inpuat,name写成nae:
@{ ViewBag.Title = "这是默认的视图标题"; } <h2>这是一个默认的原始视图!</h2>运行:
@{
var mvcHtmlString = MvcHtmlString.Create("Hello,World!");
}
<h3>@mvcHtmlString</h3>
@{
var mvcHtmlStringTextBox = MvcHtmlString.Create("<inpuat type=\"text2\" nae=\"text1\" value=\"Hello World!\" />");
}
@mvcHtmlStringTextBox.ToHtmlString()
<br />
@mvcHtmlStringTextBox
可以看到textbox控件并没有出现在网页,查看一下源码:
<!DOCTYPE html> <html> <head> <title>这是默认的视图标题</title> <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> </head> <body> <h2>这是一个默认的原始视图!</h2> <h3>Hello,World!</h3> <inpuat type="text2" nae="text1" value="Hello World!" /> <br /> <inpuat type="text2" nae="text1" value="Hello World!" /> </body> </html>可以看到,如果输错标签,那么网页上就不会出现对应的控件。应该是浏览器解析不了吧,什么都不会显示出来。
接下来我将标签改正确,type属性改成任意值:
@{ ViewBag.Title = "这是默认的视图标题"; } <h2>这是一个默认的原始视图!</h2>结果居然是:
@{
var mvcHtmlString = MvcHtmlString.Create("Hello,World!");
}
<h3>@mvcHtmlString</h3>
@{
var mvcHtmlStringTextBox = MvcHtmlString.Create("<input type=\"12345abc\" nae=\"text1\" value=\"Hello World!\" />");
}
@mvcHtmlStringTextBox.ToHtmlString()
<br />
@mvcHtmlStringTextBox
可见浏览器解析时将不确定的type类型直接默认成text。
实际上,也可以通过MvcHtmlString的构造函数来创建MvcHtmlString,如:
@{ ViewBag.Title = "这是默认的视图标题"; } <h2>这是一个默认的原始视图!</h2> @{ var mvcHtmlStringInstance=new MvcHtmlString("<input type=\"text\" name=\"text2\" value=\"Merry Christmas!\" />"); } @mvcHtmlStringInstance对应的源码:
<!DOCTYPE html> <html> <head> <title>这是默认的视图标题</title> <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> </head> <body> <h2>这是一个默认的原始视图!</h2> <input type="text" name="text2" value="Merry Christmas!" /> </body> </html>也可以将MvcHtmlString保存在集合中,利用特殊形式显示出来(这里使用遍历),如
@{ ViewBag.Title = "MvcHtmlString"; } <h2>这是一个MvcHtmlString使用示例!</h2> @{ var mvcHtmlStringList = new List<MvcHtmlString>() { new MvcHtmlString("<input type=\"text\" name=\"text1\" value=\"Merry Christmas!\" /> <br />"), new MvcHtmlString("<input type=\"text\" name=\"text2\" value=\"Merry Christmas!\" /><br />"), new MvcHtmlString("<input type=\"text\" name=\"text3\" value=\"Merry Christmas!\" /><br />"), new MvcHtmlString("<input type=\"text\" name=\"text4\" value=\"Merry Christmas!\" /><br />") }; } @foreach (var item in mvcHtmlStringList) { @item }显示:
源码:
<!DOCTYPE html> <html> <head> <title>MvcHtmlString</title> <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> </head> <body> <h2>这是一个MvcHtmlString使用示例!</h2> <input type="text" name="text1" value="Merry Christmas!" /> <br /><input type="text" name="text2" value="Merry Christmas!" /><br /><input type="text" name="text3" value="Merry Christmas!" /><br /><input type="text" name="text4" value="Merry Christmas!" /><br /> </body> </html>
认识TagBuilder
这个类用于创建HTML元素,就是类似上面的:<input type=\"text\" name=\"text1\" value=\"Merry Christmas!\" /> <br />上面是手工敲的HTML元素,使用TagBuilder只不过是用另一种形式进行HTML元素的编写。
如:
@{ ViewBag.Title = "TagBuilder"; } <h2>这是一个TagBuilder使用示例!</h2> @{ var tagbulider = new TagBuilder("input"); tagbulider.Attributes.Add("type", "text"); tagbulider.Attributes.Add("name", "text1"); tagbulider.Attributes.Add("value", "Hello,world~"); tagbulider.GenerateId("id1"); var mvchtmlString = MvcHtmlString.Create(tagbulider.ToString(TagRenderMode.SelfClosing)); } @mvchtmlString生成的网页元素是:
<!DOCTYPE html> <html> <head> <title>TagBuilder</title> <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> </head> <body> <h2>这是一个TagBuilder使用示例!</h2> <input id="id1" name="text1" type="text" value="Hello,world~" /> </body> </html>以上是简单的TagBuilder示例,有关它的详细说明见这里
扩展HtmlHelper类
下面记录一下如何扩展HtmlHelper类,首先在项目下新建一个文件夹“MyManagers”,在文件夹里新建一个类“MyExternMethods.cs”将类代码修改为:
public static MvcHtmlString MyInput(this HtmlHelper htmlhelper, string name) { TagBuilder tag = new TagBuilder("input"); tag.Attributes.Add("type", "text"); tag.Attributes.Add("name", name); tag.Attributes.Add("value", "Hello,world~"); tag.GenerateId("id1"); return MvcHtmlString.Create(tag.ToString(TagRenderMode.SelfClosing)); }然后,在Index视图文件文件中将代码修改为:
@using HtmlSampleApp.MyManagers; @{ ViewBag.Title = "HtmlHelper扩展方法示例"; } <h2>这是一个HtmlHelper扩展方法示例!</h2> @{ @Html.MyInput("myname"); }编译运行,可以看到网页源码为:
<!DOCTYPE html> <html> <head> <title>HtmlHelper扩展方法示例</title> <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> </head> <body> <h2>这是一个HtmlHelper扩展方法示例!</h2> <input id="id1" name="myname" type="text" value="Hello,world~" /> </body> </html>
然后再新建另一个扩展方法,支持lambda表达式:
public static MvcHtmlString AnotherInput<TModel, TResult>(this HtmlHelper<TModel> htmlhelper, Expression<Func<TModel, TResult>> expression) { var property = expression.Body as MemberExpression; TagBuilder tag = new TagBuilder("input"); tag.Attributes.Add("type", "text"); tag.Attributes.Add("name", property.ToString()); tag.Attributes.Add("value", "Merry Christmas~"); tag.GenerateId("id1"); return MvcHtmlString.Create(tag.ToString(TagRenderMode.SelfClosing)); }
修改视图代码:
@using HtmlSampleApp.MyManagers; @model HtmlSampleApp.Models.Sheep @{ ViewBag.Title = "Index"; } <h2>Index</h2> @{ @Html.AnotherInput(m => m.name); }
编译运行,查看源码:
<!DOCTYPE html> <html> <head> <title>Index</title> <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> </head> <body> <h2>Index</h2> <input id="id1" name="m.name" type="text" value="Merry Christmas~" /> </body> </html>看到,name的属性值就是lambda表达式的参数表达式(而不是表达式的值)。如果需要表达式的值,估计要使用反射,这里我还不清楚如何用。
待续……
相关文章推荐
- MVC学习笔记----@Helper标签(HelperMethod方法)和HtmlExtesion扩展
- 【原创】Asp.net MVC 学习笔记之-为什么使用Html.TextBox方法会出现异常?
- ASP.Net MVC开发基础学习笔记(2):HtmlHelper与扩展方法
- MVC学习之理解ModelState 和验证HTML辅助方法
- ASP.Net MVC开发基础学习笔记:二、HtmlHelper与扩展方法
- ASP.Net MVC开发基础学习笔记(2):HtmlHelper与扩展方法
- ASP.NET MVC 的常用的HTML辅助方法笔记
- 【ASP.NET MVC 学习笔记】- 14 HtmlHlper的扩展方法
- ASP.Net MVC开发基础学习笔记:二、HtmlHelper与扩展方法
- ASP.Net MVC开发基础学习笔记(2):HtmlHelper与扩展方法
- MVC学习系列4--@helper辅助方法和用户自定义HTML方法
- [转载]自定义ASP.NET MVC Html辅助方法 TagBuilder
- MVC使用jQuery从视图向控制器传递Model,数据验证,MVC HTML辅助方法小结
- 转:自定义ASP.NET MVC Html辅助方法
- ASP.NET MVC 2之强类型HTML辅助方法
- 【Spring学习笔记-MVC-18.1】Spring MVC实现RESTful风格-同一资源,多种展现:xml-json-html
- JQuery学习笔记(1):bind()、 html()、val()、text()方法
- Zp的Ext学习笔记(一)——坑爹的MVC(html中Extjs配置、proxy代理的前后台交互、json解析、后台处理传入json乱码)
- MVC强类型视图、强类型HTML辅助方法
- 自定义ASP.NET MVC Html辅助方法