MVC 之HTML輔助方法

       顧名思義，HTML輔助方法（HTML Helper）就是用來輔助產生HTML之用，在開發View的時候一定會面對許多HTML標簽，處理這些HTML的工作非常繁瑣，為了降低View的複雜度，可以使用HTML輔助方法幫助你產生一些HTML標簽或內容，因這些HTML標簽都有固定標準的寫法，所以將其包裝成HTML輔助方法，可讓View開發更快速，也可以避免不必要的語法錯誤。

      ASP.NET MVC中內建了許多HTML輔助方法，這些HTML輔助方法都是利用C#3.0的擴充方法特性，將各種不同的HTML輔助方法擴充在HtmlHelper類別里，並且都擁有多載。

     通過HTML輔助方法的講解，可以有效協助你面對常見但又繁瑣的HTML編寫工作，例如，超鏈接、表單聲明（<form>）、表單元素（<input>、<select>、<textarea>）、HTML編碼與解碼、載入其他分部視圖頁面（Partial View Page）、顯示Model驗證失敗的錯誤信息等，撰寫ASP.NET MVC一定少不了它。

1.使用HTML輔助方法輸出超鏈接

      在開發View頁面時最常用的HTML輔助方法莫過於輸出超鏈接，在View中輸出ASP.NET MVC的超鏈接通常會用Html.ActionLink輔助方法，該方法用於產生文字鏈接，其文字部分會自動進行HTML編碼（HtmlEncode）。具體使用情況如下所示。

      使用Html.AcionLink()時，第一個參數為超鏈接的顯示文字，此參數不可以輸入空字元串、空白字元串或null值，否則會跑出The Value cannot be null or empty的異常。

      如果想設計一個包含超鏈接的圖片按鈕，可選擇用<a>超鏈接標簽來輸出，並通過CSS加上一個背景圖，如下。

<a href="@Url.Action("ActionName")" class="lnkButton"></a>

ASP.NET MVC還有另一個Html.RouteLink輔助方法，其用法與Html.ActionLink非常相似，差別僅在於輸入的參數要以RouteValue為主。

2.使用HTML輔助方法輸出表單

（1）產生表單元素

       在使用表單之前，大家應該已經看過好幾遍關於Html.BeginForm()的使用，該輔助方法主要用來產生<form>標簽，可以通過using語法來使用，也可以配合Html.EndForm()使用以產生適當的</form>表單結尾。以下是幾個Html.BeginForm()的代碼範例。

a.使用using語法產生表單標簽

@using(Html.BeginForm("About","Home"))  //參數1：actionName 參數2：controllerName
{
    @Html.TextArea("Date")
    @Html.TextArea("MEMO")
    <input type="submit"/>
}

b.使用Html.BeginForm輔助方法輸出的表單預設輸出的method屬性會是POST，如果想指定為GET的話，可以輸入第三個參數，如下。

@using(Html.BeginForm("Search","Home",FormMethod.Get))
{
    @Html.TextArea("Keyword")
    <input type="submit" />
}

c.如果想要用HTML表單實現文件上傳的功能，那麼必須在輸出的<form>表單標簽加上一個enctype屬性，且內容必須設定為multipart/form-data，如下。

@using(Html.BeginForm("Upload","File",FormMethod.Post,new{enctype="multipart/form-data"}))
{
    @Html.TextBox("File1","",new{type="file",size="25"})
    <input type="submit"/>
}

 Html輔助方法並沒有File方法，因此必須用TextBox方法來代替，並傳入第三個參數將內建的type屬性換成file即可。

（2）常用表單輸入元素

Html.BeginForm()，輸出<form>標簽

Html.EndForm()，輸出</form>標簽

Html.Label()，輸出<label>標簽

Html.TextBox()，輸出<input type="text">標簽

Html.TextArea()，輸出<textarea>標簽

Html.Password()，輸出<input type="password">標簽

Html.CheckBox()，輸出<input type="checkbox">標簽

Html.RadionButton()，輸出<input type="radio">標簽

Html.DropDownList()，輸出<select>標簽。

Html.ListBox()，輸出<select multiple>標簽

Html.Hidden()，輸出<input type="hidden">標簽

Html.ValidationSummary()，輸出表單驗證失敗時的錯誤信息摘要

a.標簽的使用

@Html.Label("Username","賬戶")
@Html.TextBox("Username")

b.文本框的使用

Html.TextBox的重載如下：

