若要在 MVC 應用程式中使用 HTML 控制項，除了直接建立 HTML 控制項之外，也可以使用 System.Web.Mvc.Html命名空間底下的擴充控制項，來協助建立 HTML 控制項。該命名空間包括支援表單、輸入控制項、連結、部分檢視和驗證等的類別。

FormExtensions

這個類別是來用產生

以下是 BeginForm的另一種用法，可讀性較高：


@using (Html.BeginForm("Edit", "Employees"))
{
    @Html.HiddenFor(model => model.EmployeeID)

        @Html.LabelFor(model => model.FirstName)
        @Html.EditorFor(model => model.FirstName)
        @Html.ValidationMessageFor(model => model.FirstName)


        @Html.LabelFor(model => model.LastName)
        @Html.EditorFor(model => model.LastName)
        @Html.ValidationMessageFor(model => model.LastName)


        @Html.LabelFor(model => model.Title)
        @Html.EditorFor(model => model.Title)


        @Html.LabelFor(model => model.BirthDate)
        @Html.EditorFor(model => model.BirthDate)


        @Html.LabelFor(model => model.Age)
        @Html.EditorFor(model => model.Age)


}

InputExtensions

InputExtensions類別主要用來產生 HTML 的輸入控制項。

這個類別包含了五個擴充方法，用來產生 html 中的 input 項目：

這五個擴充方法也都各有一個加了 For 的擴充方法，如 TextBoxFor, CheckBoxFor, HiddenFor, 用來接受一個運算式物件的參數。

下面這個例子，是他們在使用上的差別


    @Html.Editor("Caption")
    @Html.EditorFor(model => model.Title)

EditExtensions

EditExtensions Represents support for the HTML input element in an application.


public static MvcHtmlString Editor(this HtmlHelper html, string expression);
public static MvcHtmlString EditorFor(this HtmlHelper html, Expression> expression);
public static MvcHtmlString EditorForModel(this HtmlHelper html);

LinkExtensions

LinkExtensions類別主要用來產生 HTML 的連結控制項。

ActionLink

The ActionLink method renders an element that links to an action method.


public static MvcHtmlString ActionLink(this HtmlHelper htmlHelper, 
        string linkText, 
        string actionName, 
        string controllerName);

public static MvcHtmlString ActionLink(this HtmlHelper htmlHelper, 
        string linkText, 
        string actionName, 
        object routeValues);

public static MvcHtmlString ActionLink(this HtmlHelper htmlHelper, 
        string linkText, 
        string actionName, 
        string controllerName, 
        object routeValues, 
        object htmlAttributes);

若要使用 ActionLink，可以這樣用：


@Html.ActionLink("Link Text1", "Details", "Employee")

@Html.ActionLink("Link Text2", "Details", new { controller = "Employee" })

@Html.ActionLink("Link Text3", "Details", "Employee", new { area = "BackSite" }, null)

上面會分別產生以下連結


Link Text1

Link Text2

Link Text3

RouteLink

The RouteLink method renders an element that links to a URL, which can resolve to an action method, a file, a folder, or some other resource.


public static MvcHtmlString RouteLink(this HtmlHelper htmlHelper, string linkText, string routeName);

public static MvcHtmlString RouteLink(this HtmlHelper htmlHelper, string linkText, object routeValues);

public static MvcHtmlString RouteLink(this HtmlHelper htmlHelper, string linkText, string routeName, object routeValues);

若要使用 RouteLink，可以這樣用：


@Html.RouteLink("Link Text4", "Default")

@Html.RouteLink("Link Text5", "BackSite_default")


@Html.RouteLink("Link Text6", new { controller = "Employees", action = "Details" })

@Html.RouteLink("Link Text7", new { area = "BackSite", controller = "Employees", action = "Details" })


@Html.RouteLink("Link Text8", "Default", new { controller = "Employees", action = "Details" })

@Html.RouteLink("Link Text9", "BackSite_default", new { controller = "Employees", action = "Details" })

上面會分別產生以下連結


Link Text4

Link Text5

Link Text6

Link Text7

Link Text8

Link Text9

ActionLink & RouteLink 範例

若 Controllers 中有個名為 Test1 的控制器。在 Areas 中有個名為 Admin 的區域，該區中也有一個名為 Test1 的控制器。

如何解決控制器名稱重複的問題？

由於控制器名稱重複，我們必須利用命名空間來限制 Router 只尋找特定命名空間中的 Controller


    routes.MapRoute(
        "Default", 
        "{controller}/{action}/{id}", 
        new { controller = "Home", action = "Index", id = UrlParameter.Optional },
        new string[] { "MvcApplication2.Controllers" }      //指定尋找特定命名空間
    );

