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);

}

 
复制代码

你可能感兴趣的:(html)