[转载]ASP.NET MVC Razor视图引擎攻略

[转载]ASP.NET MVC 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"; }

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

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

@{ Layout = null; }

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

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

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

一般的视图处理，比如当服务器响应一个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”两个视图:

　　 　　可以看出，提取Partial视图很简单，就是把需要的内容提取出来，放在新建的Partial视图中。然后，我们还需要干一件事情， 　　类似于一般视图，Partial视图使用自己特有的占位符来替换原内容。我们这么干之后，原_Layout.cshtml页就变成了这样:

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

三，Razor语法简介与应用

     1.语法简介

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

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

<p>@Product.Name</p>

<p>@(Product.Price*0.8)</p>

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

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

@foreach(var product in products)
｛

@item.Name

｝

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

@{
var product=new product();
product.Name=”pen”;
//product.Price=1.00;

@product.Name

@*

@product.Price

*@
}

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

假设我们有一个Product类位于JohnConnor.Data命名空间下,有Name和Price两个属性，HomeController.Index()方法返回一个List对象给Index视图，

打印所有产品名称，并且点击产品名称时，弹出产品价格。

HomeController.Index()方法如下:

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

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

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

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

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

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

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

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

　　希望大家多多支持。