@Html.TextBox("Username")  //id,name的值為Username

@Html.TextBox("Username", "will")  //id,name的值為Username; value的值為will

@Html.TextBox("Username", "will", new { size=32 })//id,name的值為Username; html屬性值size=3

如果要傳遞多個html屬性值，並且在多處使用，可以按照下麵的例子來做。

public ActionResult HelperSample1()
        {
            IDictionary<string, object> attr = new Dictionary<string, object>();
            attr.Add("size", "32");
            attr.Add("style", "color:red;");
            ViewData["Dictionary"] = attr;
            return View();
        }

@{
    var htmlAttribute = ViewData["Dictionary"] as IDictionary<string, object>;
}
@Html.TextBox("name","Value",htmlAttribute)<br />
@Html.Password("password","Value",htmlAttribute)<br />
@Html.TextBox("email","Value",htmlAttribute)<br />
@Html.TextBox("tel","Value",htmlAttribute)<br />
@Html.Hidden("id","1")

c.Html.DropDownList()的使用

1)不讀取資料庫的下拉列表

public ActionResult HelperSample2()
        {
            List<SelectListItem> listItem = new List<SelectListItem>();
            listItem.Add(new SelectListItem { Text = "是", Value = "1" });
            listItem.Add(new SelectListItem { Text = "否", Value = "0" });
            ViewData["List"] = new SelectList(listItem, "Value", "Text", "");
            return View();
        }

@Html.DropDownList("List", ViewData["List"] as SelectList, "請選擇")  //參數依次為下拉列表的名字，指定的列表項，預設選擇項的值

2)數據來自資料庫的下拉列表

public ActionResult Index()
        {
            var list = new SelectList(db.Students, "Id", "Age", "3");  //參數依次為數據集合，數據值，數據文本，選中項的值
            ViewBag.List = list;
            return View();
        }

@Html.DropDownList("List")

3)數據來自枚舉類型

ViewBag.Role = new SelectList(Enum.GetValues(typeof(SystemRole)), "");

@Html.DropDownList("Role")

（3）使用強類型輔助方法

        ASP.NET MVC從2.0版開始更進一步地提供了強類型的輔助方法，避免因為輸入錯誤而導致數據沒有顯示或是編輯時無法存儲的問題，除此之外，如果能活用這些強類型輔助方法還能提升整體開發效率。

        基本上，屬於強類型的輔助方法命名方式皆為“原先的名稱最後加上For”，例如，Html.TextBoxFor()或Html.LabelFor()。使用強類型輔助方法，在View頁面的最上方一定要用@model定義出這個View頁面的參考數據模型，如果沒有生命就無法正常使用強類型輔助方法。

Html.LabelFor()，輸出<label>標簽，顯示欄位的名字。

Html.TextBoxFor()

Html.TextAreaFor()

Html.PasswordFor()

Html.CheckBoxFor()

Html.RadioButtonFor()

Html.DropDownListFor()，輸出<select>標簽。

Html.ListBoxFor()，輸出<select multiple>標簽。

Html.HiddenFor() ，生成HTML窗體的隱藏域。

Html.DisplayNameFor()，顯示數據模型在Metadata定義的顯示名稱。

Html.DisplayTextFor()，顯示數據模型的文字資料。

Html.ValidationMessageFor()，顯示數據模型當輸入驗證失敗時顯示的錯誤信息。

Html.EditorFor()，用來輸出表單域可編輯文本框。

 做一個例子，首頁顯示商品明細，點擊添加商品鏈接，打開添加商品頁面，輸入信息可添加商品。商品的模型類和添加商品頁面代碼如下：

public class Product
    {
        public int Id { get; set; }

        [Required]
        [DisplayName("產品名稱")]
        public string Name { get; set; }

        [MaxLength(200)]
        [DisplayName("產品說明")]
        public string Description { get; set; }

        [Required]
        public int UnitPrice { get; set; }
    }

@model MvcApplication1.Models.Product

@using(Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>產品資訊</legend>

        <div class="editor-lable">
            @Html.LabelFor(model=>model.Name)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model=>model.Name)
            @Html.ValidationMessageFor(model=>model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model=>model.Description)
        </div>
        <div class="editor-label">
            @Html.TextAreaFor(model=>model.Description)
            @Html.ValidationMessageFor(model=>model.Description)
        </div>

        <p>
            <input type="submit" />
        </p>
    </fieldset>
}

