ASP.NET 视图引擎攻略

开发 后端
即使是写代码的本人,闭合也是一件麻烦的事情,并且VS对”<% %>“的自动缩进和对齐支持不很友好,看惯了整齐的代码,面对自己写出的凌乱的东西会很不爽。

引子

看下面一段MVC 2.0的代码。

<%if (Model != null)  
{%> 
 <p><%=Model%></p> 
<%}%> 
<%else  
{%> 
 //Do something  
<%}%> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

我们站在一个读者的立场上来看,”<% %>“这种标记C#代码的方法是十分蛋疼的。

如果写这段代码的人没有良好的缩进和对齐习惯的话,一段逻辑较为复杂的代码就会堆砌着杂乱无章的"<%"%>"--匹配它们就是一件头疼的事情,会让读者望而生畏。

即使是写代码的本人,闭合也是一件麻烦的事情,并且VS对”<% %>“的自动缩进和对齐支持不很友好,看惯了整齐的代码,面对自己写出的凌乱的东西会很不爽。

随着MVC 3.0的发布,新的Razor视图引擎解决了这个问题。

Razor的意思的就是 剃刀,可见它灰常犀利。引言中的代码,我们用Razor的语法来写的话:

@if (Model != null)    
{  
  <p>@Model</p> 
}  
else  
{  
    //Do something   

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

Razor使用了"@"来标记一段C#代码,并帮我们进行了内部的闭合,是不是感觉清爽多了?

Razor在减少代码冗余、增强代码可读性和vs 智能感知方面,都有着很大的优势。下面我们来具体的介绍如何在ASP.NET MVC 3.0中使用Razor。

一,创建基于Razor的Web程序

首先你的开发环境必须安装.NET Framework4.0,然后在VS中新建项目时选择ASP.NET MVC 3 应用程序,在选项页面中选择视图引擎为Razor,如图1:

  图1

然后创建项目,就会得到一个基于Razor的Web项目了,如图2。  

   图2

相信熟悉MVC的看官们对此结构并不陌生。注意红框部份,Razor的页面是以cshtml为后缀的,下面我们来讲下如何使用Razor来进行页面布局。

二,使用Razor来进行页面布局

UI设计师们现在也讲究页面设计的语义化和结构化,把一个页面分成很多个模块,使用语义化的类名或id来标识这些模块。Razor推出了新的布局解决方案来迎合这一潮流。

这里涉及到Razor的一些语法,大家可以不深究"@"后面的内容,讲到页面布局,你只要专注与HTML代码就可以了。语法会在后面补充。

1.指定母版与加载机制

首先我们来看_ViewStart.chhtml页面,它的内容很简单:

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

  • 1.
  • 2.
  • 3.

这句代码指定了默认的母版的位置: 当前应用程序根目录下<"~"的含义>的Views/Shared/_Layout.cshtml

除非特殊情况,比如视图是Partial视图,或显示的在视图中添加以下代码指示不使用母版:

@{  
    Layout = null;  

  • 1.
  • 2.
  • 3.

其他情况下,该指定页就是视图的母版页。

然后我们来看看Razor母版页_Layout.cshtml的内容:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
    <title>@ViewBag.Title</title> 
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
</head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<body> 
    <div class="page"> 
        <div id="header"> 
            <div id="title"> 
                <h1>我的 MVC 应用程序</h1> 
            </div> 
            <div id="logindisplay"> 
                欢迎 <strong>@User.Identity.Name</strong>!  
            </div> 
            <div id="menucontainer"> 
                <ul id="menu"> 
                    <li>@Html.ActionLink("主页", "Index", "Home")</li> 
                    <li>@Html.ActionLink("关于", "About", "Home")</li> 
                </ul> 
            </div> 
        </div> 
        <div id="main"> 
            @RenderBody()<!--一般视图内容的占位符--> 
        </div> 
        <div id="footer"> 
        </div> 
    </div> 
</body> 
</html> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.

注意@RenderBody()这个方法相当于一个占位符,假如我们的首页视图Index.cshtml是这样,

@{  
    ViewBag.Title = "主页";  
}  
 
<h2>@ViewBag.Message</h2> 
<p> 
    若要了解有关 ASP.NET MVC 的更多信息,请访问 <a href="http://asp.net/mvc" title="ASP.NET MVC 网站">http://asp.net/mvc</a>。  
</p> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

一般的视图处理,比如当服务器响应一个HomeController.Index()请求的时候,需要返回Index视图,

首先会加载母版页_Layout.cshtml的内容,遇到@RenderBody()时,就用首页视图的内容置换到这里,最后处理完成返回静态页面。

2.使用Partial视图

MVC 2.0中,你需要使用<asp:Content></asp:Content>标签来进行页面分割,太多的话自己都忘记了哪个对应的是哪个部份。

在Razor中,可以将需要剥离出来的部份作为一个单独的Partial视图,比如网站的头部(Logo,导航等等..),底部(友情链接,版权声明等等..),或是某个功能模块(登陆框等等..)。

比如上面的母版页,我们可以把它的头部和底部剥离出来,在Share文件夹下右键添加/视图,选择创建为分部视图,如图3:

    图3

依照上述步骤创建”_HeaderPartial.cshtml“和"_FooterPartial.cshtml"两个视图

<!--_HeaderPartial.cshtml--><div id="header"> 
            <div id="title"> 
                <h1>我的 MVC 应用程序</h1> 
            </div> 
            <div id="logindisplay"> 
                欢迎 <strong>@User.Identity.Name</strong>!  
            </div> 
            <div id="menucontainer"> 
                <ul id="menu"> 
                    <li>@Html.ActionLink("主页", "Index", "Home")</li> 
                    <li>@Html.ActionLink("关于", "About", "Home")</li> 
                </ul> 
            </div> 
        </div> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
<!--_FooterPartial.cshtml--><div id="footer"> 
© 2008-2012 John Connor All rights reserved.  
</div> 
  • 1.
  • 2.
  • 3.

可以看出,提取Partial视图很简单,就是把需要的内容提取出来,放在新建的Partial视图中。然后,我们还需要干一件事情,

类似于一般视图,Partial视图使用自己特有的占位符来替换原内容。我们这么干之后,原_Layout.cshtml页就变成了这样:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
    <title>@ViewBag.Title</title> 
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
</head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<body> 
    <div class="page"> 
        @Html.Partial("_HeaderPartial")<!--_HeaderPartial视图占位符--> 
        <div id="main"> 
            @RenderBody()   
        </div> 
         @Html.Partial("_FooterPartial")<!--_FooterPartial视图占位符--> 
    </div> 
</body> 
</html> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.

这样,页面的布局是不是更清爽简洁了?如同一般视图,返回请求时会先加载母版页然后遇到占位符时加载相应的Partial视图,最后返回处理完成的静态页面。

三,Razor语法简介与应用

1.语法简介

如果我们希望在HTML代码中绑定数据,比如说我们有一个产品的对象Product,需要绑定产品的名称Product.Name,只需要在变量前面加"@"即可,

也可以使用"@(expression)"绑定一个表达式:

<p>@Product.Name</p> 
<p>@(Product.Price*0.8)</p> 
  • 1.
  • 2.

Razor中使用”@{code}“来标识一段C#代码,代码段可以出现在任何位置,并且支持与HTML混写:

@{  
    var product=new product();  
    product.Name="pen";  
    product.Price=1.00;    <p>@product.Name</p>    <p>@product.Price</p>} 
  • 1.
  • 2.
  • 3.
  • 4.

使用循环或条件语句时直接加"@"前缀,可以控制页面逻辑:

@foreach(var product in products)  
{  
    <p>@item.Name</p> 
} 
  • 1.
  • 2.
  • 3.
  • 4.

Razor中注释是"@**@",即可以注释Html代码,也可以注释C#代码,在代码块中仍可使用C#的注释方式:

@{  
    var product=new product();  
    product.Name="pen";  
    //product.Price=1.00;  
    <p>@product.Name</p> 
    @*<p>@product.Price</p>*@  
 } 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

2.ASP.NET MVC3.0 Web中的应用

假设我们有一个Product类位于JohnConnor.Data命名空间下,有NamePrice两个属性,HomeController.Index()方法返回一个List<Product>对象给Index视图,打印所有产品名称,并且点击产品名称时,弹出产品价格。

HomeController.Index()方法如下:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
using JohnConnor.Data;  
 
namespace JohnConnor.Web.Controllers  
{  
    public class HomeController : Controller  
    {  
        public ActionResult Index()  
        {  
            var products = new List<Product>()  
            {  
                new Product{ Name="钢笔"Price=11.55M},  
                new Product{ Name="铅笔"Price=2.17M},  
                new Product{ Name="圆珠笔"Price=5.98M},  
            };  
            return View(products);  
        }  
    }  

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.

我们来改一下Index视图演示一下Razor的简单应用。

@using JohnConnor.Data;  
@model List<Product> 
@{  
    ViewBag.Title = "主页";//母版中ViewBag.Title用于绑定Title标签,这里进行赋值。  
}  
<h2>Razor</h2> 
@foreach (var product in Model)  
{  
    //遍历所有的产品  
    <input type="button" name="@product.Name"   value="@product.Name" onclick="alert(@product.Price)" /> 

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

在一般视图中,首先声明视图模型,即Action返回的ViewResult对象的类型<也可以不声明,如果有返回对象建议声明>

这里的视图模型是一个List<Product>集合,因为Product位于using JohnConnor.Data命名空间,所以先添加了引用。

母版中ViewBag.Title用于绑定Title标签,在一般视图中就可以进行赋值来绑定页面的Title 。

如果你不想使用母版,就在代码块中添加"Layout = null;"。

最后是就是一些数据绑定,或者是逻辑的处理。

Razor的基本内容大概就讲这些了,当然它还有很丰富的底蕴,需要在实际的运用过程中去学习,一篇短文是无法涵盖所有信息的。

最后提一点,Razor暂时没有设计视图,这是比较悲摧的一点。相信之后会有的。如果对Razor的使用有任何问题,可以在此提出,能力范围内的问题我都可以提供帮助。

原文地址:http://www.cnblogs.com/John-Connor/archive/2012/05/08/2487200.html

【编辑推荐】

责任编辑:张伟 来源: 菊花台泡茶的博客
相关推荐

2012-06-26 10:24:51

Asp.Net框架Razor

2009-07-21 15:11:14

ASP.NET Rou

2021-06-22 16:59:56

微软.NETC# 软件开发

2014-07-29 10:00:30

ASP.NETMVCAutoFac

2009-08-07 15:32:28

ASP.NET复合控件

2009-08-10 14:25:33

ASP.NET服务器控

2009-07-28 17:17:19

ASP.NET概述

2009-08-03 14:22:33

什么是ASP.NET

2009-07-22 17:45:35

ASP.NET教程

2009-10-09 10:52:43

ASP.NET模板引擎

2009-07-27 12:22:03

ASP.NET和ASPASP.NET入门教程

2009-08-04 15:13:38

2009-08-10 13:32:15

ASP.NET TimASP.NET组件设计

2009-07-29 17:11:25

ASP.NET ISA

2009-07-28 09:02:32

asp.net aja

2009-08-03 17:35:07

ASP.NET WebASP.NET编程工具

2009-07-29 16:08:07

ASP和ASP.NET

2011-07-12 15:03:28

2009-08-03 13:38:18

ASP.NET编程模型

2011-08-08 10:46:15

ASP.NET MVC
点赞
收藏

51CTO技术栈公众号