ASP.NET MVC 實務精要|第二章 表單
前一篇「2.6 繫結資料模型」示範的方式可以順利的在網頁以指定的元素呈現資料,但是開發人員必須自行處理元素的id與name屬性等相關的屬性值,並且小心的與模型類別屬性名稱進行對應。
HtmlHelper另外提供了一組支援 lambda 運算式的強型別版方法,方便開發人員以強型別的方式建立輸入表單產生的對應的input元素,並自動轉換為所要呈現的對應內容。這一組方法與「2.6 繫結資料模型」列舉的方法名稱類似,只是在每一個方法名稱最後加上 For 字尾。
這一組強型別版本的差異在於其參數接受lambda運算式,以TextBoxFor為例,配置的語法如下:
原來的字串參數在這裏改成lambda運算式,以稍早的表單資料範例,針對Title屬性,以下是原來的設定:
TextBoxFor版本則必須寫成這樣:
檢視輸出的結果如下:
TextBoxFor自動將類別屬性名稱Title設定為input元素中的id與name屬性值,而模型資料中的Title屬性值「ASP.NET MVC 實務精要」則成為元素的 value 屬性值。由於自動完成相關的資料轉換,強型別模型可以避免開發人員自行設定的錯誤,除此之外,這一組方法進一步支援模型資料註記驗證,這一部份下一節進行討論。現在將上述的範例程式碼修改如下:
這段程式碼在網頁輸出相同的結果,只是自動完成相關的id與name屬性設定。
關於LabelFor
Label也有一個LabelFor版本,不過要特別注意的是,當你引用LabelFor這個版本並且傳入lambda運算式,其最後輸出的內容是類別的屬性名稱,考慮以下的配置:
這一行會輸出以下的結果:
由於for自動以模型屬性名稱Id命名,因此可以對應至TextBox元素的Id屬性,因此如果將表單的配置修正如下:
其中利用LabelFor的特性顯示欄位名稱,而各欄位的資料則以對應的強型別版本呈現。
與Label 問題相同,由於直接抓取類別屬性,因此呈現的英文名稱,而這可以進一步透過資料模型的欄位資料標記屬性設計來解決,依據自己的需求顯示指定的欄位名稱。
設定模型中繼資料
模型中繼資料,提供資料欄位的顯示與驗證等相關設定支援,延續前述的Book資料模型類別,考慮以下的設定:
此行程式碼會顯示Book類別中Id屬性的名稱,當然這不是我們要的結果,想令lambda運算式顯示自訂的欄位名稱,可以透過中繼資料的設定來達成目的。回到Book類別,於其中加入以下的資料標記屬性:
首先引用必要的命名空間,接下來逐一為每個屬性定義設定其專屬的DisplayName屬性,完成後,重新瀏覽網頁,你會看到以下的結果:

當我們透過LabelFor顯示欄位標示,模型欄位中的資料標記DisplayName屬性的設定值會在這裏呈現出來,取代原來的屬性名稱設定。DisplayName是我們介紹的第一個模型中繼資料設定,資料模型另外依賴標記屬性完成表單驗證等相關設計,後續文章持續討論。
前一篇「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是我們介紹的第一個模型中繼資料設定,資料模型另外依賴標記屬性完成表單驗證等相關設計,後續文章持續討論。
沒有留言:
張貼留言