《ASP.NET MVC4 WEB編程》學習筆記------HtmlHelper

本文轉載自powerzhang，若是給您帶來不便請聯繫博主。

在實際的程序中，除了在View中展現數據外，還須要在View與後臺的數據進行交互，在View中我就須要用的表單相關的元素；

　　在MVC3框架中，咱們能夠用到Html的相關輔助方法進行對錶單的輸出；

　　視圖中Html的類型是System.Web.Mvc.HtmlHelper<T>

一、  Html.BeginForm()

　　主要是生成表單的form值，若是表單時強類型視圖，則在提交表單的時候，會自動將表單元素name名稱與強類型視圖中的類型實體的屬性值相同的進行填充；

　　一樣在表單中，若是咱們是強類型視圖，則能夠直接使用@Model.UserName將值輸到指定位置；

 

二、  Html.ValidationSummary()

　　通常咱們在controller中選定的action下添增強類型的create視圖，都會在表單下生成Html.ValidationSummary(true);這樣的東西，傳true和false有什麼區別了？

　　ValidationSummary輔助方法能夠用來顯示ModelState字典中全部驗證錯誤的無序列表。使用bool類型參數(值爲true的狀況)來告知輔助方法排除屬性級別錯誤；

　　具體示例解釋以下

public ActionResult SelStudent() {
            ModelState.AddModelError("", "this is all wrong");
            ModelState.AddModelError("UserName", "is Required");
            Student s = new Student();
            s.UserName = "regicide";
            return View(s);
        }

View Code

　　若是在頁面使用Html.ValidationSummary(true); 則is required會顯示在對應的UserName文本框的下面；若是使用false則isRequired會顯示到this is all wrong下面

　　

　　注：若是要顯示出對應的樣式，引入/Content/Site.css便可

 

三、  Html.TextBox()、Html.TextArea()

　　此方法主要爲生成<input type=’text’ />和<textarea>< textarea />

@Html.TextBox("title","",new {@style="background-color:red",ReadOnly="ReadOnly"})

　　就會生成以下的html標籤；若是你使用@Html.Editor方法則不會提供傳遞html元素的相關重載；

<input ReadOnly="ReadOnly" id="title" name="title" style="background-color:red" type="text" value="" />

　　注：若是在強類型視圖中按照以下定義

public ActionResult SelStudent() {
            Student s = new Student();
            ViewBag.UserName = "free";
            s.UserName = "regicide";
            return View(s);
        }

　　而後經過@Html.TextBox("UserName")輸出，則<input type=’text’ />元素中默認值是free而不是regicide，由於在頁面的取值中，若是不強行指定取Model的UserName則會默認取ViewBag的動態值UserName

　　若是咱們給一個文本框加本身的屬性好比new{data_my1=’free’}此時被編譯後是data-my1=’free’,注意下劃線和短橫線的區別；

 

四、  Html.Label()

　　在咱們的使用中，不多使用label的標籤，label標籤視乎並不經常使用；其實lable的妙用在於

<label for="Age">Age</label>
<input class="text-box single-line" data-val="true" data-val-number="字段 Age 必須是一個數字。" id="Age" name="Age" type="text" value="" />

　　當咱們點擊label標籤(age)的時候，光標會自動定位到id位age的文本框；因此Html.label()主要生成<label for="Age">Age</label>的label

 

五、  Html.DropDownList()

　　下拉框的用法，主要是用於在後臺查詢出的IEnumerable進行數據綁定；

　　示例爲：　　

public ActionResult SelStudent() {
            List<SexSelect> sss = new List<SexSelect>();
            SexSelect ss = new SexSelect();
            ss.Id = 0;
            ss.Text = "男";
            sss.Add(ss);
            ss = new SexSelect();
            ss.Id = 1;
            ss.Text = "女";
            sss.Add(ss);
            var t = sss.AsEnumerable();
            ViewBag.Sex = new SelectList(t, "Id", "Text");
            return View(s);
        }

View Code

 

@Html.DropDownList("Sex")就會自動綁定後臺指定的t顯示到下來框；

 

六、  Html.ValidationMessage()

　　當ModelState字典中出現錯誤時，可使用此方法來顯示相應的錯誤；此用法在第二點中(Html.ValidationSummary())略有提到,後面講模型驗證還會繼續的說明此用法

 

七、  Html.Editor()

　　此方法在生成html元素最爲特殊，由於上面的根據名稱能夠知道大體的html元素控件；而editor則不同了；

　　Editor方法能夠經過數據註解來改變生成Html，好比我在實體上面指定「DataType[DataType.MultitineText]」,則Editor則會自動生成爲<textarea></textarea>標籤；

　　而且Eidtor方法還支持模板的重載；

　　在Controller對應的文件下面添加子文件夾，命名爲「EditorTemplates」(強命名)，而後添加一個名爲「DateTime.cshtml」(強命名)，並寫以下代碼：

@{
    Layout = null;
}
@Html.TextBox("",ViewData.TemplateInfo.FormattedModelValue,new {@class="text-box single-line",data_datepicker="true",data_test="regicide"})

　　則在強類型實體中定義爲DateTime類型的字段經過Editor生成就會變成以下：

<input class="text-box single-line" data-datepicker="true" data-test="regicide" id="Birthday" name="Birthday" type="text" value="" />

