asp.net mvc 3.0 知識點整理 ----- (4).HtmlHelper(Html 輔助方法)介紹

標籤：style   blog   http   color   使用   strong   

　　在View視圖中，Html的類型是System.Web.Mvc.HtmlHelper<T>, 所有的輔助方法都需要和ModelState互動。那麼，ModelState是什麼呢？它是模型繫結的附屬品，並且存有模型繫結期間檢測到的所有驗證錯誤。以及使用者提交用到來更新模型的原始值。
本篇博文，我們主要來介紹下一些常用的html輔助方法的主要作用和使用方法。

1. Html.BeginForm()和Ajax.BeginForm()。

　   Html.BeginForm()：
　　同於傳統的表單提交，主要是產生表單的form值，如果表單時強型別視圖，則在提交表單的時候，會自動將表單元素name名稱與強型別視圖中的類型實體的屬性值相同的進行填充；同樣在表單中，如果我們是強型別視圖，則可以直接使用@Model.UserName將值輸到指定位置。

一般和 using{} 一起使用，否則要在form結尾添加 Html.EndForm()。　　method的方法分為：  post 和  get: 提交後，變數可以在URL地址欄中擷取。Get提交的時候，不會改變伺服器的狀態，用戶端重複向伺服器發送Get請求對伺服器不會產生負面影響。 　　post: 提交表單中的所有元素，Post請求會改變伺服器的狀態，因此用戶端重複向伺服器發送Post請求會對伺服器產生影響。使用方法：　

@using( Html.BeginForm( "方法名", "Controller名", FormMethod.提交的方法, new { target="_blank", @class = "表單的class名,方便定義樣式", @id="表單的id名，方便擷取表單元素"} )){  }

等同於：

<form action="Controller名/方法名" method ="提交的方法" class ="表單的class名" id="表單的id名" target="_blank"></form>

　　Ajax.BeginForm()：　　支援非同步表單提交，可以直接用ＭＶＣ內建的Ajax.BeginForm就可以很容易的完成一個非同步表單提交動作。

@using(Ajax.BeginForm(new AjaxOptions{　　UpdateTartetId ="UserLogOnContainer",　　HttpMethod ="Post",　　OnSuccess=""      })) //提交到當前頁面，提交方式是Post，非同步更新模組Id為UserLogOnContainer的內容塊

也可以提交到指定的controller的action上。

@using(Ajax.BeginForm("action","controller",nullnew AjaxOptions{　　UpdateTartetId ="UserLogOnContainer",　　HttpMethod ="Post",　　OnSuccess=""      })) //提交到當前指定的controller的action下，提交方式是Post，非同步更新模組Id為UserLogOnContainer的內容塊

 2. Html.ValidationSummary()

主要用來　　(1). 顯示後台 ModelState.IsValid 驗證失敗後的提示錯誤資訊。　　(2). 或者是後台驗證通過，但是某些邏輯驗證沒有通過。比如：使用者登入的時候，使用者名稱或者密碼錯誤。則可以手工添加錯誤資訊 View頁面：

@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")

Controller可以寫：

ModelState.AddModelError("", "The user name or password provided is incorrect.");

3.Html.ValidationMessage()

功能和Html.ValidationSummary()類似，當ModelState字典中認證失敗時，用來顯示錯誤提示資訊。使用方法：Controller中寫：

ModelState.AddModelError("Title","What a terrible name!");

View中使用

@Html.ValidationMessage("Title")

 4.Html.TextBox()、Html.TextArea()

主要是用來渲染 Html的textbox和textarea。使用方法： 

@Html.TextBox("title","textbox infomation") 
@Html.TextArea("textAreaTitle","textarea <br/> infomation")

等同於： 

<input type="text" id="title" name="title">        textbox information  </input>< textarea id="textAreaTitle" name="textAreaTitle">        textarea &lt; br /&gt;  information </textarea >

輸出的內容是經過html編碼的。
5.Html.Label()Label輔助方法將返回一個<label/>元素使用：Controller：

[DisplayName("Genre")]    //顯示的內容public int GenreId{get;set;}

View：

@Html.Label("GenreId")

等同於：

<label for="GenreId">Genre</label>

6.Html.DropDownList()、Html.ListBox()

兩個輔助方法都返回select元素，DropDownList只允許多單選，而ListBox則允許多選
(通過渲染的標記中的multiple特性的值設定為multiple),  後台綁定資料來源一般使用SelectListItem類型。

