12、ASP.NET MVC入門到精通——HtmlHelper

本系列目錄：ASP.NET MVC4入門到精通系列目錄匯總

HtmlHelper:是為了方便View的開發而產生

HtmlHelper的演變

普通首頁超級鏈接為：<a href="/home/index">首頁</a>

當路由改變時候則可能需要修改為：<a href="/home/index1">首頁</a>，如果項目里面有很多超級鏈接那需要改動很多地方

路由改變也不受影響：<a href="<%=Url.Action("Index","Home")%>">首頁</a>

因為沒有智能感知，調試不方便，所以應運而生了：Html.Action("Home","Index")

HtmlHelper之Action、表單標簽

ActionLink() 

動態生成超鏈接：根據路由規則，生成對應的 html 代碼。

//1.注冊路由信息
routes.MapRoute(
   name: "Test",
   url: "{controller}_yujie/{action}.html/{id}",
   defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
 );
//2.在視圖上創建超鏈接
<a href="/Home/Index">網站首頁</a><br />
@Html.ActionLink("網站首頁","Index", "Home")
//3.在瀏覽器看到的生成結果
<a href="/Home/Index">網站首頁</a><br />
<a href="/Home_yujie/Index.html">網站首頁</a>

HtmlHelper – Form

方式一：{}   強烈推薦

@using(Html.BeginForm("HandleForm", "Home")) 
{

}

方式二：Begin   End

@Html.BeginForm()
@{Html.EndForm();}

//1.在視圖中 創建 表單

@using (Html.BeginForm("Add", "home", FormMethod.Post, new { id="form1" }))
{ 

}

//2.生成的html代碼

<form action="/home/Add" id="form1" method="post"> </form>

//直接在視圖中 @ 調用有返回值的方法，就已經相當於是將返回值寫入Response了

@Html.Label("UserName")
//相當於下面代碼
@{
    Response.Write(Html.Label("UserName"));
}

HtmlHelper –弱類型與強類型方法

Lable()等生成html標簽方法

弱類型方法：指定name和value

 注：所有的方法都默認去視圖的Model屬性所儲存的對象中查找匹配屬性

  using System.ComponentModel;
  //1.為實體類添加特性DisplayName
    public class User
    {
        [DisplayName("用戶名")]
        public string UserName { get; set; }
    }
    //2.在Action方法中，為視圖 的 Model 設置值
    public ActionResult Index()
    {
         return View(new User { UserName = "郭靖" });
    }

//3.在視圖中，通過html的幫助方法，生成 html 標簽，同時指定，要讀取的 屬性名

@Html.Label("UserName")

//4.生成對應的html標簽，並自動讀取了對應屬性的DisplayName里的文本。

<label for="UserName">用戶名</label>

其他控件方法也一樣

強類型方法：通過lambda表達式指定模型屬性(@model)

強類型方法，直接通過 lambda表達式，去視圖的Model屬性對象中查找對應的屬性數據

  @Html.TextBoxFor(m=>m.UserName); //1.視圖上調用方法
   <input type="text" id="UserName" name="UserName" value="郭靖"/> //2.生成的html代碼

超強強類型方法（通過屬性的DataType特性生成html標簽）

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
        /// <summary>
        /// 1.在實體類中為Remark屬性設置DataType特性，指定為多行文本框
        /// </summary>
        [DataType(DataType.MultilineText)]
        public string Remark { get; set; }

//2.視圖上 自動根據model對象里屬性保存的實體類屬性的[DataType] 特性里指定的類型生成對應的html標簽

@Html.EditorFor(a=> a.Remark)

/3.生成html代碼

<textarea id="Remark" class="text-box multi-line" name="Remark"></textarea>

HtmlHelper – LabelFor & 模型元數據

模型類的元數據包括：屬性(名稱和類型) 與 特性包含的值。

為實體類屬性設置 DisplayName 特性：

[DisplayName("用戶名")]
public string UserName{ get; set; }

在 新增/修改 頁面上顯示某個屬性的標簽說明：

@Html.LabelFor(model => model.UserName)

生成Html源碼：<label for="UserName">用戶名</label>

HtmlHelper – Display / Editor 模型元數據

@Html.Editor / @Html.Display 可以通過讀取特性值生成HTML：

        [DataType(DataType.MultilineText)]
        [DisplayName("備注")]
        public string Remark { get; set; }

控制器中：

        public ActionResult Index()
        {
            //ViewBag.UserName = "小李飛刀";
            return View(new User { UserName = "郭靖",Remark="武林高手" });
        }

