MVC4-Html Helper

form搜索View中

<form action="/Home/Search" method="get">
<input type="text" name="q" />
<input type="submit" value="Search" />
</form>
控制器

public ActionResult Search(string q)
{
var albums = storeDB.Albums
.Include("Artist")
.Where(a => a.Title.Contains(q))
.Take(10);
return View(albums);
}
显示页面view

@model IEnumerable<MvcMusicStore.Models.Album>
@{ ViewBag.Title = "Search"; }
<h2>Results</h2>
<table>
<tr>
<th>Artist</th>
<th>Title</th>
<th>Price</th>
</tr>
@foreach (var item in Model) {
<tr>
<td>@item.Artist.Name</td>
<td>@item.Title</td>
<td>@String.Format("{0:c}", item.Price)</td>
</tr>
}
</table>
通过HTML helper属性值搜索

@using (Html.BeginForm("Search", "Home", FormMethod.Get)) {
<input type="text" name="q" />
<input type="submit" value="Search" />
}
@{Html.BeginForm("Search", "Home", FormMethod.Get);}
<input type="text" name="q" />
<input type="submit" value="Search" />
@{Html.EndForm();}
 

不使用html helper 

@{
var context = this.ViewContext.RequestContext;
var values = new RouteValueDictionary{
{ "controller", "home" }, { "action", "index" }
};
var path = RouteTable.Routes.GetVirtualPath(context, values);
}
<form action="@path.VirtualPath" method="get">
<input type="text" name="q" />
<input type="submit" value="Search2" />
</form>
Automatic Encoding自动编码

@Html.TextArea("text", "hello <br/> world")
编码后显示如下

<textarea cols="20" id="text" name="text" rows="2">
hello &lt;br /&gt; world
</textarea>
Making Helpers Do Your Bidding添加其他参数

@using (Html.BeginForm("Search", "Home", FormMethod.Get,
new { target = "_blank" }))
{
<input type="text" name="q" />
<input type="submit" value="Search" />
}
@using (Html.BeginForm("Search", "Home", FormMethod.Get,
new { target = "_blank", @class="editForm", data_validatable=true }))
 

解析后

<form action="/Home/Search" method="get" target="_blank">
Setting Up the Album Edit Form 编辑验证

