iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 10
3
Modern Web

ASP.NET Core 從入門到實用系列 第 10 篇

[Day10] ASP.NET Core 2 系列 - Views

2018鐵人賽 asp.net core 程式設計 網頁設計 asp.net
9904 瀏覽

ASP.NET Core MVC 中的 Views 是負責網頁顯示，將資料一併渲染至 UI 包含 HTML、CSS 等。並能透過 Razor 語法在 *.cshtml 撰寫渲染畫面的程式邏輯。
本篇將介紹 ASP.NET Core MVC 的 Views。

同步發佈至個人部落格：
John Wu's Blog - [鐵人賽 Day10] ASP.NET Core 2 系列 - Views

之前 [Day06] ASP.NET Core 2 系列 - MVC 有稍微介紹到 Views 及 Controller 的對應關係，這邊就不重複說明。

Razor 語法

ASP.NET Core MVC 的 Views 預設是使用 Razor 引擎，Views 的副檔名是用 *.cshtml。
檔案內容以 HTML 為主，但可以透過 @ Razor 語法撰寫 C# 程式。
可以假想一下 *.cshmtl 就是一般的 HTML，而 Razor 語法是 C# 程式跟靜態 HTML 溝通的媒介。

@ 就是 Razor 語法最重要的溝通媒介，在 C# 變數前面冠上 @，就可以將 C# 程式混合制 HTML 輸出。
如果要在 HTML 顯示 @ 符號的話，可以連用兩個 @ 符號，就可以把 @ 字元輸出，範例如下：

<div>@@DateTime.Now @DateTime.Now</div>
<div>
    @@(DateTime.Now - TimeSpan.FromDays(7)) 
    @(DateTime.Now - TimeSpan.FromDays(7))
</div>

實際輸出的 HTML 結果：

<div>@DateTime.Now 2017/12/29 上午 01:23:45</div>
<div>
    @(DateTime.Now - TimeSpan.FromDays(7)) 
    2017/12/22 上午 01:23:45
</div>

控制結構 (Control Structures)

如果有需要也可以在 Views 撰寫 C# 程式，透過 @{ } 定義程式區塊，便可以在 Views 中寫 C# 程式，如下：

@{
    var date = DateTime.Now;
    date -= TimeSpan.FromDays(7);
}
<div>@date</div>

也可以在迴圈、判斷式或 C# 區塊的關鍵字前加上 @ 宣告程式區塊，如：@if、@switch、@for、@foreach、@while、@do{ }while()、@try、@using、@lock。
範例如下：

@{
    bool flag = true;
    int number = 3;
}

@if(flag)
{
  <div>flag is true</div>
} 
else
{
  <div>flag is false</div>
}

@switch(number)
{
    case 3:
        <div>number is lucky 3!!!!</div>
        break;
    default:
        <div>number is @number</div>
        break;
}

@for(var i = 0; i < number; i++)
{
    <div>For sample: @i</div>
}

@try
{
    throw new Exception("something wrong");
}
catch(Exception ex)
{
    <div>@ex.Message</div>
}

輸出畫面：
[鐵人賽 Day10] ASP.NET Core 2 系列 - Views - Razor 語法

指令 (Directives)

Razor Views 會被 Razor 引擎動態轉換成 Class，所以也有些類似 C# Class 的方法可以使用。

  • @using
    同 C# Class 的 using，載入不同 namespaces，簡化使用時的名稱。例：
@using System.IO
@{
   var dir = Directory.GetCurrentDirectory();
}
<p>@dir</p>
  • @model
    用來綁定 Controller 傳來的 Model 型別，並填入 Model 屬性中，在 Views 中就可以透過 Model 取得 Controller 傳來的 Model。例：
@using MyWebsite.Models
@model UserModel
Hello~ 我是 @Model.Name
  • @inherits
    讓 Razor View 繼承其他自訂的 RazorPage 類別。例：
    CustomRazorPage.cs 
