asp.net core系列 41 Web 應用 MVC視圖

一.MVC視圖

　　在Web開發的MVC和Razor中，都有使用視圖，在Razor中稱爲"頁"。.cshtml視圖是嵌入了Razor標記的HTML模板。 Razor 標記使用C#代碼，用於與HTML 標記交互以生成發送給客戶端的網頁。在MVC目錄結構中，Views / [ControllerName] 文件夾下用於建立視圖，其中Views/Shared 文件夾下的視圖是控制器共享的視圖。

　　

　　1.1  視圖頁Razor 標記

　　　　下面是Views/Home 文件夾中建立一個 About.cshtml 文件，呈現的視圖以下：

@{ ViewData["Title"] = "About"; } <h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

 　　　　Razor 標記以 @ 符號開頭。後面的大括號 { ... } 括住的是 Razor 代碼塊，是運行 C# 語句。 只需用 @ 符號來引用值，便可在 HTML 中顯示這些值。好比上面h2和h3標籤。

 

　　1.2 控制器指定視圖

　　　　一般以 ViewResult 的形式從Action返回結果到視圖，這是一種 ActionResult結果類型（Web api中有講到)。但一般不會這樣作。 由於大多數控制器均繼承自Controller，所以只需使用 View 方法便可返回 ViewResult。示例以下：

public IActionResult About() { ViewData["Message"] = "Your application description page."; return View(); }

 　　　　View 方法有多個重載。 可選擇指定：

//要返回的顯式視圖
    return View("Orders"); //要傳遞給視圖的模型(實體)對象
    return View(Orders); //視圖和模型
    return View("Orders", Orders);

 

　　1.3 視圖發現

　　　　Action返回一個視圖時, 這個過程叫「視圖發現」。默認的 return View(); 將返回與當前Action方法同名的視圖。搜索匹配的視圖文件順序規則以下：

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

　　　　當return View()時，首先在 Views/[ControllerName] 文件夾中搜索該視圖。 若是在此處找不到匹配的視圖，則會在「Shared」文件夾中搜索該視圖。

　　　　在返回視圖時，能夠提供視圖文件路徑。 若是使用絕對路徑(「/」或「~/」開頭)，必須指定 .cshtml 擴展名：

　　return View("Views/Home/About.cshtml");

　　　　也可以使用相對路徑在不一樣目錄中指定視圖，而無需指定 .cshtml 擴展名：

return View("../Manage/Index");

　　　　能夠用「./」前綴來指示當前的控制器特定目錄：

return View("./About");

 

　　1.4 向視圖傳遞數據

　　　　可使用多種方法將數據傳遞給視圖。包括：(1)強類型數據：viewmodel。(2)弱類型數據ViewData (ViewDataAttribute)、ViewBag。ViewBag 在 Razor 頁中不可用。

　　　　(1) 強類型數據 viewmodel

　　　　　　在傳遞數據到視圖中，最可靠的是使用強類型數據，由於編譯時能檢查而且有智能感知。在視圖頁中使用@model指令來指定模型（能夠是實體或集合泛型實體）。以下所示，其中前端的WebApplication1.ViewModels.Address是實體類命令空間，經過後端返回view強類型映射：

@model WebApplication1.ViewModels.Address <h2>Contact</h2>
<address> @Model.Street<br> @Model.City, @Model.State @Model.PostalCode<br>
    <abbr title="Phone">P:</abbr> 425.555.0100 </address>

public IActionResult Contact() { ViewData["Message"] = "Your contact page."; var viewModel = new Address() { Name = "Microsoft", Street = "One Microsoft Way", City = "Redmond", State = "WA", PostalCode = "98052-6399" }; //返回強類型
    return View(viewModel); }

 　　(2) 弱類型數據（ViewData、ViewData 屬性和 ViewBag)

　　　　視圖還能夠訪問弱類型（也稱爲鬆散類型）的數據集合。可使用弱類型數據集合將少許數據傳入及傳出控制器和視圖。ViewData 屬性是弱類型對象的字典。ViewBag 屬性是 ViewData 的包裝器，爲基礎 ViewData 集合提供動態屬性。ViewData派生自 ViewDataDictionary，ViewBag派生自 DynamicViewData。

　　　　ViewData 和 ViewBag 在運行時進行動態解析。 因爲它們不提供編譯時類型檢查，所以使用這二者一般比使用 viewmodel 更容易出錯。建議儘可能減小或根本不使用 ViewData 和 ViewBag。

 

　　　　ViewData介紹

　　　　　　下面是一個ViewData存儲對象，在視圖上強制轉換爲特定類型(Address)。

public IActionResult SomeAction() { ViewData["Greeting"] = "Hello"; ViewData["Address"]  = new Address() { Name = "Steve", Street = "123 Main St", City = "Hudson", State = "OH", PostalCode = "44236" }; return View(); }

@{ // Since Address isn't a string, it requires a cast. var address = ViewData["Address"] as Address; } @ViewData["Greeting"] World! <address> @address.Name<br> @address.Street<br> @address.City, @address.State @address.PostalCode </address>

 　　

　　　　ViewData 特性介紹

　　　　　　能夠在控制器或 Razor 頁面模型上，使用 [ViewData] 修飾屬性。下面是一個示例：

public class HomeController : Controller { [ViewData] public string Title { get; set; } public IActionResult About() { Title = "About Us"; ViewData["Message"] = "Your application description page."; return View(); } }

//經過字典key取出 <title>@ViewData["Title"] - WebApplication</title>

 　　　　

　　　　ViewBag介紹

　　　　　　ViewBag 不須要強制轉換，所以使用起來更加方便。下面示例以下：　　　

public IActionResult SomeAction() { // Greeting不須要先聲明，Address 也同樣,由於是Dynamic類型
    ViewBag.Greeting = "Hello"; ViewBag.Address = new Address() { Name = "Steve", Street = "123 Main St", City = "Hudson", State = "OH", PostalCode = "44236" }; return View(); }

@ViewBag.Greeting World! <address> @ViewBag.Address.Name<br> @ViewBag.Address.Street<br> @ViewBag.Address.City, @ViewBag.Address.State @ViewBag.Address.PostalCode </address>

 　　

　　　　更多視圖功能包括：標記幫助程序、服務注入視圖，視圖組件等

 

　　參考文獻

　　　　ASP.NET Core MVC 中的視圖