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

2020-11-18 07:50

阅读：697

标签：com http blog style class div img code java c log

帮助函数封装一些代码，方便我们在应用程序中重用，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: ";

            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>Indextitle>
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>@Modelp>
    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>Indextitle>
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>@Modelp>
    div>
body>
html>

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

帮助函数中的字符串编码

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

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

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

@model string

@{
    Layout = null;
}

DOCTYPE html>
html>
head>
    title>Indextitle>
head>
body>
    p>This is the content from the view:p>
    div>
        Here is the message:
        p>@Modelp>
    div>
body>
html>

最后Razor输出的结果是：

... 
div> 
Here is the message: 
p>This is an HTML element: <input>p> 
div> 
...

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

public static MvcHtmlString DisplayMessage(this HtmlHelper html, string msg) { 
    string result = String.Format("This is the message: {0}", 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的编辑框，这是因为我们的HTML帮助函数返回的MvcHtmlString被信任为安全的，对输出的结果不再做HTML编码。如果帮助函数返回的不是MvcHtmlString，只是普通的String，比如：

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

这时候字符串又会被HTML编码，不会输出input标签。但这样的结果是

标记也会被HTML编码，这不是我们想要的结果，正确的做法是：

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

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

内建的Form帮助函数

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

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

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

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

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

@using (Html.BeginForm())
{
    div class="dataElem">
        label>PersonIdlabel>
        input name="personId" value="@Model.PersonId" />
    div>
    div class="dataElem">
        label>First Namelabel>
        input name="FirstName" value="@Model.FirstName" />
    div>
    div class="dataElem">
        label>Last Namelabel>
        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"> 
...

内建输入帮助函数

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

HTML元素	示例	输出结果
Checkbox	Html.CheckBox("myCheckbox", false)
Hidden	Html.Hidden("myHidden", "val")
Radio	Html.RadioButton("myRadiobutton", "val", true)	type="radio" value="val" />
Password	Html.Password("myPassword", "val")	Html.Password("myPassword", "val")
Text area	Html.TextArea("myTextarea", "val", 5, 20, null)	<br>val
Text box	Html.TextBox("myTextbox", "val")

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

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

@model HelperMethods.Models.Person
@{
    ViewBag.Title = "CreatePerson";
}
h2>CreatePersonh2>
@using (Html.BeginRouteForm("FormRoute", new { }, FormMethod.Post,new { @class = "personClass", data_formType = "person" }))
{
    div class="dataElem">
        label>PersonIdlabel>
        @Html.TextBox("personId", @Model.PersonId)
    div>
    div class="dataElem">
        label>First Namelabel>
        @Html.TextBox("firstName", @Model.FirstName)
    div>
    div class="dataElem">
        label>Last Namelabel>
        @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)
Hidden	Html.HiddenFor(x => x.FirstName)
Radio	Html.RadioButtonFor(x => x.IsApproved, "val")	input id="IsApproved" name="IsApproved" type="radio" value="val" />
Password	Html.PasswordFor(x => x.Password)
Text area	Html.TextAreaFor(x => x.Bio, 5, 20, new{})	Bio value
Text box	Html.TextBoxFor(x => x.FirstName)

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

@model HelperMethods.Models.Person
@{
    ViewBag.Title = "CreatePerson";
}
h2>CreatePersonh2>
@using (Html.BeginRouteForm("FormRoute", new { }, FormMethod.Post,
new { @class = "personClass", data_formType = "person" }))
{
    div class="dataElem">
        label>PersonIdlabel>
        @Html.TextBoxFor(m => m.PersonId)
    div>
    div class="dataElem">
        label>First Namelabel>
        @Html.TextBoxFor(m => m.FirstName)
    div>
    div class="dataElem">
        label>Last Namelabel>
        @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")
Drop-down list	Html.DropDownListFor(x => x.Gender, new SelectList(new [] {"M", "F"}))
Multiple-select	Html.ListBox("myList", new MultiSelectList(new [] {"A", "B"}))
Multiple-select	Html.ListBoxFor(x => x.Vals, new MultiSelectList(new [] {"A", "B"}))

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

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

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

div class="dataElem"> 
　　label>Rolelabel> 
　　select data-val="true" data-val-required="The Role field is required."  id="Role" name="Role"> 
　　　　option selected="selected">Adminoption> 
　　　　option>Useroption> 
　　　　option>Guestoption> 
　　select> 
div>

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

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

ASP.NET MVC 4 (六) 帮助函数,搜素材,soscw.com

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

标签：com http blog style class div img code java c log

原文地址：http://www.cnblogs.com/duanshuiliu/p/3700670.html

上一篇：asp.net调用web service不通过添加web引用的方式怎么调用

下一篇：动态加载、移除、替换JS和CSS

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：ASP.NET MVC 4 (六) 帮助函数
文章链接：http://soscw.com/essay/21820.html

亲，登录后才可以留言！

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

内联帮助函数

外部帮助函数

帮助函数中的字符串编码

内建的Form帮助函数

内建输入帮助函数

强类型输入帮助函数

选择元素帮助函数

评论

热门文章

推荐文章

最新文章

置顶文章