@using (Html.BeginForm()) {
@Html.ValidationSummary(excludePropertyErrors: true)
<fieldset>
<legend>Edit Album</legend>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
Html.ValidationSummary控制器中添加

ModelState.AddModelError("", "This is all wrong!");
ModelState.AddModelError("Title", "What a terrible name!");
页面错误区域中呈现错误区域

<div class="validation-summary-errors">
<ul>
<li>This is all wrong!</li>
</ul>
</div>
Adding Inputs

@using (Html.BeginForm())
{
@Html.ValidationSummary(excludePropertyErrors: true)
<fieldset>
<legend>Edit Album</legend>
<p>
@Html.Label("GenreId")
@Html.DropDownList("GenreId", ViewBag.Genres as SelectList)
</p>
<p>
@Html.Label("Title")
@Html.TextBox("Title", Model.Title)
@Html.ValidationMessage("Title")
</p>
<input type="submit" value="Save" />
</fieldset>
}
Html.TextBox and Html.TextArea

@Html.TextArea("text", "hello <br/> world")

<textarea cols="20" id="text" name="text" rows="2">hello &lt;br /&gt; world
</textarea>

@Html.TextBox("Title", Model.Title)
<input id="Title" name="Title" type="text"
value="For Those About To Rock We Salute You" />
Html.Label

<label for="GenreId">Genre</label>
Html.DropDownList and Html.ListBox

public ActionResult Edit(int id)
{
var album = storeDB.Albums.Single(a => a.AlbumId == id);
ViewBag.Genres = new SelectList(storeDB.Genres.OrderBy(g => g.Name),
"GenreId", "Name", album.GenreId);
return View(album);
}
public ActionResult Edit(int id)
{
var album = storeDB.Albums.Single(a => a.AlbumId == id);
ViewBag.Genres =
storeDB.Genres
.OrderBy(g => g.Name)
.AsEnumerable()
.Select(g => new SelectListItem
{
Text = g.Name,
Value = g.GenreId.ToString(),
Selected = album.GenreId == g.GenreId
});
return View(album);
}
Html.ValidationMessage

[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{ var album = storeDB.Albums.Find(id);
ModelState.AddModelError("Title", "What a terrible name!");
return View(album);
}
验证区域

@Html.ValidationMessage("Title")
解析结果

<span class="field-validation-error" data-valmsg-for="Title"
data-valmsg-replace="true">
What a terrible name!
</span>
Helpers, Models, and View Data

控制器

public ActionResult Edit(int id)
{
ViewBag.Price = 10.0;
return View();
}
VIEW

@Html.TextBox("Price")
解析结果

<input id="Price" name="Price" type="text" value="10" />
控制器

public ActionResult Edit(int id)
{
ViewBag.Album = new Album {Price = 11};
return View();
}
VIEW

@Html.TextBox("Album.Price")
解析结果

<input id="Album_Price" name="Album.Price" type="text" value="11" />
Helpers and Model Metadata

@Html.Label("GenreId")
<label for="GenreId">Genre</label>
MODEL

[DisplayName("Genre")]
public int GenreId { get; set; }
Templated Helpers

@Html.EditorFor(m => m.Title)
<input id="Title" name="Title" type="text"
value="For Those About To Rock We Salute You" />
[Required(ErrorMessage = "An Album Title is required")]
[StringLength(160)]
[DataType(DataType.MultilineText)]
public string Title { get; set; }
Html.Hidden

@Html.Hidden("wizardStep", "1")

@Html.HiddenFor(m => m.WizardStep)

<input id="wizardStep" name="wizardStep" type="hidden" value="1" />
Html.Password

@Html.Password("UserPassword")

<input id="UserPassword" name="UserPassword" type="password" value="" />

@Html.PasswordFor(m => m.UserPassword)
Html.RadioButton

@Html.RadioButton("color", "red")
@Html.RadioButton("color", "blue", true)
@Html.RadioButton("color", "green")
<input id="color" name="color" type="radio" value="red" />
<input checked="checked" id="color" name="color" type="radio" value="blue" />
<input id="color" name="color" type="radio" value="green" />
@Html.RadioButtonFor(m => m.GenreId, "1") Rock
@Html.RadioButtonFor(m => m.GenreId, "2") Jazz
@Html.RadioButtonFor(m => m.GenreId, "3") Pop
Html.CheckBox

@Html.CheckBox("IsDiscounted")
<input id="IsDiscounted" name="IsDiscounted" type="checkbox" value="true" />
<input name="IsDiscounted" type="hidden" value="false" />
Html.ActionLink and Html.RouteLink

@Html.ActionLink("Link Text", "AnotherAction")
@Html.ActionLink("Link Text", "Index", "ShoppingCart")
@Html.ActionLink("Edit link text", "Edit", "StoreManager", new {id=10720}, null)
@Html.RouteLink("Link Text", new {action="AnotherAction"})
URL Helpers

<span>
@Url.Action("Browse", "Store", new { genre = "Jazz" }, null)
</span>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
type="text/javascript"></script>
Html.Partial and Html.RenderPartial

public void Partial(string partialViewName);
public void Partial(string partialViewName, object model);
public void Partial(string partialViewName, ViewDataDictionary viewData);
public void Partial(string partialViewName, object model,
ViewDataDictionary viewData);
@Html.Partial("AlbumDisplay")
@{Html.RenderPartial("AlbumDisplay "); }
@Html.Partial("AlbumDisplay ")
Html.Action and Html.RenderAction

public class MyController : Controller {
public ActionResult Index() {
return View();
}
[ChildActionOnly]
public ActionResult Menu() {
var menu = GetMenuFromSomewhere();
return PartialView(menu);
}
}
@model Menu
<ul>
@foreach (var item in Model.MenuItem) {
<li>@item.Text</li>
}
</ul>
<html>
<head><title>Index with Menu</title></head>

<body>
@Html.Action("Menu")
<h1>Welcome to the Index View</h1>
</body>
</html>
Passing Values to RenderAction

1. You can defi ne a new class, MenuOptions, as follows:
public class MenuOptions {
public int Width { get; set; }
public int Height { get; set; }
}
2. Change the Menu action method to accept this as a parameter:
[ChildActionOnly]
public ActionResult Menu(MenuOptions options) {
return PartialView(options);
}
3. You can pass in menu options from your action call in the view:
@Html.Action("Menu", new {
options = new MenuOptions { Width=400, Height=500 } })
Cooperating with the ActionName Attribute

[ChildActionOnly]
[ActionName("CoolMenu")]
public ActionResult Menu(MenuOptions options) {
return PartialView(options);
}