<strong>一. 创建自定义Help Method</strong>
@model string
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-w idth" />
<title>Index</title>
</head>
<body>
<div>
Here are the fruits:
@foreach (string str in (string[])ViewBag.Fruits)
{
<b>@str </b>
}
</div>
<div>
Here are the cities:
@foreach (string str in (string[])ViewBag.Cities)
{
<b>@str </b>
}
</div>
<div>
Here is the message:
<p>@Model</p>
</div>
</body>
</html>
<strong>1.1 创建内联(Inline)的Help Method</strong>
@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-w idth" />
<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>
内联Help Method看上去是一个方法，但是没有返回值。
<strong>1.2 创建外部的Help Method</strong>
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 MvcHtmlString.Create(tag.ToString());
}
}
this关键字说明定义的是一个扩展方法，HtmlHelper类型的实例能够提供很多内容，如Controller，View，RouteData等。
TagBuilder常用的成员有：
InnerHtml
SetInnerText(string)
AddCssClass(string)
MergeAttribute(string, string, bool)
使用自定义的外部Help Method：
@model string
@using HelperMethods.Infrastructure
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-w idth" />
<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>
<strong>1.3 管理HelpMethods中的字符串编码</strong>
处于安全性考虑，需要防止数据被浏览器解释成标记。
必须对Help Methods的内容进行编码。
解决方式是使用Encode方法：
public static MvcHtmlString DisplayMessage(this HtmlHelper html, string msg)
{
// msg值为： This is an Html element:<input>
string encodeMessage = html.Encode(msg);
string result = string.Format("This is th message:<p>{0}<p>", encodeMessage);
return new MvcHtmlString(result);
}
<strong>1.4 使用内建的Form Help Methods</strong>
<strong>1.4.1 创建Form元素</strong>
标准的表单如下：
<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>
使用Help Methods：
@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" />
}
BeginForm有多个重载方法：
@using (Html.BeginForm("CreatePerson", "Home",
new { id = "MyIdValue" }, FormMethod.Post,
new { @class = "personClass", data_fromType = "person" }))
{
<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" />
}
调用上述BeginForm所产生的HTML的form标签为：
<form action="/Home/CreatePerson/MyIdValue" class="personClass" data-fromType="person" method="post"
<strong>1.4.2 指定Form使用的路由</strong>
首先在RouteConfig中加入一条路由：
routes.MapRoute(name: "FormRoute", url: "app/forms/{controller}/{action}");
如果需要确保使用特定的一条路由：
@using (Html.BeginRouteForm("FormRoute",
new { },
FormMethod.Post,
new { @class = "personClass", data_formType = "person" }))
{
}
产生的form标签为：
<form action="/app/forms/Home/CreatePerson" class="personClass" data-formType="person" method="post">
<strong>1.4.3 使用Input Helper</strong>
Input Html Helper.png
@using (Html.BeginRouteForm("FormRoute", new { }, FormMethod.Post, new { @class = "personClass", data_formType = "person" }))
{
<div class="dataElem">
<label>PersonId</label>
@*<input name="personId" value="@Model.PersonId" />*@
@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>
@*<input name="lastName" value="@Model.LastName" />*@
@Html.TextBox("lastName", @Model.LastName)
</div>
<input type="submit" value="Submit" />
}
上述方法需要保证第一个参数匹配第二个参数。上图中的所有input Helper都对应一个强类型的Helper。
强类型Input Html Helper.png
@using (Html.BeginRouteForm("FormRoute", new { }, FormMethod.Post, new { @class = "personClass", data_formType = "person" }))
{
<div class="dataElem">
<label>PersonId</label>
@*<input name="personId" value="@Model.PersonId" />*@
@*@Html.TextBox("personId", @Model.PersonId)*@
@Html.TextBoxFor(m => m.PersonId)
</div>
<div class="dataElem">
<label>First Name</label>
@*@Html.TextBox("firstName", @Model.FirstName)*@
@Html.TextBoxFor(m => m.FirstName)
</div>
<div class="dataElem">
<label>Last Name</label>
@*<input name="lastName" value="@Model.LastName" />*@
@*@Html.TextBox("lastName", @Model.LastName)*@
@Html.TextBoxFor(m => m.LastName)
</div>
<input type="submit" value="Submit" />
}
<strong>1.4.4 创建Select元素</strong>
Select Html Helper.png
网友评论