new SelectListItem{    Text = ”顯示內容“,    Value = "對應的值",    Selected = bool值(是否選中)}

7.Html.Editor()

用法：自訂Editor編輯器。
具體使用方法，可以參考這篇文章： http://hi.baidu.com/scorpio_jone/item/3080aefc8133c713a7298843

8.Html.Hidden()

用於渲染隱藏的輸入元素，一般用於在頁面顯示隱藏欄位。
用法：

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

=>

@Html.HiddenFor(w => w.wizardStep)

（PS：Hidden和HiddenFor具體什麼差別，後面我們會提到。）對應Html的：

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

9.Html.Password()

用於渲染密碼欄位。他除了不保留提交的值和使用密碼掩碼之外，其他基本和TextBox的輔助方法一樣。用法：

@Html.Password("UserPassword") 

=>

@Html. PasswordFor(w => w.UserPassword)

對應Html的:

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

10.Html.RadioButton()

用於渲染選項按鈕，一般都是 組合使用。如下：選擇性別（男/女）
用法：

@Html.RadioButton("Gender","Male")@Html.RadioButton("Gender","Female", true)

=>  

@Html.RadioButtonFor(m => m.Gender, "Male")@Html.RadioButtonFor(m => m.Gender, "Female")

11.Html.CheckBox()

用於渲染複選框按鈕(checked 、 unchecked)。它是 唯一 一個渲染兩個輸入元素的輔助方法。用法： 

@Html.CheckBox("isChecked")

對應於：

<input name="isChecked" id="isChecked" type="checkbox" value="true" /><input name="isChecked" type="hidden" value="false"/>

(這樣的原因是：當沒選中的時候，確保有值提交。)  12.Html.ActionLink()、Html.RouteLink()Html.ActionLink()：(1).用於渲染一個指定另外一個控制器操作的超連結，跟前面的BeginForm輔助方法一樣。用法：

@Html.ActionLink("Link Text 顯示的連結名稱", "AnotherAction 要提交的控制器方法名稱")

對應於：

<a href="/Home/AnotherAction">Link Text</a> 

(2).不同一個控制器則用：

@Html.ActionLink("Link Text", "AnotherAction", "AnotherController")

對應於：

<a href="/AnotherController/AnotherAction">Link Text</a>

(3).如果要傳遞個參數到action中，則可以用：

@Html.ActionLink("Link Text", "AnotherAction", "AnotherController", new{ ID = 123 } )

對應於：

<a href="/AnotherController/AnotherAction?ID=123">Link Text</a>

Html.RouteLink()：和Html.ActionLink() 遵循相同的模式。但是Html.RouteLink() 可以接收路由名稱，而不是接收控制器名或者方法名。如：

@Html.RouteLink("Link Text", new {action ="AnotherAction"} )

13.Html.Partial()、Html.RenderPartial()

(1). Html.Partial用於將分部渲染成字串。(2). Html.RenderPartial是直接將使用者控制項嵌入到介面上。如：

@{ Html.RenderPartial("LogOnUserControl"); } 

或 

@{ Html.RenderPartial("~/Areas/Comm/Views/Shared/LogOnUserControl.ascx"); }

兩者類似：@Html.Partial("AlbumDisplay") （寫法較方便） =>   @{ Html.RenderPartial("AlbumDisplay"); } （效能較好）  14.Html.Action()、Html.RenderAction()Html.RenderAction：通過Controller中的Action來調用使用者控制項Controller:

public ActionResult UserControl(){    return PartialView();}

View:

@Html.RenderAction("UserControl","Controller")

15.Url.Action()

Url輔助方法和Html的ActionLink和RouteLink類似。但他不是用Html標記的形式返回構建的Url，而是返回字串形式的Url。

<span>    @Url.Action("Browse", "Store", new{ genre = "Jazz" }, null )</span>

對應Html的

<span>    Store/Browse?genre=Jazz </span>

16.Url.Content()

<script src="@Url.Content("~/Scripts/Jquery-1.10.1.min.js")" type="text/javescript"></script>

　　除了上面介紹的這些Html輔助方法，還有上面提到的一些Html的For方法。那麼For方法和其他的有什麼異同之處呢？
For的方法可以結合Model實體，通過lambda運算式的方法來渲染。寫法：@Html.LabelFor(m => m.GenreId)等。

參考文獻：http://www.tuicool.com/articles/MRJNre