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>$@p.Price</td> </tr> } </tbody> </table> } else { <h2>No product data</h2> }