ASP.NET Core 入門教程 5、ASP.NET Core MVC 檢視傳值入門
一、前言
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 |
3、前置知識
你可能需要的前置知識
- 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();
- 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)中通過 語法指定對應的型別,這樣我們可以在檢視檔案(.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、附錄
- 本文程式碼示例
- 本文參考