2016年12月9日 星期五

泛型型別的Display Template

 

Tool:Visual Studio 2015 Ultimate Update 3
OS:Windows 10
.NET Framework : 4.6.x
ASP.NET MVC 5.x

Q :如何為泛型型別定義Display Template?

在MVC之中,我們可以為特定型別設計DisplayTemplates來客製化UI的顯示,例如有一個Model如下:

public partial class Opera
{
    public int OperaID { get; set; }
    public string Title { get; set; }
    public int? Year { get; set; }
    public string Composer { get; set; }
}

我們可以針對字串型別設計一個DisplayTemplates,假設檔案放在\Views\Opera\DisplayTemplates\資料夾下,其中的Opera是Controller名稱,DisplayTemplates檔名命名規則是"型別.cshtml”,因此將之命為String.cshtml :

\Views\Opera\DisplayTemplates\String.cshtml

String.cshtml檔案內容如下,這樣我們在顯示String型別資料時,會以粗體字呈現。

@model String
<strong>@Model</strong>

若顯示Model的View的程式如下

@model Opera

<div>
    <ul>
        <li>
            @Html.DisplayNameFor(m => m.Title) :
            @Html.DisplayFor(m => m.Title)
        </li>
        <li>
            @Html.DisplayNameFor(m => m.Year) :
            @Html.DisplayFor(m => m.Year)
        </li>
        <li>
            @Html.DisplayNameFor(m => m.Composer) :
            @Html.DisplayFor(m => m.Composer)
        </li>
    </ul>
</div>

執行時,字串的內容會自動變成粗體字:

image

若要為泛型設計DisplayTemplate的話,由於檔案名稱不能包含"<"與">"符號,那麼該如何處理?

我們可以先為DisplayTemplate取一個名稱,檔名自訂,如ListOpera.cshtml:

Views\Opera\DisplayTemplates\ListOpera.cshtml

在ListOpera.cshtml檔案中加入顯示資料的樣版

@model IEnumerable<Opera>
<table border="1">
    <tr>
        <th>@Html.DisplayNameFor(m => m.Title)</th>
        <th>@Html.DisplayNameFor(m => m.Year)</th>
        <th>@Html.DisplayNameFor(m => m.Composer)</th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayFor(mi => item.Title)</td>
            <td>@Html.DisplayFor(mi => item.Year)</td>
            <td>@Html.DisplayFor(mi => item.Composer)</td>
        </tr>
    }
</table>

在另一個View,如Index View使用Html.DisplayForModel,傳入樣版的名稱(ListOpera)就可以顯示

@model IEnumerable<Mod02_01.Models.Opera>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <p>
            @Html.DisplayForModel("ListOpera")
            @Html.ActionLink("Create", "Create")
        </p>
    </div>
</body>
</html>

沒有留言:

總瀏覽量