如何使用 ActionLink 或 RouteLink 建立 Admin 區域連結？


@Html.ActionLink("link to test1 (under Admin)", "aaa", "test1", new { area = "Admin" }, null)
@Html.RouteLink("link to test1 (under Admin)", new { area = "Admin", controller = "test1", action = "aaa" });

如何由 Admin 區域連結到外層的網頁？


@Html.ActionLink("link to test1", "aaa", "test1", new { area = "" }, null)
@Html.RouteLink("link to test1", new { area = "", controller = "test1", action = "aaa" });

ChildActionExtensions

ChildActionExtensions類別主要用來呼叫子系的 action method ，以取得 partial view 內容。


public static MvcHtmlString Action(this HtmlHelper htmlHelper, string actionName);
public static MvcHtmlString Action(this HtmlHelper htmlHelper, string actionName, object routeValues);
public static MvcHtmlString Action(this HtmlHelper htmlHelper, string actionName, string controllerName);
public static MvcHtmlString Action(this HtmlHelper htmlHelper, string actionName, string controllerName, object routeValues);

public static void RenderAction(this HtmlHelper htmlHelper, string actionName);
public static void RenderAction(this HtmlHelper htmlHelper, string actionName, object routeValues);
public static void RenderAction(this HtmlHelper htmlHelper, string actionName, string controllerName);
public static void RenderAction(this HtmlHelper htmlHelper, string actionName, string controllerName, object routeValues);

Action

Action方法會叫用指定的子系的 action method 已取得回應的 partial view，並以 HTML 字串形式傳回結果。


@model MvcApplication1.Models.Customers

@Html.Action("CustomerOrders", new { CustomerID = Model.CustomerID })

叫用 controller 中的 CustomerOrders 方法，並傳入參數 CustomerID 。


public ActionResult CustomerOrders(string CustomerID)
{
    NorthwindEntities db = new NorthwindEntities();

    var query = from order in db.Orders
                where order.CustomerID == CustomerID
                select order;

    return View(query.ToList());
}


@model IEnumerable

@foreach (var item in Model)
{






}
@Html.DisplayFor(modelItem => item.CustomerID) @Html.DisplayFor(modelItem => item.OrderDate) @Html.DisplayFor(modelItem => item.ShipAddress) @Html.DisplayFor(modelItem => item.ShipCity)

RenderAction

RenderAction同 Action功能，差別在它不傳回值，直接將轉譯的 HTML 碼輸出到 parent view。


@{ Html.RenderAction("ShowTime", "Home"); }

叫用 Home Controller中的 ShowTime 方法。


public ActionResult ShowTime()
{
    return View();
}


@DateTime.Now.ToString()

PartialExtensions and RenderPartialExtensions

PartialExtensions和 RenderPartialExtensions類別都是用來取得 partial view 內容。和 ChildActionExtensions差別在不會呼叫 controller 中的 action method 。


public static MvcHtmlString Partial(this HtmlHelper htmlHelper, string partialViewName);

public static void RenderPartial(this HtmlHelper htmlHelper, string partialViewName);

Partial

Partial 方法會將 partial view 轉譯成 HTML 編碼字串，然後回傳字串。


@Html.Partial("CopyRightControl")

RenderPartial

RenderPartial同 Partial 功能，差別在它不傳回值，直接將轉譯的 HTML 碼輸出到 parent view。


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

DisplayExtensions

為了在 View 中顯示特定資料，我們會在 Controller中，將資料先儲存在 ViewData中，再由 View 中取出。如下面範例：


public ActionResult About()
{
    ViewData["Message"] = "歡迎使用 ASP.NET MVC!";
}


@ViewData["Message"].ToString()

MVC 提供我們幾個更簡便的方式以顯示這些資料。你可以透過 DisplayExtensions類別提供的下列方法，將物件資料，以 HTML 格式呈現：

Display：這個方法可接受代表要呈現之物件值的字串。
DisplayFor：這個方法，可接受模型物件。
DisplayForModel：這個方法，隱含地使用模型。

Display方法通常用來顯示 ViewData字典中的資料； DisplayFor和 DisplayForModel方法通常用來顯示 Model 屬性所公開之物件的値。

Display

使用指定的範本，傳回運算式表示的物件中每一個屬性的 HTML 標記。