3.使用HTML輔助方法載入分部視圖

       以往在ASP.NET Web form的開發經驗中，對於User Control使用非常頻繁，不但可以減少重覆的代碼，也利於將頁面模塊化，這個好用的概念也可以用在ASP.NET MVC中，只不過換了一個名字，稱為“分部視圖（Partial View）”。

（1）什麼是分部視圖

        從Partial View的字面上翻譯，很容易瞭解它就是一個片段的View，因此，可以利用Partial View把部分的HTML或顯示邏輯包裝起來，方便重覆引用。當你將建立出來的分部視圖放置於View\Shared目錄時，任何Controller下的Action或View都可以載入。公用的Parital View放在Views\Shared目錄。

       分部視圖的應用範圍相當廣，因為是片段的HTML顯示邏輯，因此，整體重覆性高或某段HTML會共同出現在多個視圖頁面中的網頁片段，利用分部視圖來開發會是不錯的選擇，並且基於這個優點，Ajax技術所需要的片段View也就更適合使用分部視圖。

（2）如何建立一個分部視圖

       建立分部視圖與建立視圖的步驟一樣，在項目的/Views/Shared目錄上，單擊滑鼠右鍵，在彈出的快捷菜單中選擇“添加”->“視圖”命令。接著，選中“創建為分部視圖”覆選框即可。

      使用分部視圖不一定需要建立相關的Action，因為它僅僅是片段的HTML，且調用時，也不會調用Action來執行。

（3）使用Html.Partial載入分部視圖

  ASP.NET MVC的HTML輔助方法擁有一個專門的擴充方法來載入分部視圖，稱為Partial，可以讓你在View中直接將分部視圖的執行結果取回。

  因分部視圖是片段的，必須要選擇一個完整的頁面來將它載入。

例子1，分部視圖OnlineUserCounter代碼如下。

<span style="color:red">線上人數：88888</span>

 在Home/Index視圖中載入分部視圖。

@Html.Partial("OnlineUserCounter")

       利用上述方式就能將分部視圖載入，因為是直接的載入，因此，調用的頁面若有傳遞數據也可以直接調用出來。

      在一個視圖頁面里，如果載入了多個分部視圖，每個分部視圖裡也可以存取到原本頁面的ViewData、TempData及Model等數據，也就代表著這些從Controller傳入的數據模型可以共用於各個分部視圖之間。

      不過，載入分部視圖時，也可以通過Html.Partial輔助方法傳入另一個Model數據，如此一來，就能讓分部視圖裡與載入該視圖頁面時使用不同的模型數據，也可以把視圖頁面中的一部分數據當成分部視圖頁面中的數據。

      我們以AccountController的Login頁面為例，這一頁在登錄失敗時會傳入上一頁輸入的數據，當從視圖頁面中載入另一個分部視圖時，可以傳入一個object類型的參數作為分部視圖的模型數據，如下視圖頁面。

@model LoginModel
@{
    ViewBag.Title="登錄";
}

@Html.Partila("LoginFail", (object)Model.UserName)

接著在/Views/Account目錄下新增一個名為LoginFail的分部視圖，其內容如下：

@model System.String
從視圖頁面傳入的模型數據為：@Model

由上述範例可以知道，在一般視圖頁面中的Model與LoginFail這個分部視圖裡的Model已經是不同的東西了。

（4）使用Html.Action輔助方法，從控制器載入分部視圖

       分部視圖頁面除了可以直接從視圖頁面載入外，也可以像一般視圖頁面一樣從Controller中使用。如下OnlineUserCount這個動作方法就是利用Controller類型中的PartialView輔助方法來載入分部視圖，而這種載入方式與用View輔助方法唯一的差別，僅在於它不會套用母版頁面，其他則都完全相同。

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

 然後可以在視圖頁面利用Html.Action來載入這個Action的執行結果：

@Html.Action("OnlineUserCounter")

       通過Html.Action與Html.Partial載入分部視圖結果是一樣的，但載入的過程卻差別很大。若使用Html.Partial載入分部視圖是通過HtmlHelper直接讀取*.cshtml文件，直接執行該視圖並取得結果。若使用Html.Action的話，則會通過HtmlHelper對IIS再進行一次處理要求（通過Server.Execute方法），因此，使用Html.Action會重新執行一遍Controller的生命周期。

原文鏈接：https://www.cnblogs.com/yytesting/p/4987633.html