ASP.NET MVC——Razor视图引擎

2018-06-22 06:03:38来源：未知阅读 ()

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>
}