using Microsoft.AspNetCore.Mvc.Razor;

public abstract class CustomRazorPage<TModel> : RazorPage<TModel>
{
   public string CustomText { get; } = "CustomRazorPage.CustomText";
}

Sample.cshtml

@inherits CustomRazorPage<TModel>
<div>Custom text: @CustomText</div>

@functions {
   public string GetHello()
   {
       return "Hello";
   }
}
<div>From method: @GetHello()</div>
  • @section
    配合 Layout 排版使用，下面會介紹。

Layout

通常同網站的頁面都有類似的風格，可能只有部分的內容會不一樣，這種清況很適合用 Layout。
以下圖為例，網站的每頁都會有 Header 及 Footer 而且都長的一樣，就只有 Content 會不同。

[鐵人賽 Day10] ASP.NET Core 2 系列 - Views - Layout

通常 Layout 都會放在 Views\Shared 資料夾，建立一個 _Layout.cshtml：

Views\Shared\_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    @RenderSection("styles", required: false)
</head>
<body>
    <header>
        Layout Header
    </header>
    <div>
        <h1>@ViewBag.Title</h1>
        @RenderBody()
    </div>
    <footer>
        Layout footer
    </footer>
    @RenderSection("scripts", required: false)
</body>
</html>

在要套用 Layout 的 Views，指派要套用的 Layout 名稱，如下：

Views\Home\Index.cshtml

@using MyWebsite.Models
@model UserModel
@{
    Layout = "_Layout";
    ViewBag.Title = "Sample";
}

<div>Hello~ 我是 @Model.Name</div>

@section styles {
  <link rel="stylesheet" type="text/css" href="/css/theme.css">
}
@section scripts {
  <script type="text/javascript" src="/js/jquery.js"></script>
}
  • Layout
    Layout 是指定要套用 Layout 的名稱，預設會在資料夾 Views\Shared 尋找 {Layout 名稱}.cshtml。
    也可以指定完整路徑，如：Layout = "/Views/Shared/_Layout.cshtml"。
  • ViewBag
    ViewBag 是 Dynamic 類型的物件，可以在同一個 Request 中，跨 Controller 及 Views 存取資料。
  • @section
    在使用 Layout 時，並不一定會將 Razor View 全部填入至 RenderBody，可能會有需求將某些內容填入至 Layout 的其他地方。如：*.css 的引用填入至 <head></head> 中；*.js 的引用填入至 </body> 之前。

當打開 http://localhost:5000/home/index 時，Razor 引擎會將 Index.cshtml 的結果都填入 Views\Shared\_Layout.cshtml 的 @RenderBody()。
實際輸出的 HTML 結果：

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <link rel="stylesheet" type="text/css" href="/css/theme.css">
</head>
<body>
    <header>
        Layout Header
    </header>
    <div>
        <h1>Sample</h1>
        <div>Hello~ 我是 John</div>
    </div>
    <footer>
        Layout footer
    </footer>
    <script type="text/javascript" src="/js/jquery.js"></script>
</body>
</html>

_ViewImports

上例 Views\Home\Index.cshtml 有用到 @using MyWebsite.Models，實務上可能每個 Razor View 都會用到 @using MyWebsite.Models，如果每個 *.cshtml 都加上這行就會顯得有點笨拙。
可以透過 _ViewImports.cshtml 把通用性的 @using 都加到這邊，如此一來就可以套用到全部的 Razor View，如：

Views\_ViewImports.cshtml

@using System.IO
@using System.Collections.Generic
@using MyWebsite
@using MyWebsite.Models

如此一來就能將 Views\Home\Index.cshtml 第一行的 @using MyWebsite.Models 移除。

_ViewStart

指定 Layout 也會有套用全部 Razor View 的需求，可以透過 _ViewStart.cshtml，在 Razor View 的第一個渲染事件指派預設 Layout，如：

Views\_ViewStart.cshtml

@{
    Layout = "_Layout";
}

