ASP.NET MVC——Razor视图引擎

时间 2019-12-11

标签 asp.net asp mvc razor 视图引擎栏目 ASP 繁體版

原文原文链接

Razor是MVC框架视图引擎，咱们今天就来讲一说Razor视图引擎。html

首先仍是来建立一个基础项目叫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文件。spa

1. 使用模型对象3d

咱们在视图的第一行使用这样的语法 @model Razor.Models.Product ，Razor语句以@字符开始，@model语句声明了经过动做方法传递给该视图模型对象的类型，这能让咱们以 @Model这样的方法来引用视图模型对象的方法、字段、属性。代码以下：code

@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. 使用布局orm

为了建立一个布局，右击View是文件夹，添加-> MVC 5布局页（Razor），将文件名设置为_BasicLayout.cshtml (注意第一个字符是下划线)。代码以下：htm

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