　　這就是Editor的根據模型進行智能生成的好處；固然若是有的部分不想使用DateTime.cshtm中的方式進行生成html,能夠將DateTime.cshtml進行改名，改名後，使用@Html.Editor("Birthday","SpecialDateTime")「SpecialDateTime」爲視圖名稱，這樣也能夠進行生成.

 

八、  Html.Hidden()

Hidden就是生成隱藏文本域的方法；好比：

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

就會生成一個隱藏文本域

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

MVC3中若是使用強類型隱藏文本域的做用就很大，好比一個更新的強類型視圖，一共有5個字段，你只更新3個字段，那麼就須要把另外兩個字段放在隱藏文本域中，不然的話，強類型提交到後臺就就只會賦值頁面綁定的3個字段，另外2個會丟失

 

九、  Html.Password()

這個比較簡單，用法跟hidden同樣，就是會生成一個password類型的input

<input id="pass" name="pass" type="password" value="123456" />

 

十、Html.RadioButton()

RadioButton主要是生成一組來供用戶選擇，根據name來肯定一組按鈕；

@Html.RadioButton("color", "red")<text>red</text>
@Html.RadioButton("color", "blue",true)<text>blue</text>
@Html.RadioButton("color", "green")<text>green</text>

就會生成爲：

<input id="color" name="color" type="radio" value="red" /><text>red</text>
<input checked="checked" id="color" name="color" type="radio" value="blue" /><text>blue</text>
<input id="color" name="color" type="radio" value="green" /><text>green</text>

 

十一、Html.CheckBox()

這個輔助方法比較特殊一點點，CheckBox生成元素會生成2個input元素；

@Html.CheckBox("sel",true)

生成的源代碼爲：

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

一個checked一個hidden；

它渲染兩個輸入元素的主要緣由是，HTML規範中規定了瀏覽器只提交選中的複選框的值，在上面的例子中即便sel的checked沒有被選中，也會被提交一個false到後臺；

 

十二、  Html.ActionLink()、Html.RouteLink()

看到這兩個，好像沒怎麼想到跟html中的什麼東西對應；從字面上理解就是生成link的東西；

ActionLink主要是渲染一個指向另一個控制器操做的超連接。

好比：

@Html.ActionLink("超連接","SelStudent","Home")

就會生成爲：

<a href="/Home/SelStudent">超連接</a>

在ActionLink中還重載了一些能夠傳遞htmlAttributs的方法；

RouteLink和ActionLink差很少，可是RouteLink能夠接收路由名稱而不接收控制器名稱和操做名稱。

好比上面的ActionLink的例子能夠轉換爲

@Html.RouteLink("超連接",new {action="SelStudent"})

固然，還有一個區別就是能夠直接指定路由名稱；

要實現上面的actionlink效果還能夠寫成

@Html.RouteLink("超連接","Default")

Default是Global啓動的時候註冊的一個默認路由；這裏若是隻指定路由，默認的action會變成當前view的action;

 

1三、Html.Partial()、Html.RenderPartial()--------惟一一種使用部分視圖的方法

Partial用於將分部視圖轉換爲字符串；

新建一個action 爲PartialTest 而後添加到分部視圖，就會添加一個徹底空白的頁面(不包含一個標籤)，而後在須要使用的地方

@Html.Partial("PartialTest")

只須要指定分部視圖名稱便可；

這樣就會把PartialTest中的內容寫入到@Html.Partial("PartialTest")所在的位置；有點相似於java中的include導入頁面同樣

RenderPartial()跟Partial差很少的用途，只是返回的值不同；Partial返回的是MvcHtmlString,而RenderPartial返回的是空，輸入咱們手動的在打印一遍；

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

這樣就跟Partial效果同樣了；但RenderPartial不是返回字符串，而是直接寫入響應輸出流，直接寫入響應流性能上比Partial要好一點；

 

1四、Html.Action()、Html.RenderAction()

Action和RenderAction差很少，一個是直接返回MvcHtmlString一個是返回空，把數據寫到響應流；   

借上面一個示例說明下分部視圖如何不讓直接訪問，必須用html的輔助方法訪問；

[ChildActionOnly]
        public ActionResult PartialTest() {
            return PartialView();
        }

這樣就只容許經過Html的輔助方法【Action、RenderAction、Partial、RenderPartial】來進行訪問了

在14的示例中若是在ActionResult加上一個[ActionName(「MyTest」)],此時在訪問PartialTest時就要用MyTest才能訪問到了；

 

小結：看了這麼多系統提供的Html輔助方法，咱們是否是該本身寫一個自定義的Html輔助方法了？那麼開始吧！

新建一個靜態類，裏面定義一個本身寫好的方法

public static MvcHtmlString TestHtml(this HtmlHelper html) {
            MvcHtmlString mhs = new MvcHtmlString("<div style='width:100;height:100;background-color:red'></div>");
            return mhs;
        }

方法返回一個MvcHtmlString(若是是想返回html不被轉義的狀況下，不然能夠返回string),裏面頂一個div，而後直接返回；

在頁面中使用時得先引入新建的這個類的命名空間；

在頂部寫上「@using MVC3Pro.Controllers」

而後就能夠像使用其餘html輔助方法同樣使用點操做了；(在點操做的時候，方法的下面有個向下的小箭頭，是表明擴展方法，加this傳遞進去，將當前方法附加到this的上面爲附加方法)

@Html.TestHtml()

--------------------------------------------
/*結果*/
<div style='width:100;height:100;background-color:red'></div>