• ASP.NET MVC——Razor视图引擎


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

     

  • 相关阅读:
    「网络流 24 题」魔术球
    「网络流 24 题」圆桌聚餐
    「网络流 24 题」最小路径覆盖
    「网络流 24 题」太空飞行计划
    「网络流 24 题」搭配飞行员
    「网络流 24 题」负载平衡
    「网络流 24 题」数字梯形
    餐巾计划问题
    让Double类型完整显示,不用科学计数法显示E
    kotlin新工程
  • 原文地址:https://www.cnblogs.com/skyshalo/p/5807143.html
Copyright © 2020-2023  润新知