Partial Views

有些重複性很高的畫面，如果散落在各個 Razor View，在維護上就會比較麻煩。
可以透過 Partial Views 把重複的內容變成組件，再重複使用。範例如下：

Controllers\HomeController.cs

// ...
public class HomeController : Controller
{
    public IActionResult Index(int id)
    {
        return View(new List<UserModel>()
        {
            new UserModel()
            {
                Id = 1,
                Name = "John",
                Email = "john@xxx.xxx",
            },
            new UserModel()
            {
                Id = 2,
                Name = "Blackie",
                Email = "blackie@xxx.xxx"
            },
            new UserModel()
            {
                Id = 3,
                Name = "Claire",
                Email = "claire@xxx.xxx"
            }
        });
    }
}

Views\Home\_UserInfo.cshtml

@model UserModel
<div>
    <label>Id：</label>@Model.Id <br />
    <label>Name：</label>@Model.Name <br />
    <label>Email：</label>@Model.Email <br />
</div>

Views\Home\Index.cshtml

@model List<UserModel>
@{
    ViewBag.Title = "User List";
}

@foreach(var user in Model)
{
    @Html.Partial("_UserInfo", user)
    <hr />
}

實際輸出的 HTML 結果：

<!DOCTYPE html>
<html>
<head>
    <title>User List</title>
</head>
<body>
    <header>
        Layout Header
    </header>
    <div>
        <h1>User List</h1>
        <div>
            <label>Id：</label>1 <br />
            <label>Name：</label>John <br />
            <label>Email：</label>john@xxx.xxx <br />
        </div>
        <hr />
        <div>
            <label>Id：</label>2 <br />
            <label>Name：</label>Blackie <br />
            <label>Email：</label>blackie@xxx.xxx <br />
        </div>
        <hr />
        <div>
            <label>Id：</label>3 <br />
            <label>Name：</label>Claire <br />
            <label>Email：</label>claire@xxx.xxx <br />
        </div>
        <hr />
    </div>
    <footer>
        Layout footer
    </footer>
</body>
</html>

後記

Views 的渲染過程都還是在 Server 端，所以可以透過 Razor 撰寫 C# 程式。
Razor 引擎最終會將渲染的結果以 HTML 的方式回傳給 Client。
回顧 Day06 資料流動畫：

[鐵人賽 Day06] ASP.NET Core 2 系列 - MVC - 資料流

要注意的是，Razor 的渲染是耗用 Server 的 CPU 資源，如果有多筆數的資料透過迴圈產生 HTML，也會變成網路傳輸的負擔。如果要注重效能，建議用 Single Page Application(SPA) 的方式取代 Razor。

參考

Views in ASP.NET Core MVC
Razor syntax for ASP.NET Core
Partial Views


上一篇
[Day09] ASP.NET Core 2 系列 - Model Binding
下一篇
[Day11] ASP.NET Core 2 系列 - Cookies & Session
系列文
ASP.NET Core 從入門到實用 共 31 篇
  1. 27
    [Day27] ASP.NET Core 2 系列 - 網頁內容安全政策 (Content Security Policy)
  2. 28
    [Day28] ASP.NET Core 2 系列 - Response 快取
  3. 29
    [Day29] ASP.NET Core 2 系列 - 封包壓縮 (Gzip)
  4. 30
    [Day30] ASP.NET Core 2 系列 - Kestrel Web Server
  5. 31
    [End] ASP.NET Core 2 系列 - ASP.NET Core vs ASP.NET MVC
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
brian80122
iT邦新手 5 級 ‧ 2018-06-26 15:59:36

斗膽提醒個錯字（部落格也是錯的）

Razor語法第二段
@ 就是 Razor 語法最重要的溝同媒介 => 溝通媒介

John Wu iT邦新手 4 級 ‧ 2018-06-26 16:03:08 檢舉

感謝提醒，打錯字 XD

登入發表回應

我要留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