EditorFor、DisplayNameFor、DisplayFor的使用

 

先準備範例model

namespace WebApplication1.Models
{
    public class PERSON
    {
        public int no { get; set; }
        public string name { get; set; }
        public string cell { get; set; }
    }
}

 

一、EditorFor

EditorFor是用來顯示DadaBinding過來的屬性值,

EditorFor有六種多載方法,請參考以下範例。

public static MvcHtmlString EditorFor<TModel, TValue>(
    this HtmlHelper<TModel> html,
    Expression<Func<TModel, TValue>> expression
)
public static MvcHtmlString EditorFor<TModel, TValue>(
    this HtmlHelper<TModel> html,
    Expression<Func<TModel, TValue>> expression,
    Object additionalViewData
)
public static MvcHtmlString EditorFor<TModel, TValue>(
    this HtmlHelper<TModel> html,
    Expression<Func<TModel, TValue>> expression,
    string templateName
)
public static MvcHtmlString EditorFor<TModel, TValue>(
    this HtmlHelper<TModel> html,
    Expression<Func<TModel, TValue>> expression,
    string templateName,
    Object additionalViewData
)
public static MvcHtmlString EditorFor<TModel, TValue>(
    this HtmlHelper<TModel> html,
    Expression<Func<TModel, TValue>> expression,
    string templateName,
    string htmlFieldName
)
public static MvcHtmlString EditorFor<TModel, TValue>(
    this HtmlHelper<TModel> html,
    Expression<Func<TModel, TValue>> expression,
    string templateName,
    string htmlFieldName,
    Object additionalViewData
)

Controller 跟上例一樣不傳任何物件至 VIEW,而 View 也是使用 PERSON 模型,如下

@model WebApplication1.Models.PERSON

@Html.EditorFor(model => model.no, new { htmlAttributes = new { @class = "form-control" } })

「new { htmlAttributes = new { @class = "form-control" } }」將為 object additionalViewData。

執行後發現是EditorFor方法自動會轉譯為input標籤如下

<input class="form-control text-box single-line" data-val="true" data-val-number="The field no must be a number." data-val-required="no 欄位必要項。" id="no" name="no" type="number" value="">

 

EditorFor 也可以放 readonly 屬性

@Html.EditorFor(model => model.Cus_ID, new { htmlAttributes = new { @class = "form-control form-control-sm", @readonly = "readonly" } })

 

EditorFor 也可以放 value 屬性

@Html.EditorFor(model => model.Sale_ID, new { htmlAttributes = new { @class = "form-control form-control-sm", @Value = "" } })

 

EditorFor 也可以放 required 屬性

@Html.EditorFor(model => model.Receipt_Total_Original, new { htmlAttributes = new { @class = "form-control form-control-sm", @required = "required" } })

 

EditorFor 也可以放 placeholder 屬性

@Html.EditorFor(model => model.Contact_Tel, new { htmlAttributes = new { @class = "form-control form-control-sm", placeholder = "電話" } })

 

EditorFor 也可以放 type 屬性

@Html.EditorFor(model => model.Contact_ID, new { htmlAttributes = new { type = "hidden" } })

 

二、DisplayNameFor

Controller跟上例一樣不傳任何物件至VIEW,或要傳也可以,

因為DisplayNameFor方法跟Controller要不要傳沒有關係。

View改成

@model IEnumerable<WebApplication1.Models.PERSON>

@Html.DisplayNameFor(model => model.no)

@model WebApplication1.Models.PERSON

@Html.DisplayNameFor(model => model.no)

都是可以達成目地的

由結果可以發現DisplayNameFor方法就是單純秀出屬性名稱而已,

最常跟table與th標籤配合,範例可參考DisplayFor解說。

 

三、DisplayFor

Controller準備如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        List<PERSON> aPERSON = new List<PERSON>();
        public ActionResult Index()
        {
            aPERSON.Add(new PERSON() { no = 1, name = "Bill", cell = "0800-000-000" });

            return View(aPERSON);
        }
    }
}

Vew

@model IEnumerable<WebApplication1.Models.PERSON>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.no)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.cell)
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.no)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.cell)
            </td>
        </tr>
    }
</table>

結果如下

注意其模型宣告為IEnumerable型態,而用foreach配合DisplayFor方法來秀出每一筆記錄,

常跟table標籤、DisplayNameFor方法一起呈現。