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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。