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) </p>

檢視輸出的結果如下:

<input id="Title" name="Title" type="text" value="ASP.NET MVC 實務精要" />

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

<body>
    <div>
        <p>@Html.Label("編號") @Html.DiplayFor("id")  </p>       
        <p>@Html.Label("書名") @Html.TextBoxFor(m => m.Title) </p>
        <p>@Html.Label("作者") @Html.TextBoxFor(m => m.Author) </p>
        <p>@Html.Label("價格") @Html.TextBoxFor(m => m.Price)</p>
    </div>
</body>

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

關於LabelFor

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

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

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

<label for="Id">Id</label>

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

<p>@Html.LabelFor(m => m.Id) @Html.Label("Id",@Model.Id.ToString())  </p>
<p>@Html.LabelFor(m => m.Title) @Html.TextBoxFor(m => m.Title) </p>
<p>@Html.LabelFor(m => m.Author) @Html.TextBoxFor(m => m.Author) </p>
<p>@Html.LabelFor(m => m.Price) @Html.TextBoxFor(m => m.Price)</p>

其中利用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是我們介紹的第一個模型中繼資料設定,資料模型另外依賴標記屬性完成表單驗證等相關設計,後續文章持續討論。

沒有留言: