Razor是MVC框架視圖引擎，我們今天就來說一說Razor視圖引擎。 首先還是來創建一個基礎項目叫Razor來演示。 先來定義一個Model叫Product 接著，來定義一個控制器。 最後，在Views/Home文件夾中創建Index.cshtml文件。 1. 使用模型對象 我們在視圖的第一行使用 ...
Razor是MVC框架視圖引擎，我們今天就來說一說Razor視圖引擎。
首先還是來創建一個基礎項目叫Razor來演示。
先來定義一個Model叫Product
public class Product { public int ProductID { get; set; } public string Name { get; set; } public string Description { get; set; } public decimal Price { get; set; } public string Category { set; get; } }
接著，來定義一個控制器。
public class HomeController : Controller { Product myProduct = new Product { ProductID = 1, Name = "Kayak", Description = "A boat for one person", Category = "Watersports", Price = 275M }; public ActionResult Index() { return View(myProduct); } }
最後，在Views/Home文件夾中創建Index.cshtml文件。
1. 使用模型對象
我們在視圖的第一行使用這樣的語法 @model Razor.Models.Product ，Razor語句以@字元開始，@model語句聲明瞭通過動作方法傳遞給該視圖模型對象的類型，這能讓我們以 @Model這樣的方法來引用視圖模型對象的方法、欄位、屬性。代碼如下：
@model Razor.Models.Product @{ Layout = null } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> @Model.Name </div> </body> </html>
2. 使用佈局
為了創建一個佈局，右擊View是文件夾，添加-> MVC 5佈局頁（Razor），將文件名設置為_BasicLayout.cshtml (註意第一個字元是下劃線)。代碼如下：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <h1>Product Information</h1> <div style="padding: 20px; border: solid medium black; font-size: 20pt"> @RenderBody() </div> <h2>Visit <a href="http://apress.com">Apress</a></h2> </body> </html>
佈局是特殊形式的視圖。@RenderBody方法的調用會將動作方法所指定的視圖插入到佈局標記中。
為了使用佈局，只需要我們設置前面Index視圖的Layout。並且所創建的佈局中已經有一些Html元素，所以在視圖中可以將這些元素去除。Index視圖代碼修改如下：
@model Razor.Models.Product
@{
ViewBag.Title = "Product Name";
Layout = “~/Views/-BasicLayout.cshtml”;
}
Product Name: @Model.Name
來看看效果。
還有一個問題需要解決，每個視圖都需要指定佈局，這就很麻煩了。我們可以使用視圖起始文件，在渲染視圖時，MVC框架會查找一個叫做_ViewStart.cshtml文件。框架會將此文件的內容視為視圖的一部分，我們就可以利用這一特性為Layout屬性設置一個值。為了創建視圖起始文件，在Views文件夾添加一個新的佈局文件，並將文件名設置為_ViewStart.cshtml。代碼如下：
@{
Layout = "~/Views/_BasicLayout.cshtml";
}
再次修改Index視圖代碼：
@model Razor.Models.Product
@{
ViewBag.Title = "Product Name";
}
Product Name: @Model.Name
3. 使用Razor表達式
Razor可以做的事情很多，包括使用C#語句（但是應該不用Razor執行業務邏輯）。
用Razor表達式能做的最簡單的事就是將數據值插入到標記中，我們可以用之前說的@Model表達式來做這件事。我們也可以@ViewBag表達式。
修改Home控制器，添加DemoExpression。
public ActionResult DemoExpression() { ViewBag.ProductCount = 1; ViewBag.ExpressShip = true; ViewBag.ApplyDiscount = false; ViewBag.Supplier = null; return View(myProduct); }
我們在Views/Home文件夾中創建DemoExpression.cshtml視圖文件，代碼如下：
@model Razor.Models.Product @{ ViewBag.Title = "DemoExpression"; Layout = "~/Views/_BasicLayout.cshtml"; } <table> <thead> <tr><th>Property</th><th>Value</th></tr> </thead> <tbody> <tr><td>Name</td><td>@Model.Name</td></tr> <tr><td>Price</td><td>@Model.Price</td></tr> <tr> <td>Stock Level</td> <td>@ViewBag.ProductCount</td> </tr> </tbody> </table>
效果如下：
我們也可以使用條件語句。修改DemoExpression.cshtml如下：
@model Razor.Models.Product @{ ViewBag.Title = "DemoExpression"; Layout = "~/Views/_BasicLayout.cshtml"; } <table> <thead> <tr><th>Property</th><th>Value</th></tr> </thead> <tbody> <tr><td>Name</td><td>@Model.Name</td></tr> <tr><td>Price</td><td>@Model.Price</td></tr> <tr> <td>Stock Level</td> <td> @if (ViewBag.ProductCount == 0) { @:Out of Stock } else if (ViewBag.ProductCount == 1) { <b>Low Stock (@ViewBag.ProductCount)</b> } else { @ViewBag.ProductCount } </td> </tr> </tbody> </table>
為了開始一個條件語句，需要在C#的條件關鍵字前放一個@。
我們也可以使用枚舉數組和集合。
繼續在Home控制器創建一個DemoArray動作方法。
public ActionResult DemoArray() { Product[] array = { new Product {Name = "Kayak", Price = 275M}, new Product {Name = "Lifejacket", Price = 48.95M}, new Product {Name = "Soccer ball", Price = 19.50M}, new Product {Name = "Corner flag", Price = 34.95M} }; return View(array); }
創建DemoArray.cshtml，代碼如下：
@using Razor.Models @model Product[] @{ ViewBag.Title = "DemoArray"; Layout = "~/Views/_BasicLayout.cshtml"; } @if (Model.Length > 0) { <table> <thead><tr><th>Product</th><th>Price</th></tr></thead> <tbody> @foreach (Product p in Model) { <tr> <td>@p.Name</td> <td>[email protected]</td> </tr> } </tbody> </table> } else { <h2>No product data</h2> }
