追求艺术的脚步
Be the change you want to see in the world.Things are always as hard as you think but always as easy as you do.

概述

  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

  

posted on 2013-07-24 11:28  小笨笨  阅读(618)  评论(0编辑  收藏  举报