zoukankan      html  css  js  c++  java
  • 使用Razor

    概述

      Razor是微软在MVC3时引入的视图引擎的名称,在MVC4中进行了修订,但改动很小。视图引擎的作用是处理ASP.NET的内容并寻找其中的指令,将动态内容插入到响应中。

      微软维护了两种视图引擎。一种是使用了多年的ASPX引擎,使用的标签是<%%>。另一种就是本文要介绍的Razor,它使用@符号。

      一般来说,Razor是和MVC紧密联系在一起的。但在ASP.NET 4.5中,这种视图引擎也可以为Web Pages开发提供支持。

    创建Example

      定义Model,代码如下:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace MartinMvc.Models
    {
        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 { get; set; }
        }
    }
    

      定义Controller:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using MartinMvc.Models;
    
    namespace MartinMvc.Controllers
    {
        public class ProductController : Controller
        {
            //
            // GET: /Product/
    
            Product myProduct = new Product
            {
                ProductID =1,
                Name="Martin",
                Category = "A boat",
                Description = "WaterSprots",
                Price = 275M
            };
    
            public ActionResult Index()
            {
                return View(myProduct);
            }
        }
    }

      这里定义了一个Index的action,调用View()时没有指定View的名称,那么系统会使用默认的View。

      在Index的action上点击右键,选择“Add View...”,在弹出的界面中选择“Create a strongly-typed view”,如下图:

      点击“Add”后得到下面的页面:

    @model MartinMvc.Models.Product
    
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    </head>
    <body>
        <div>
            
        </div>
    </body>
    </html>

      在具体学习Razor前,有一点要牢记心中,那就是,视图的作用就是将模型的一个或多个部分信息展示给用户。也就是说,最后生成的页面中的数据来自于模型。

    使用Model Object

      首先看视图中的第一行:

    @model MartinMvc.Models.Product

      Razor表达式起始于@符号。在这里@model定义了从action传送给view的model object。我们可以通过@Model像使用普通的Product对象一样来操作,比如得到它的属性,调用它的方法。比如:

    @model MartinMvc.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>

      执行该页面,可以在页面上看到action传递给view的product的Name属性值。

       使用了@model表达式后,我们告诉MVC使用的是什么类型的对象,然后MVC会在我们使用@Model的属性或方法时给出提示,就像在后台代码中使用一样。

    使用Layouts

      看下面的语句。

    @{
        Layout = null;
    }

      这是一个Razor代码块,允许我们在其中编写C#代码。开始于@{,结束于}

      从上面的代码可以看到,我们定义了Layout属性为null。在MVC应用程序中,Razor View最终是编译成C#类的,而它的基类定义了一个Layout属性。这些后续文章会介绍。将Layout设置为null就是告诉MVC,这个View是自包含的。

      在真实的项目中会有很多View,我们一般希望在这些整个Web页面上保持一致性。这时,Layout作为一个模板就可以发挥很大的作用。它可以定义各个页面需要的JS库,定义一致的页面风格,这和母版页的作用一致。

    创建Layout

      要创建一个Layout,在Views文件夹上右键,选择“Add New Item”,然后选择“MVC 4 Layout Page(Razor)”。

      我们会发现创建的Layout文件名是以“_”开头的。这是因为在Views文件夹中有两类文件,一类是返回给用户的,一类是帮助文件不直接返回给用户,Layout就属于帮助文件。

      一个简单的Layout代码如下:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>@ViewBag.Title</title>
        </head>
        <body>        
            <div>
              @RenderBody()
            </div>
        </body>
    </html>

      @RenderBody()部分会插入action方法指定的视图内容。还有一个@ViewBag在这里是为了设置页面Title,@ViewBag.Title的值可以在每个View中自定义。

    设置Layout

      为了把Layout设置到我们的View,我们只需要定义View中的Layout属性。

      设置了Layout的View如下:

    @model MartinMvc.Models.Product
    
    @{
        Layout = "~/Views/_Layout.cshtml";
        ViewBag.Title = "Product Name";
    }
    
    Product Name: @Model.Name

      这里可以看出Layout的两个好处。一个是可以简化我们的View,二是假如要改变所有View的布局或风格,我们只需要修改Layout。

    使用视图起始文件(View Start File)

      如果我们的每个View都设置使用了Layout,当需要换一个Layout时,就需要修改每个View,这样枯燥乏味的工作让人厌倦。幸运的是,我们有视图起始文件。当渲染一个View时,MVC会寻找一个_ViewStart.cshtml。这个文件中的内容会被认为包含在每一个View中,我们可以在这里为所有View设置Layout。

      下面是视图起始文件的内容:

    @{
        Layout = "~/Views/Shared/_Layout.cshtml";
    }

      非常简单,只是设置了Layout。相应的,我们可以把别的View中设置的Layout代码去除。

      MVC会自动寻找这个文件并使用其中的内容。我们在View中设置的内容可以覆盖这里设置的内容,就像子类方法覆盖基类方法。

    演示Shared Layout

      

  • 相关阅读:
    补发《超级迷宫》站立会议九
    补发《超级迷宫》站立会议八
    补发《超级迷宫》站立会议七
    补发《超级迷宫》站立会议六
    一周开发项目
    所学的内容
    开发项目和所用时间 感想
    自我介绍
    大容量数据转移操作命令——BULK INSERT(类似于BCP)
    字符编码与文件处理
  • 原文地址:https://www.cnblogs.com/fxb248/p/3210266.html
Copyright © 2011-2022 走看看