【未完待續】MVC 之HTML輔助方法

時間  2020-06-04
標籤 未完待續 mvc html 輔助 方法 欄目 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驗證失敗的錯誤信息等

 

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

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

語法範例 說明
@Html.ActionLink("連接文字","ActionName") 這是最基本的用法，要跳轉的控制器爲本視圖所在的控制器。連接文字不可爲空字符串、空白字符串或null值，不然會拋出The Value cannot be null or empty的異常。
@Html.ActionLink("連接文字","ActionName","ControllerName") 指定連接文字、動做、控制器
@Html.ActionLink("連接文字","ActionName",new{id=123,page=5}) 當須要設定額外的RouteValue時，能夠在第三個參數傳入object類型的數據
@Html.ActionLink("連接文字","ActionName",null,new{@class="btnLink"})

當須要傳入超連接額外的HTML屬性時，能夠將參數加載第四個參數上。數據庫

請注意：因爲HTML標籤裏在套用CSS樣式類型時會用到class屬性名稱，而在C#裏class屬於關鍵字，因此必須使用@class的方式，才能確保C#正確編譯。模塊化

此外，若是要輸出HTML屬性包括減號（-）時，例如data-value屬性，應使用「_」下劃線代替。ui
 @Html.ActionLink("連接文字","ActionName","ControllerName", null,new{@class="btnLink"})

 5個參數編碼

      使用Html.AcionLink()時，第一個參數爲超連接的顯示文字，此參數不能夠輸入空字符串、空白字符串或null值，不然會跑出The Value cannot be null or empty的異常。spa

      若是想設計一個包含超連接的圖片按鈕，可選擇用<a>超連接標籤來輸出，並經過CSS加上一個背景圖，以下。翻譯

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

ASP.NET MVC還有另外一個Html.RouteLink輔助方法，其用法與Html.ActionLink很是類似，差異僅在於輸入的參數要以RouteValue爲主。設計

 

 

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

（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中直接將分部視圖的執行結果取回。

使用方式 使用範例
Partial(HtmlHelper, String)  Html.Partial("ajaxPage")
Partial(HtmlHelper, String, Object)   Html.Partial("ajaxPage", Model)
Partial(HtmlHelper, String, ViewDataDictionary)    Html.Partial("ajaxPage", ViewData["Model"])
Partial(HtmlHelper, String, Object, ViewDataDictionary) Html.Partial("ajaxPage", Model, ViewData["Model"])

 

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

例子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的生命週期。

 

 

原文連接：http://www.javashuo.com/article/p-fkejrwjd-g.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程