一、前言 1、本教程主要內容 ASP.NET Core MVC 視圖引擎(Razor)簡介 ASP.NET Core MVC 視圖(Razor)ViewData使用示例 ASP.NET Core MVC 視圖(Razor)ViewBag使用示例 ASP.NET Core NVC 視圖(Razor)強 ...
一、前言
1、本教程主要內容
- ASP.NET Core MVC 視圖引擎(Razor)簡介
- ASP.NET Core MVC 視圖(Razor)ViewData使用示例
- ASP.NET Core MVC 視圖(Razor)ViewBag使用示例
- ASP.NET Core NVC 視圖(Razor)強類型傳值(ViewModel)頁示例
2、本教程環境信息
軟體/環境 | 說明 |
---|---|
操作系統 | Windows 10 |
SDK | 2.1.401 |
ASP.NET Core | 2.1.3 |
IDE | Visual Studio Code 1.28 |
瀏覽器 | Chrome 70 |
本篇代碼以下代碼進行調整:https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-02
3、前置知識
你可能需要的前置知識
- MVC框架/模式介紹
https://baike.baidu.com/item/mvc
4、準備工作
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架構模式中,視圖引擎/模板引擎負責將控制器(Controller)提供的數據結合視圖模板進行渲染我們需要的格式(通常是HTML)。控制器(Controller)再將渲染的結果返回給請求的客戶端。
在 ASP.NET Core MVC框架中,提供了視圖引擎:Razor。
Razor提供了尾碼為.cshtml的視圖模板。Razor視圖模板支持使用Razor標記語言以及C#進行編寫。使用起來非常方便。
Razor 就相當於Java平臺常用的 Freemarker、Thymeleaf
2、Razor視圖模板文件位置與指定
視圖文件位置
Razor視圖模板文件通常放在根目錄Views文件夾對應控制器的子目錄中。
例如: ~/Views/Home/Time.cshtml。
這是因為按照 ASP.NET Core MVC框架的約定,當我們在控制器(Controller)返回一個視圖(return View();
)時,如果只指定了視圖名稱(ViewName),並沒有指定視圖的完成路徑,那麼MVC框架將按照以下順序查找視圖:
- Views/[ControllerName]/[ViewName].cshtml
- Views/Shared/[ViewName].cshtml
視圖指定方式
- 隱式指定
public class HomeController : Controller
{
public IActionResult Test(){
return View();
}
}
當沒有指定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視圖引擎傳遞數據
1、準備工作
- 創建RenderDataController
在Controllers文件夾下新增控制器RenderDataController.cs並繼承於Controller
using System;
using Microsoft.AspNetCore.Mvc;
namespace Ken.Tutorial.Web.Controllers
{
public class RenderDataController : Controller
{
}
}
- 創建對應視圖文件夾
在Views目錄下創建文件夾RenderData
2、弱類型參數傳遞數據
弱類型參數說明
-
ViewData
- 派生自 ViewDataDictionary,因此它有可用的字典屬性,如 ContainsKey、Add、Remove 和 Clear。
- 字典中的鍵是字元串,因此允許有空格。 示例:ViewData[“ken”]
- 任何非 string 類型均須在視圖中進行強制轉換才能使用 ViewData。
-
ViewBag
ViewData使用示例
- 創建Action:ViewDataDemo
public IActionResult ViewDataDemo()
{
ViewData["name"] = "ken";
ViewData["birthday"] = new DateTime(2000, 1, 1);
ViewData["hobby"] = new string[] { "跑步", "閱讀", "Coding" };
return View();
}
- 創建視圖: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
將會看到:
ViewData傳值示例
姓名:ken
生日:01/01/2000 00:00:00
愛好:跑步 , 閱讀
ViewBag使用示例
- 創建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();
}
- 創建視圖: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
將會看到:
ViewBag傳值示例
姓名:ken
生日:01/01/2000 00:00:00
愛好:跑步 , 閱讀
3、強類型參數傳遞數據
強類型參數說明
視圖強類型通常稱為ViewModel,我們可以在return View();
時指定視圖參數/對象。併在視圖文件(.cshtml)中通過 @model
語法指定對應的類型,這樣我們可以在視圖文件(.cshtml)中使用Model
關鍵字來使用傳輸到視圖的該類型的實例。
強類型參數示例
- 創建Person類
在項目根目錄創建Models
文件夾併在文件中創建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; }
}
}
- 創建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);
}
- 創建視圖: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
將會看到:
ViewModel傳值示例
姓名:ken
生日:01/01/2000 00:00:00
愛好:跑步 , 閱讀
四、備註
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
本文首發於我的獨立博客:https://ken.io/note/asp.net-core-tutorial-mvc-view-renderdata