ASP.NET MVC 4 (六) 帮助函数

帮助函数封装一些代码,方便我们在应用程序中重用,MVC内建很多帮助函数,可以很方便的生成HTML标记。首先列出后面示例中用到的数据模型类定义:

namespace HelperMethods.Models {

    public partial class Person {
        public int PersonId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime BirthDate { get; set; }
        public Address HomeAddress { get; set; }
        public bool IsApproved { get; set; }
        public Role Role { get; set; }
    }

    public class Address {
        public string Line1 { get; set; }
        public string Line2 { get; set; }
        public string City { get; set; }
        [Display(Name = "ZIP CODE")]
        public string PostalCode { get; set; }
        public string Country { get; set; }
    }

    public enum Role {
        Admin,
        User,
        Guest
    }
}

控制器的定义:

namespace HelperMethods.Controllers {
    public class HomeController : Controller {

        public ActionResult Index() {

            ViewBag.Fruits = new string[] { "Apple", "Orange", "Pear" };
            ViewBag.Cities = new string[] { "New York", "London", "Paris" };

            string message = "This is an HTML element: <input>";

            return View((object)message);
        }

        public ActionResult CreatePerson() {
            return View(new Person { Role = Role.Guest});
        }

        [HttpPost]
        public ActionResult CreatePerson(Person person) {
            return View("DisplayPerson", person);
        }
    }
}

内联帮助函数

我们可以直接在视图中定义内联的帮助函数,使用@helper标记内联函数定义:

@model string
@{
    Layout = null;
}
@helper ListArrayItems(string[] items)
{
    foreach (string str in items)
    {
        <b>@str </b>
    }
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        Here are the fruits: @ListArrayItems(ViewBag.Fruits)
    </div>
    <div>
        Here are the cities: @ListArrayItems(ViewBag.Cities)
    </div>
    <div>
        Here is the message:
        <p>@Model</p>
    </div>
</body>
</html> 

这里定义了一个内联帮助函数ListArrayItems,后续我们可以重用它显示数值内容,内联帮助函数没有返回值。在调用ListArrayItems时我们也没有对参数做类型Cast,MVC会自动实现类型转换。

外部帮助函数

内联帮助函数虽然很方便,但是只能在视图中定义和使用,如果内联函数很复杂会让视图很难读得清楚,对此我们可以定义外部帮助函数,外部帮助函数实际上是对HtmlHelper类的方法扩展,上面的内联帮助函数改写成外部帮助函数是这样的:

namespace HelperMethods.Infrastructure {
    public static class CustomHelpers {

        public static MvcHtmlString ListArrayItems(this HtmlHelper html, string[] list) {

            TagBuilder tag = new TagBuilder("ul");
            foreach(string str in list) {
                TagBuilder itemTag = new TagBuilder("li");
                itemTag.SetInnerText(str);
                tag.InnerHtml += itemTag.ToString();
            }

            return new MvcHtmlString(tag.ToString());
        }

    }
}

HtmlHelper暴露一些属性比如RouteCollection、ViewBag、ViewContext方便我们获取当前请求相关的数据。外部帮助函数最后返回一个MvcHtmlString对象,它的内容直接写到输出响应。我们可以这样在视图中使用自定义的外部帮助函数:

@model string
@using HelperMethods.Infrastructure
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        Here are the fruits: @Html.ListArrayItems((string[])ViewBag.Fruits)
    </div>
    <div>
        Here are the cities: @Html.ListArrayItems((string[])ViewBag.Cities)
    </div>
    <div>
        Here is the message:
        <p>@Model</p>
    </div>
</body>
</html> 

我们需要引入定义外部帮助函数的命名空间,也可以定义在/Views/Web.config中供所有的视图使用。使用@html来调用外部帮助函数,它返回一个HtmlHelper类的实例,在调用外部帮助函数时也要做参数类型转化。

帮助函数中的字符串编码

在使用帮助函数时我们需要注意HTML编码的问题,先来看看下面一个问题,如果我们在控制器action中输出一些带HTML标记的字符串到视图:

public ActionResult Index() {
  string message = "This is an HTML element: <input>";
  return View((object)message);
} 

在视图中直接输出这个字符串:

@model string

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
</head>
<body>
    <p>This is the content from the view:</p>
    <div>
        Here is the message:
        <p>@Model</p>
    </div>
</body>
</html>

最后Razor输出的结果是:

...
<div>
Here is the message:
<p>This is an HTML element: &lt;input&gt;</p>
</div>
... 

<input>中的“<>”标签被编码为相应的字符而非HTML标签,这是出于安全的考虑,防止动态嵌入HTML标记甚至Javascript脚本。如果是从帮助函数中输出HTML标签又是怎样的结果呢?看下面的例子:

public static MvcHtmlString DisplayMessage(this HtmlHelper html, string msg) {
    string result = String.Format("This is the message: <p>{0}</p>", msg);
  return new MvcHtmlString(result);
}

视图文件中调用这个帮助函数输出HTML标记:

<p>This is the content from the helper method:</p>
<div style="border: thin solid black; padding: 10px">
@Html.DisplayMessage("This is an HTML element: <input>")
</div> 

这次得到的就是HTML的<input>编辑框,这是因为我们的HTML帮助函数返回的MvcHtmlString被信任为安全的,对输出的结果不再做HTML编码。如果帮助函数返回的不是MvcHtmlString,只是普通的String,比如:

public staticstring DisplayMessage(this HtmlHelper html, string msg) {
  return String.Format("This is the message: <p>{0}</p>","This is an HTML element: <input>"); } 

这时候字符串又会被HTML编码,不会输出input标签。但这样的结果是<p>标记也会被HTML编码,这不是我们想要的结果,正确的做法是:

public static MvcHtmlStringDisplayMessage(this HtmlHelper html) {
  string encodedMessage = html.Encode("This is an HTML element: <input>");
  string result = String.Format("This is the message: <p>{0}</p>", encodedMessage);
  return new MvcHtmlString(result);
} 

我们使用html.Encode()对动态内容编码,结果仍然返回MvcHtmlString对象,这样就避免了动态内容嵌入带来的安全漏洞,也使真正要显示的HTML标记被正确的渲染。

内建的Form帮助函数

我们可以直接使用HTML的Form标记创建一个表单来编辑要提交的数据:

@model HelperMethods.Models.Person
@{
    ViewBag.Title = "CreatePerson";
}
<h2>CreatePerson</h2>
<form action="/Home/CreatePerson" method="post">
    <div class="dataElem">
        <label>PersonId</label>
        <input name="personId" value="@Model.PersonId" />
    </div>
    <div class="dataElem">
        <label>First Name</label>
        <input name="FirstName" value="@Model.FirstName" />
    </div>
    <div class="dataElem">
        <label>Last Name</label>
        <input name="lastName" value="@Model.LastName" />
    </div>
    <input type="submit" value="Submit" />
</form> 

这样的问题是必须硬编码表单提交的URL,实际上我们可以使用内建的BeginForm帮助函数创建一个表单:

@Html.BeginForm()
<div class="dataElem">
    <label>PersonId</label>
    <input name="personId" value="@Model.PersonId" />
</div>
<div class="dataElem">
    <label>First Name</label>
    <input name="FirstName" value="@Model.FirstName" />
</div>
<div class="dataElem">
    <label>Last Name</label>
    <input name="lastName" value="@Model.LastName" />
</div>
<input type="submit" value="Submit" />
@{Html.EndForm();} 

BeginForm开始一个表单,EndForm结束表单,实际上更常用的写法是是使用Razor代码块:

@using (Html.BeginForm())
{
    <div class="dataElem">
        <label>PersonId</label>
        <input name="personId" value="@Model.PersonId" />
    </div>
    <div class="dataElem">
        <label>First Name</label>
        <input name="FirstName" value="@Model.FirstName" />
    </div>
    <div class="dataElem">
        <label>Last Name</label>
        <input name="lastName" value="@Model.LastName" />
    </div>
    <input type="submit" value="Submit" />
} 

@using创建一个自闭合的表单,不再需要调用EndForm。不带参数的BeginForm将表单提交到当前控制器的当前action方法,除此之外BeginForm还有很多重载形式,下面给出一些使用的例子:

@using (Html.BeginForm("CreatePerson", "Home",new { id = "MyIdValue" }, FormMethod.Post,new { @class = "personClass", data_formType="person"})) {
...
}

这里CreatePerson指定了表单要提交到的控制器,Home为要提交到的action,new { id = "MyIdValue" }为额外的路径映射参数,FormMethod.Post指定使用HTTP post方法提交数据,new { @class = "personClass", data_formType="person"}指定Form标记的属性,得到的表单HTML结果是这样的:

...
<form action="/Home/CreatePerson/MyIdValue" class="personClass" data-formType="person"
method="post">
... 

我们还可以指定表单使用的路径映射生成提交到的链接,比如我们注册了这样一条路径映射:

routes.MapRoute( name: "FormRoute", url: "app/forms/{controller}/{action}" ); 

我们使用BeginRouteForm创建表单并指定要使用的路径映射记录:

@using(Html.BeginRouteForm("FormRoute", new {}, FormMethod.Post, new { @class = "personClass", data_formType="person"})) {
...
}

最后得到的结果是:

...
<form action="/app/forms/Home/CreatePerson"class="personClass" data-formType="person" method="post">
... 

内建输入帮助函数

实际上不需要使用诸如<input>的HTML标记来创建数据的编辑框,MVC内建提供了大量的输入帮助函数:

HTML元素 示例 输出结果
Checkbox Html.CheckBox("myCheckbox", false)
<input id="myCheckbox" name="myCheckbox" type="checkbox" value="true" /> 
<input name="myCheckbox" type="hidden" value="false" />

Hidden Html.Hidden("myHidden", "val") <input id="myHidden" name="myHidden" type="hidden" value="val" /> 
Radio Html.RadioButton("myRadiobutton", "val", true) 
<input checked="checked" id="myRadiobutton" name="myRadiobutton" 
type="radio" value="val" />

Password Html.Password("myPassword", "val") Html.Password("myPassword", "val")
Text area
Html.TextArea("myTextarea", "val", 5, 20, null)


<textarea cols="20" id="myTextarea" name="myTextarea" rows="5"> 
val</textarea>

Text box  Html.TextBox("myTextbox", "val") <input id="myTextbox" name="myTextbox" type="text" value="val" /> 

每一种输入标记函数都有多种重载形式,可以提供额外的参数指定标签的特性。需要注意的是CheckBox,它会生成两条input标记,其中一个类型为hidden,这是因为浏览器在checkbox未选中时不会提交数据,这条hidden的标记使得MVC即使未在复选框未选中时也能获得相应的数据。

使用输入帮助函数前面的表单可以这样写:

@model HelperMethods.Models.Person
@{
    ViewBag.Title = "CreatePerson";
}
<h2>CreatePerson</h2>
@using (Html.BeginRouteForm("FormRoute", new { }, FormMethod.Post,new { @class = "personClass", data_formType = "person" }))
{
    <div class="dataElem">
        <label>PersonId</label>
        @Html.TextBox("personId", @Model.PersonId)
    </div>
    <div class="dataElem">
        <label>First Name</label>
        @Html.TextBox("firstName", @Model.FirstName)
    </div>
    <div class="dataElem">
        <label>Last Name</label>
        @Html.TextBox("lastName", @Model.LastName)
    </div>
    <input type="submit" value="Submit" />
} 

我们为每个输入字段指定了名称,如果指定的名称和视图模型的某个属性名称不一致,MVC将不能成功的绑定和创建模型对象,我们可以使用这种替代的方式:

我们不需要再给出字段值,MVC自动根据传入的字符串从View data、viewbag及view model中查找对应的值,比如调用@Html.TextBox("DataValue"),MVC视图从ViewBag.DataValue、@Model.DataValue获取数值,使用第一个找到的结果。更复杂点的@Html.TextBox("DataValue.First.Name"),MVC搜索路径也更多:

•  ViewBag.DataValue.First.Name
•  ViewBag.DataValue["First"].Name
•  ViewBag.DataValue["First.Name"]
•  ViewBag.DataValue["First"]["Name"]

同样,在找到第一个可用值后搜索停止,这势必造成性能上的一些损失,但是使得我们创建编辑表单更为简单。

强类型输入帮助函数

上节中每一种基本输入帮助函数都有对应的强类型形式,强类型输入帮助函数只能用在强类型视图中。

HTML元素 示例 输出结果
Checkbox Html.CheckBoxFor(x => x.IsApproved)
<input id="IsApproved" name="IsApproved" type="checkbox" value="true" /> 
<input name="IsApproved" type="hidden" value="false" />

Hidden Html.HiddenFor(x => x.FirstName) <input id="FirstName" name="FirstName" type="hidden" value="" />
Radio Html.RadioButtonFor(x => x.IsApproved, "val") input id="IsApproved" name="IsApproved" type="radio" value="val" />
Password Html.PasswordFor(x => x.Password)  <input id="Password" name="Password" type="password" /> 
Text area  Html.TextAreaFor(x => x.Bio, 5, 20, new{}) <textarea cols="20" id="Bio" name="Bio" rows="5">Bio value</textarea>
Text box Html.TextBoxFor(x => x.FirstName)  <input id="FirstName" name="FirstName" type="text" value="" />

强类型输入帮助函数使用Lambda表达式从视图模型中抽取字段或者属性,所生成的HTML结果和基本输入没有什么不同,只是帮助我们编程时减少输入的错误。上面的例子使用强类型输入函数是这样的:

@model HelperMethods.Models.Person
@{
    ViewBag.Title = "CreatePerson";
}
<h2>CreatePerson</h2>
@using (Html.BeginRouteForm("FormRoute", new { }, FormMethod.Post,
new { @class = "personClass", data_formType = "person" }))
{
    <div class="dataElem">
        <label>PersonId</label>
        @Html.TextBoxFor(m => m.PersonId)
    </div>
    <div class="dataElem">
        <label>First Name</label>
        @Html.TextBoxFor(m => m.FirstName)
    </div>
    <div class="dataElem">
        <label>Last Name</label>
        @Html.TextBoxFor(m => m.LastName)
    </div>
    <input type="submit" value="Submit" />
} 

选择元素帮助函数

MVC提供以下帮助函数用以生成HTML的select元素:

HTML元素 示例 输出结果
Drop-down list  Html.DropDownList("myList", new SelectList(new [] {"A", "B"}), "Choose") 
<select id="myList" name="myList"> 
<option value="">Choose</option> 
<option>A</option> 
<option>B</option> 
</select>


Html.DropDownListFor(x => x.Gender, new SelectList(new [] {"M", "F"}))


<select id="Gender" name="Gender"> 
<option>M</option> 
<option>F</option> 
</select>

Multiple-select Html.ListBox("myList", new MultiSelectList(new [] {"A", "B"})) 
<select id="myList" multiple="multiple" name="myList"> 
<option>A</option> 
<option>B</option> 
</select>


Html.ListBoxFor(x => x.Vals, new MultiSelectList(new [] {"A", "B"}))


<select id="Vals" multiple="multiple" name="Vals"> 
<option>A</option> 
<option>B</option> 
</select>

Select帮助函数使用SelectList或者MultilSelectList参数,两者的区别在于后者创建的允许多选的select。Select帮助函数所用的数值为IEnumerbale类型,比如我们要创建一个枚举类型的选择编辑框:

<div class="dataElem">
<label>Role</label>
@Html.DropDownListFor(m => m.Role, new SelectList(Enum.GetNames(typeof(HelperMethods.Models.Role))))
</div>

HelperMethods.Models.Role是一个C#的枚举类型,输出的结果是:

<div class="dataElem">
  <label>Role</label>
  <select data-val="true" data-val-required="The Role field is required."  id="Role" name="Role">
    <option selected="selected">Admin</option>
    <option>User</option>
    <option>Guest</option>
  </select>
</div> 

data-val和data-val-required两个特性是和数据验证相关的,后文中再来详细分析。

以上为对《Apress Pro ASP.NET MVC 4》第四版相关内容的总结,不详之处参见原版 http://www.apress.com/9781430242369

时间: 2024-10-26 14:20:44

ASP.NET MVC 4 (六) 帮助函数的相关文章

asp.net MVC helper 和自定义函数@functions小结

asp.net Razor 视图具有.cshtml后缀,可以轻松的实现c#代码和html标签的切换,大大提升了我们的开发效率.但是Razor语法还是有一些棉花糖值得我们了解一下,可以更加强劲的提升我们的开发效率,减少开发bug的出现. Razor 采用的是@ 尾巴符号,正是这个符号成就了Mvc开发效率的提升.下面了解一下和@相关的两个可以重用的helper.functions. 作为现代化的程序员,我们尽可能的遵守一个原则.不要重复你自己.所以能够重构的代码我们都会合并,但是这是对于后台代码C#

ASP.NET MVC 4 (七) 模板帮助函数

和普通HTML帮助函数不同,模板帮助函数不需要指定所用的HTML类型,MVC会推断选择合适的HTML元素,这让我们有更多的灵活性. 使用模板帮助函数 我们使用<ASP.NET MVC 4 (六) 帮助函数>中的数据模型和控制器继续后面的例子,使用模板帮助函数后改写编辑输入的视图: @model HelperMethods.Models.Person @{ ViewBag.Title = "CreatePerson"; } <h2>CreatePerson<

ASP.NET MVC API 路由生成规则

我们都知道调用ASP.NET MVC的某些API函数(诸如:Url.Action.RedirectToAction等)可以生成URL,ASP.NET MVC会根据调用API函数时传入的参数去匹配系统定义的路由(Route),然后通过匹配成功的路由去生成相应的URL. ASP.NET MVC会依次根据如下三个规则生成URL: 调用ASP.NET MVC API函数时传入的参数信息 当前请求的URL(就是Request.Url)和系统中定义路由匹配(按照路由表定义的顺序,从上往下匹配)后的匹配值 系

ASP.NET MVC 4 (八) URL链接和Ajax帮助函数

使用帮助函数创建链接 MVC提供一些帮助函数创建链接,这些函数根据路径映射表自动调整生成的URL: 说明 示例 输出结果 应用程序相对URL Url.Content("~/Content/Site.css")  /Content/Site.css 到控制器action的链接 Html.ActionLink("My Link", "Index", "Home") <a href="/">My Li

ASP.NET MVC Model绑定(六)

ASP.NET MVC Model绑定(六) 前言 前面的篇幅对于IValueProvider的使用做个基础的示例讲解,但是没并没有对 IValueProvider类型的实现做详细的介绍,然而MVC框架中给我们提供了几种默认的实现类型,在本篇中将会对NameValueCollectionValueProvider类型做一个示例讲解,了解一下MVC框架给我们提供的值提供程序是怎么处理Model值的. Model绑定 IModelBinder.自定义Model绑定器简单实现 Model绑定器在MVC

学习ASP.NET MVC(六)——我的第一个ASP.NET MVC 编辑页面

在上一文章中由Entity Framework(实体框架)去实现了对数据库的CURD操作.在本篇文章中,主要是调试修改自动生成的动作方法和视图,以及调试编辑功能与编辑功能的Book控制器. 首先,在Visual Studio中运行一下上次的应用程序,通过浏览器访问http://localhost:36878/Book.将鼠标指针移到浏览器中的一个“Edit”链接上,就可以看到这个“Edit”指向的URL.如下图红框所示. “Edit” 链接通过Html.ActionLink方法在浏览中生成指向V

七天学会ASP.NET MVC (六)——线程问题、异常处理、自定义URL

本节又带了一些常用的,却很难理解的问题,本节从文件上传功能的实现引出了线程使用,介绍了线程饥饿的解决方法,异常处理方法,了解RouteTable自定义路径 . 系列文章 七天学会ASP.NET MVC (一)--深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)--ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)--ASP.Net MVC 数据处理 七天学会ASP.NET MVC (四)--用户授权认证问题 七天学会ASP.NET MVC (五)--L

ASP.NET MVC之JsonResult(六)

前言 这一节我们利用上节所讲Unobtrusive Ajax并利用MVC中的JsonResult来返回Json数据. JsonResult 上节我们利用分部视图返回数据并进行填充,当我们发出请求需要获取数据时都是返回json,所以我们在上一节的基础上进一步学习. 既然是返回Json数据,我们接下来要在控制器上进行定义如下代码: (1)通过选择的类别名称来筛选数据 private IEnumerable<Blog> GetBlog(string selectedCategory) { var d

ASP.NET MVC 3 网站优化总结(六)压缩 HTML

压缩 html 可以去除代码中无用的空格等,这样可提高网站的加载速度并节省带宽.今天就让我们看看在 ASP.NET MVC 3 怎么实现 html 压缩,我们可通过实现 ActionFilter 来完成 html 的压缩. 其实我们在 ASP.NET MVC 3 网站优化总结(一) 使用 Gzip 压缩这篇文章中使用的就是这种方法,主要看看实现的 FilterAttribute 类: public class WhitespaceFilterAttribute : ActionFilterAtt