康廷數位: 2.7 強型別版本的Helper方法

ASP.NET MVC 實務精要｜第二章表單

前一篇「2.6 繫結資料模型」示範的方式可以順利的在網頁以指定的元素呈現資料，但是開發人員必須自行處理元素的id與name屬性等相關的屬性值，並且小心的與模型類別屬性名稱進行對應。　

HtmlHelper另外提供了一組支援 lambda 運算式的強型別版方法，方便開發人員以強型別的方式建立輸入表單產生的對應的input元素，並自動轉換為所要呈現的對應內容。這一組方法與「2.6 繫結資料模型」列舉的方法名稱類似，只是在每一個方法名稱最後加上 For 字尾。

HTML Helper 方法	說明
LabelFor	建立標籤。
DisplayFor	輸出模型屬性資料內容。
CheckBoxFor	建立核取方塊。
RadioButtonFor	建立選項按鈕。
HiddenFor	建立隱藏式表單欄位。
PasswordFor	建立支援密碼輸入的文字方塊。
TextAreaFor	建立文字方塊。
TextBoxFor	建立文字方塊。

這一組強型別版本的差異在於其參數接受lambda運算式，以TextBoxFor為例，配置的語法如下：

@Html.TextBoxFor(m => m.property)

原來的字串參數在這裏改成lambda運算式，以稍早的表單資料範例，針對Title屬性，以下是原來的設定：

@Html.TextBox("title")

TextBoxFor版本則必須寫成這樣：

@Html.TextBoxFor(m=>m.Title)

檢視輸出的結果如下：

TextBoxFor自動將類別屬性名稱Title設定為input元素中的id與name屬性值，而模型資料中的Title屬性值「ASP.NET MVC 實務精要」則成為元素的 value 屬性值。由於自動完成相關的資料轉換，強型別模型可以避免開發人員自行設定的錯誤，除此之外，這一組方法進一步支援模型資料註記驗證，這一部份下一節進行討論。現在將上述的範例程式碼修改如下：

<body>

<div>

@Html.Label("編號") @Html.DiplayFor("id")

@Html.Label("書名") @Html.TextBoxFor(m => m.Title)

@Html.Label("作者") @Html.TextBoxFor(m => m.Author)

@Html.Label("價格") @Html.TextBoxFor(m => m.Price)

</div>

</body>

這段程式碼在網頁輸出相同的結果，只是自動完成相關的id與name屬性設定。

關於LabelFor

Label也有一個LabelFor版本，不過要特別注意的是，當你引用LabelFor這個版本並且傳入lambda運算式，其最後輸出的內容是類別的屬性名稱，考慮以下的配置：

@Html.LabelFor(m => m.Id)

這一行會輸出以下的結果：

由於for自動以模型屬性名稱Id命名，因此可以對應至TextBox元素的Id屬性，因此如果將表單的配置修正如下：

@Html.LabelFor(m => m.Id) @Html.Label("Id",@Model.Id.ToString())

@Html.LabelFor(m => m.Title) @Html.TextBoxFor(m => m.Title)

@Html.LabelFor(m => m.Author) @Html.TextBoxFor(m => m.Author)

@Html.LabelFor(m => m.Price) @Html.TextBoxFor(m => m.Price)

其中利用LabelFor的特性顯示欄位名稱，而各欄位的資料則以對應的強型別版本呈現。

與Label 問題相同，由於直接抓取類別屬性，因此呈現的英文名稱，而這可以進一步透過資料模型的欄位資料標記屬性設計來解決，依據自己的需求顯示指定的欄位名稱。

設定模型中繼資料

模型中繼資料，提供資料欄位的顯示與驗證等相關設定支援，延續前述的Book資料模型類別，考慮以下的設定：

@Html.LabelFor(m => m.Id)

此行程式碼會顯示Book類別中Id屬性的名稱，當然這不是我們要的結果，想令lambda運算式顯示自訂的欄位名稱，可以透過中繼資料的設定來達成目的。回到Book類別，於其中加入以下的資料標記屬性：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.ComponentModel;

using System.ComponentModel.DataAnnotations;

namespace FormDemo.Models

{

public class Book

{

[DisplayName("編號")]

public int Id { get; set; }

[DisplayName("書名")]

public string Title { get; set; }

[DisplayName("作者")]

public string Author { get; set; }

[DisplayName("標價")]

public int Price { get; set; }

}

首先引用必要的命名空間，接下來逐一為每個屬性定義設定其專屬的DisplayName屬性，完成後，重新瀏覽網頁，你會看到以下的結果：

當我們透過LabelFor顯示欄位標示，模型欄位中的資料標記DisplayName屬性的設定值會在這裏呈現出來，取代原來的屬性名稱設定。DisplayName是我們介紹的第一個模型中繼資料設定，資料模型另外依賴標記屬性完成表單驗證等相關設計，後續文章持續討論。

2.7 強型別版本的Helper方法

沒有留言: