一、前言

1、本教程主要內(nèi)容

• ASP.NET Core MVC 視圖引擎(Razor)簡介
• ASP.NET Core MVC 視圖(Razor)ViewData使用示例
• ASP.NET Core MVC 視圖(Razor)ViewBag使用示例
• ASP.NET Core NVC 視圖(Razor)強類型傳值(ViewModel)頁示例

2、本教程環(huán)境信息

本篇代碼基于以下代碼進(jìn)行調(diào)整：https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-02

3、前置知識

你可能需要的前置知識

• MVC框架/模式介紹

https://baike.baidu.com/item/mvc

4、準(zhǔn)備工作

VS Code 本身不提供 ASP.NET Core MVC 視圖引擎（Razor）的智能感知。
幸運的是，VS Code C#擴展 從 1.17.0 版本開始支持Razor視圖引擎的智能感知。

所以，我們要將VS Code C#擴展升級到最新版本。

二、ASP.NET Core MVC 視圖引擎(Razor)簡介

1、ASP.NET Core MVC 視圖引擎(Razor)概述

在MVC架構(gòu)模式中，視圖引擎/模板引擎負(fù)責(zé)將控制器(Controller)提供的數(shù)據(jù)結(jié)合視圖模板進(jìn)行渲染我們需要的格式（通常是HTML）。控制器(Controller)再將渲染的結(jié)果返回給請求的客戶端。

在 ASP.NET Core MVC框架中，提供了視圖引擎：Razor。
Razor提供了后綴為.cshtml的視圖模板。Razor視圖模板支持使用Razor標(biāo)記語言以及C#進(jìn)行編寫。使用起來非常方便。

Razor 就相當(dāng)于Java平臺常用的 Freemarker、Thymeleaf

2、Razor視圖模板文件位置與指定

視圖文件位置

Razor視圖模板文件通常放在根目錄Views文件夾對應(yīng)控制器的子目錄中。
例如： ~/Views/Home/Time.cshtml。

這是因為按照 ASP.NET Core MVC框架的約定，當(dāng)我們在控制器(Controller)返回一個視圖(return View();)時,如果只指定了視圖名稱（ViewName），并沒有指定視圖的完成路徑,那么MVC框架將按照以下順序查找視圖：

• Views/[ControllerName]/[ViewName].cshtml
• Views/Shared/[ViewName].cshtml

視圖指定方式

• 隱式指定

public class HomeController : Controller
{
    public IActionResult Test(){
        return View();
    }
}

當(dāng)沒有指定ViewName的時候，ViewName=ActionName="Test"；
框架將按照約定順序查找視圖文件

• 顯示指定視圖名

public class HomeController : Controller
{
    public IActionResult Test(){
        return View("Test");
    }
    
    public IActionResult TestAbc(){
        return View("abc");
    }
}

分別手動指定了視圖名；ViewName="Test"、ViewName="abc"；
框架將按照約定順序查找視圖文件

• 顯示指定視圖文件

public class HomeController : Controller
{
    public IActionResult Test(){
        return View("Views/Test.cshtml");
    }
}

固定查找 Views/Test.cshtml 視圖文件

三、Razor視圖引擎?zhèn)鬟f數(shù)據(jù)

1、準(zhǔn)備工作

• 創(chuàng)建RenderDataController

在Controllers文件夾下新增控制器RenderDataController.cs并繼承于Controller

using System;
using Microsoft.AspNetCore.Mvc;

namespace Ken.Tutorial.Web.Controllers
{
    public class RenderDataController : Controller
    {
        
    }
}

• 創(chuàng)建對應(yīng)視圖文件夾

在Views目錄下創(chuàng)建文件夾RenderData

2、弱類型參數(shù)傳遞數(shù)據(jù)

弱類型參數(shù)說明

• ViewData

  • 派生自 ViewDataDictionary，因此它有可用的字典屬性，如 ContainsKey、Add、Remove 和 Clear。
  • 字典中的鍵是字符串，因此允許有空格。 示例：ViewData["ken"]
  • 任何非 string 類型均須在視圖中進(jìn)行強制轉(zhuǎn)換才能使用 ViewData。

• ViewBag

  • 派生自 DynamicViewData，因此它可使用點表示法 (@ViewBag.SomeKey = <value or object>) 創(chuàng)建動態(tài)屬性，且無需強制轉(zhuǎn)換。
  • ViewBag 的語法使添加到控制器和視圖的速度更快。
  • ViewBag 更易于檢查 NULL 值。 示例：@ViewBag.Person?.Name

ViewData使用示例

• 創(chuàng)建Action：ViewDataDemo

public IActionResult ViewDataDemo()
{
    ViewData["name"] = "ken";
    ViewData["birthday"] = new DateTime(2000, 1, 1);
    ViewData["hobby"] = new string[] { "跑步", "閱讀", "Coding" };
    return View();
}

• 創(chuàng)建視圖：ViewDataDemo.cshtml

@{
    var hobby =ViewData["hobby"] as String[];
}

<h3>@ViewData["title"]</h3>
<ul>
    <li>姓名：@ViewData["name"]</li>
    <li>生日：@ViewData["birthday"]</li>
    <li>愛好：@hobby[0] , @hobby[1]</li>
</ul>

• 訪問測試

啟動項目，訪問 /renderdata/viewdatademo 將會看到：

image

ViewBag使用示例

• 創(chuàng)建Action：ViewBagDemo

public IActionResult ViewBagDemo()
{
    ViewBag.Title = "ViewBag傳值示例";
    ViewBag.Name = "ken";
    ViewBag.Birthday = new DateTime(2000, 1, 1);
    ViewBag.Hobby = new string[] { "跑步", "閱讀", "Coding" };
    return View();
}

• 創(chuàng)建視圖：ViewBagDemo.cshtml

@{
    var hobby =ViewBag.Hobby as String[];
}

<h3>@ViewBag.Title</h3>
<ul>
    <li>姓名：@ViewBag.Name</li>
    <li>生日：@ViewBag.Birthday</li>
    <li>愛好：@hobby[0] , @hobby[1]</li>
</ul>

• 訪問測試

啟動項目，訪問 /renderdata/viewbagdemo 將會看到：

image

3、強類型參數(shù)傳遞數(shù)據(jù)

強類型參數(shù)說明

視圖強類型通常稱為ViewModel，我們可以在return View();時指定視圖參數(shù)/對象。并在視圖文件(.cshtml)中通過 @model 語法指定對應(yīng)的類型，這樣我們可以在視圖文件(.cshtml)中使用Model關(guān)鍵字來使用傳輸?shù)揭晥D的該類型的實例。

強類型參數(shù)示例

• 創(chuàng)建Person類

在項目根目錄創(chuàng)建Models文件夾并在文件中創(chuàng)建Person.cs

using System;

namespace Ken.Tutorial.Web.Models
{
    public class Person
    {
        public string Name { get; set; }

        public DateTime Birthday { get; set; }

        public string[] Hobby { get; set; }
    }
}

• 創(chuàng)建Action：ViewModelDemo

public IActionResult ViewModelDemo()
{
    ViewBag.Title = "ViewModel傳值示例";
    var person = new Person
    {
        Name = "ken",
        Birthday = new DateTime(2000, 1, 1),
        Hobby = new string[] { "跑步", "閱讀", "Coding" }
    };
    //等同于 return View("ViewModelDemo", person);
    return View(person);
}

• 創(chuàng)建視圖：ViewModelDemo.cshtml

@model Ken.Tutorial.Web.Models.Person;

<h3>@ViewBag.Title</h3>
<ul>
    <li>姓名：@Model.Name</li>
    <li>生日：@Model.Birthday</li>
    <li>愛好：@Model.Hobby[0] , @Model.Hobby[1]</li>
</ul>

• 訪問測試

啟動項目，訪問 /renderdata/viewmodeldemo 將會看到：

image

四、備注

1、附錄

• 本文代碼示例

https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-05

• 本文參考

https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/overview?view=aspnetcore-2.1

本文首發(fā)于我的獨立博客：https://ken.io/note/asp.net-core-tutorial-mvc-view-renderdata