ASP.NET MVC——Razor视图引擎

时间:2021-03-23 17:42:07

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 = ,
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

来看看效果。

ASP.NET MVC——Razor视图引擎

还有一个问题需要解决,每个视图都需要指定布局,这就很麻烦了。我们可以使用视图起始文件,在渲染视图时,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 = ;
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>

效果如下:

ASP.NET MVC——Razor视图引擎

我们也可以使用条件语句。修改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>
}

ASP.NET MVC——Razor视图引擎