在 新增/修改 頁面上顯示某個屬性的input標簽：

<div>@Html.DisplayFor(model => model.Remark):@Html.EditorFor(a=> a.Remark)</div>

生成Html源碼：

<div>武林高手:<textarea id="Remark" class="text-box multi-line" name="Remark">武林高手</textarea></div>

 支持強類型（1）：Html.xxFor

這種方式生成的html控件的name和指定實體對應的屬性名一致

弱類型（2）：Html.xx(“”)

<%: Html.TextBox("Id")%>

DropDownList

var items = new List<SelectListItem>() 
{ 
    (new SelectListItem() {Text = "001", Value = "1", Selected = false}), 
    (new SelectListItem() {Text = "002", Value = "2", Selected = false}) 
}; 

將items值給ViewData： ViewData["items"] = items;
在視圖中這樣使用： @Html.DropDownList("items")
CheckBox & RadioButton & Hidden & Password

@Html.CheckBox(“bookType”) 在Controller獲取提交的值為(true,false)未操作  true選擇  false不選擇三種
RadioButton第一個參數為控件名字(名字相同說明為同一個Group)，返回值為第二個參數(紅色部分)

@Html.RadioButton("favColor", "Blue", true）Blue <br />
@Html.RadioButton("favColor", "Purple", false) Purple <br />
@Html.RadioButton("favColor", "Red", false) Red <br />
@Html.RadioButton("favColor2", "Orange", false) Orange <br />
@Html.RadioButton("favColor2", "Yellow", false) Yellow <br />
@Html.RadioButton("favColor2", "Brown", false) Brown <br />
@Html.RadioButton("favColor2", "Green", false) Green

HtmlHelper –RenderPartial

從分部視圖里取數據

@Html.RenderPartial( "Par", ViewData.Model );
@Html.RenderPartial( "~/Views/Home/Par.cshtml ", ViewData.Model );

直接將用戶控件嵌入到界面上
這個方法通過接受分部視圖的文件名以及相應的可變化的數據進行的呈現可重用 分部視圖 顯示到具體的頁面中
區別：
    布局頁面（模板頁）子頁，是把自己的內容填到 布局頁面上去；
    分部視圖：供某個頁面過來取分部視圖的內容。

HtmlHelper類 - RenderAction

在視圖中請求某個 Action方法 (違反了mvc設計)

 @{Html.RenderAction("Test");}

允許你直接調用某個Action，並把返回的結果直接顯示在當前調用的View中

兩者的相同點
RenderPartial和RenderAction通常都被用來顯示一個功能相對獨立的“塊”，比如說顯示菜單或者導航條。 兩者輸出的結果都被作為調用的View的一部分顯示。
兩者的不同點
RenderPatial的數據來自於調用的View，而RenderAction來自自己。
RenderAction會發起一個新的Request，而RenderPatial不會。
如何選擇
根據兩者不同點中的第二點，由於RenderAction會調用一個新的Action方法，而Asp.net Mvc中Action是最小的緩存單位，因此如果某一個“塊”的數據比較固定，不會因為訪問者的不同而發生變化，那么這時就是使用 RenderAction的時候了。 題外話，對於RenderAction會發起一個新的Request，感覺對調用頁面的流程有點破壞。一個View在顯示的時候，自己又發起一個 Request去獲取數據來顯示，顯然有點破壞了作為一個View的原則：A View should only know how to render, but not what to render!

HtmlHelper擴展方法

擴展方法：

1.方法所在的類必須是靜態的

2.方法也必須是靜態的

3.方法的第一個參數必須是你要擴展的那個類型，比如你要給int擴展一個方法，那么第一個參數就必須是int。

4.在第一個參數前面還需要有一個this關鍵字。
在MVC中擴展HtmlHelper后，要在使用擴展方法的頁面上引用擴展方法所在的名稱空間
     例如： @using Ebuy.Models

    public class User
    {
        public string Name { get; set; }
    }
    public static class UserHelper
    {
        public static string UserShow(this HtmlHelper<User> helper)
        {
            var user = helper.ViewData.Model;
            if (user.Name == "zouqj")
            {
                return string.Format("<div>我是{0}</div>",user.Name);
            }
            else
            {
                return "<div>找不到</div>";
            }
        }
    }

控制器

  public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
            var model = new User { Name="zouqj"};
            return View(model);
        }

View調用

@model Ebuy.Models.User
@using Ebuy.Models
@Html.Raw(Html.UserShow()

界面顯示：

我是zouqj