public static MvcHtmlString Display(this HtmlHelper html, string expression);
public static MvcHtmlString Display(this HtmlHelper html, string expression, string templateName);
public static MvcHtmlString Display(this HtmlHelper html, string expression, string templateName, string htmlFieldName);

public static MvcHtmlString Display(this HtmlHelper html, string expression, object additionalViewData);
public static MvcHtmlString Display(this HtmlHelper html, string expression, string templateName, string htmlFieldName, object additionalViewData);

您可以使用 Display方法顯示從 ViewData字典和從 Model 屬性所公開之物件的資料。


@ViewData["Message"].ToString()  @* 一般顯示方法 *@

@Html.Display("Message")         @* 若有 Message 物件，則將其值顯示出來 *@

@Html.Label("FirstName")：       @* 顯示 Employees 公開的屬性 FirstName 的欄位名稱 *@
@Html.Display("FirstName")       @* 顯示 Employees 公開的屬性 FirstName 的值 *@
@Html.Label("BirthDate")：
@Html.Display("BirthDate", "myDateTime")    @* 使用 myDateTime 這個 Partail View ，顯示 BirthDate 物件值 *@

上面範例中的 myDateTime 是一個自訂的 partial view (user control) ，程式碼如下：



  @Html.Encode(string.Format("{0:yyyy\\/MM\\/dd}", Model))

DisplayFor

使用指定的範本，傳回由 Expression 表示之物件中包含各個屬性值的字串。

其用法同 Display，只是它的運算式是一個強型別物件。


public static MvcHtmlString DisplayFor(this HtmlHelper html, Expression expression);
public static MvcHtmlString DisplayFor(this HtmlHelper html, Expression expression, string templateName);
public static MvcHtmlString DisplayFor(this HtmlHelper html, Expression expression, string templateName, string htmlFieldName);

public static MvcHtmlString DisplayFor(this HtmlHelper html, Expression expression, object additionalViewData);
public static MvcHtmlString DisplayFor(this HtmlHelper html, Expression expression, string templateName, string htmlFieldName, object additionalViewData);


@Html.LabelFor(emp => emp.FirstName)：
@Html.DisplayFor(emp => emp.FirstName)
@Html.LabelFor(emp => emp.BirthDate)：
@Html.DisplayFor( emp => emp.BirthDate , "myDateTime")

DisplayForModel

使用指定的範本，傳回模型中每一個屬性的 HTML 標記


public static MvcHtmlString DisplayForModel(this HtmlHelper html);
public static MvcHtmlString DisplayForModel(this HtmlHelper html, object additionalViewData);
public static MvcHtmlString DisplayForModel(this HtmlHelper html, string templateName);
public static MvcHtmlString DisplayForModel(this HtmlHelper html, string templateName, object additionalViewData);
public static MvcHtmlString DisplayForModel(this HtmlHelper html, string templateName, string htmlFieldName);
public static MvcHtmlString DisplayForModel(this HtmlHelper html, string templateName, string htmlFieldName, object additionalViewData);

1. 通常在強型別的 Veiw 中，要顯示該型別中特定的公開資料，你可以如此做：


FirstName：@Html.DisplayFor(emp => emp.FirstName)

LastName：@Html.DisplayFor(emp => emp.LastName)

BirthDate：@Html.DisplayFor(emp => emp.BirthDate)

2. 若要顯示該型別的所有公開的資料，使用直接使用 DisplayForModel轉譯整個模型，以下範例：


@Html.DisplayForModel()

它就會自動將所有的公開屬性，轉譯成 html 字串，如下所示：


員工ID

2

名

Fuller

姓

Andrew

Title

Vice President, Sales

TitleOfCourtesy

...

3. 你也可以將該模型資料，交由指定的範本(partial view or user control)來產出。也就是在 user control 中設計你要的樣式，再使用這個 user control 來展現你的模型資料。如下範例：


@Html.DisplayForModel("EmpDetail")


@model MvcApplication1.Models.Employees

FirstName：@Html.DisplayFor(emp => emp.FirstName)

LastName：@Html.DisplayFor(emp => emp.LastName)

BirthDate：@Html.DisplayFor(emp => emp.BirthDate)

ValidationExtensions

ValidationExtensions 包含以下方法：

Validate ：
ValidateFor ：
ValidationMessage ：輸出驗證錯誤的訊息
ValidationMessageFor ：
ValidationSummary ：輸出驗證錯誤的訊息清單

在 Server 端，則是透過 ModelState 來自訂錯的內容

使用 HTML Helper 在 ASP.NET MVC 呈現表單