[ASP.NET MVC] @Html.DisplayFor() 、@Html.DisplayTextFor()、@Html.DisplayNameFor() 和 @Html.EditorFor()

-

使用過 ASP.NET MVC 內建產生範本功能的人一定對標題的四個方法不陌生，如下有一 Model UserInfo 這樣設計：

Model 各屬性的資料型態

  using System.ComponentModel;
  
  namespace prjMVC.Models
  {
    public class UserInfo
    {
        [DisplayName("姓名")]
        public string Name { get; set; }
        [DisplayName("年齡")]
        public int Age { get; set; }
        [DisplayName("體重")]
        public double Weight { get; set; }
        [DisplayName("生日")]
        public DateTime Birthday { get; set; }
        [DisplayName("已婚")]
        public bool IsMarried { get; set; }
    }
}

在 Controller 傳到 View：

  UserInfo user = new UserInfo
  {
    Name = "Billy",
    Age = 25,
    Weight = 74.5,
    Birthday = new DateTime(1997, 5, 2),
    IsMarried = true,
  };
  return View(user);

DisplayFor() 方法

在 View 中，@Html.DisplayFor() 會依據資料和型態來顯示：

  @model prjMvc.Models.UserInfo
  
  <h2>DisplayFor</h2>
  <div>@Html.DisplayFor(m => m.Name)</div>
  <div>@Html.DisplayFor(m => m.Age)</div>
  <div>@Html.DisplayFor(m => m.Weight)</div>
  <div>@Html.DisplayFor(m => m.Birthday)</div>
  <div>@Html.DisplayFor(m => m.IsMarried)</div>

  //會產生：
  
  <h2>DisplayFor</h2>
  <div>Billy</div>
  <div>25</div>
  <div>74.5</div>
  <div>1997/5/2 上午 12:00:00</div>
  <div><input checked="checked" class="check-box" disabled="disabled" type="checkbox" /></div>

如上所示，@Html.DisplayFor() 會依據資料和型態產生恰當的顯示控制項，例如 bool 布林值會產生 disabled 的 <input type="checkbox"> 顯示該數值。

DisplayTextFor() 方法

在 View 中，@Html.DisplayTextFor() 會顯示資料的字串結果：

  @model prjMvc.Models.UserInfo
  <h2>DisplayTextFor</h2>
  <div>@Html.DisplayTextFor(m => m.Name)</div>
  <div>@Html.DisplayTextFor(m => m.Age)</div>
  <div>@Html.DisplayTextFor(m => m.Weight)</div>
  <div>@Html.DisplayTextFor(m => m.Birthday)</div>
  <div>@Html.DisplayTextFor(m => m.IsMarried)</div>

  // 會產生：
  
  <h2>DisplayTextFor</h2>
  <div>Billy</div>
  <div>25</div>
  <div>74.5</div>
  <div>1997/5/2 上午 12:00:00</div>
  <div>True</div>

如上所示，@Html.DisplayTextFor() 只會顯示純字串，適合放在 <table> 中的 <tbody> 中顯示每一筆資料的數值。

DisplayNameFor() 方法

在 View 中，@Html.DisplayNameFor() 會顯示在類別中用 Annotation 寫的 [DisplayName()] 數值：

  @model prjMvc.Models.UserInfo

  <h2>DisplayNameFor</h2>
  <div>@Html.DisplayNameFor(m => m.Name)</div>
  <div>@Html.DisplayNameFor(m => m.Age)</div>
  <div>@Html.DisplayNameFor(m => m.Weight)</div>
  <div>@Html.DisplayNameFor(m => m.Birthday)</div>
  <div>@Html.DisplayNameFor(m => m.IsMarried)</div>

  // 會產生：
  
  <h2>DisplayNameFor</h2>
  <div>姓名</div>
  <div>年齡</div>
  <div>體重</div>
  <div>生日</div>
  <div>已婚</div>

如上所示，@Html.DisplayNameFor() 顯示此屬性設定的名字例如「姓名」，沒有掛 Annotation 設定的話會顯示原來的屬性名例如「Name」，適合放在 <table> 中的 <thead> 或 <th> 當作標頭。類似 DisplayNameFor() 的是 LabelFor()，差別在後者產生的 <label> 標籤在點選時會 focus 到 for-id 對應的控制項，而前者只有字串。

EditorFor() 方法

在 View 中，@Html.EditorFor() 會依據資料與型態產生恰當的修改用控制項：

  @model prjMvc.Models.UserInfo

  <h2>EditorFor</h2>
  <div>@Html.EditorFor(m => m.Name)</div>
  <div>@Html.EditorFor(m => m.Age)</div>
  <div>@Html.EditorFor(m => m.Weight)</div>
  <div>@Html.EditorFor(m => m.Birthday)</div>
  <div>@Html.EditorFor(m => m.IsMarried)</div>
  
  // 會產生：
  <h2>EditorFor</h2>
  <div><input class="text-box single-line" id="Name" name="Name" type="text" value="Billy" /></div>
  <div><input class="text-box single-line" data-val="true" data-val-number="欄位 年齡 必須是數字。" data-val-required="年齡 欄位是必要項。" id="Age" name="Age" type="number" value="25" /></div>
  <div><input class="text-box single-line" data-val="true" data-val-number="欄位 體重 必須是數字。" data-val-required="體重 欄位是必要項。" id="Weight" name="Weight" type="text" value="74.5" /></div>
  <div><input class="text-box single-line" data-val="true" data-val-date="欄位 生日 必須是日期。" data-val-required="生日 欄位是必要項。" id="Birthday" name="Birthday" type="datetime" value="1997/5/2 上午 12:00:00" /></div>
  <div><input checked="checked" class="check-box" data-val="true" data-val-required="已婚 欄位是必要項。" id="IsMarried" name="IsMarried" type="checkbox" value="true" />
    <input name="IsMarried" type="hidden" value="false" />
  </div>

如上所示，@Html.EditorFor() 會依據資料與型態用適合的控制項讓使用者修改，例如 int 整數會提供 <input type="number"> 。

additionalViewData 和 htmlAttributes

前面介紹產生控制項的方法，例如 TextBox()、TextBoxFor()、LabelFor()、CheckBox() … 都有一個 overload 是有 object htmlAttributes 引數的，直接在該位置使用匿名類別 new { } 即可，例如：

  @Html.Label("ListPrice"：
                , "定價："
                , new { @class = "label-title" } )
  @Html.TextBox("ListPrice"
               , "720"
               , new { type = "number" } )

可直接產生對應 key value 的 HTML 標籤的屬性。但是上面的 DisplayFor() 和 EditorFor() 並沒有引數是 htmlAttributes 的，而是 object additionViewData，這個和 template 有關在此不贅述，只講帶入 HTML 屬性的方法：

  @Html.EditorFor(m => m.Name
                 , new { htmlAttributes = new { maxLength = "15" , required = "true" } } )
  @Html.EditorFor(m => m.Birthday
                 , new { htmlAttributes = new { type = "date" } } )

如上所示，匿名類別裡的匿名類別，additionalViewData 中有個 key 為 htmlAttributes，用 new { } 給他 value 即可。

留言

張貼留言