1.开发工具
Razor是MVC3中的一个视图模板引擎,所以,我们只需要在VS2010中安装一个MVC3的工具,就可以使用Razor了。
如果你不想使用MVC3,还有另外一种选择,那便是WebMatrix + VS 2010;WebMatrix提供了Razor模板的网站,但它并不是一个优秀的IDE,没有像VS一样的智能感知和编辑时错误提醒功能。所以,在使用WebMatrix创建了Razor引擎的网站后,可以在VS2010中打开进行编辑。本文示例所使用的就是这种方式。
2.Razor的文件类型
Razor支持两种文件类型,分别是.cshtml 和.vbhtml,其中.cshtml 的服务器代码使用了c#的语法,.vbhtml 的服务器代码使用了vb.net的语法。
由此也可以看出,Razor其实是一种服务器代码和HTML代码混写的代码模板,类似于没有后置代码的.aspx文件。
3.Razor语法之@符号
@字符是Razor中的一个重要符号,它被定义为Razor服务器代码块的开始符号。如果我们希望在网页中输出一个变量,或者当前日期,我们可以使用如下代码:
@{string productName = "台灯";} <span>@productName</span> <span>@DateTime.Now.ToString("yyyy-MM-hh")</span>
当你在完成这段代码的时候,你会发现VS 2010为我们提供了代码着色和智能感知:
运行这段代码,让我们看看浏览器的显示内容:
有这个示例可以看出,@符号标记了一个HTML代码的输出,在其后的变量、方法返回值和表达式运算结果会进行输出。
4.Razor语法之代码块定义
你可以使用@{code}来定义一段代码块。
@{ int num1 =10; int num2 =5; int sum = num1 + num2; @sum; }
在代码块中,我们编写代码的方式和通常服务器端代码的方式是一样的。另外,如果需要输出,例如上面的在页面中输出结果,我们可以使用@sum完成输出
另外,@(code)可以输出一个表达式的运算结果,上面的代码我们也可以写成这样:
@{ int num1 =10; int num2 =5; int sum = num1 + num2; @(num1 +num2); }
5.Razor语法之代码混写
Razor支持代码混写。在代码块中插入HTML、在HTML中插入Razor语句都是可以的。
@{ int num1 =10; int num2 =5; int sum = num1 + num2; string color ="Red"; <font color="@color">@sum</font> }
值得称赞的是,即使我们这样混写,也不影响VS2010的智能感知功能。
- 输出@符号:@@
- 输出Email地址:Razor模板会自动识别出Email地址,所以不需要我们进行任何的转换。而在代码块中,只需要使用 @:Tom@gmail.com 即可。@:表示后面的内容为文本。
- 输出HTML代码(包含标签):直接输出,string html = "<font color='red'>文本</font>"; @html
- 输出HTML内容(不包含标签):有两种方法,第一种:IHtmlString html=new HtmlString("<font color='red'>文本</font>"); @html; 第二种:string html = "<font color='red'>文本</font>"; @Html.Raw(html);
6.Razor语法之注释
这里所说的注释是指服务器端的注释,在Razor代码块中,可以使用C#的注释方式来进行注释,分别是//:(单行注释)和/**/(多行注释)。
另外,Razor还提供了一种新的服务器段代码注释,可以即注释C#代码,同时可以注释HTML代码,@**@,这种注释方式不受代码块的限制,在Razor代码中的任何位置都额可以。
@* 这是一个注释 <b>这个是注释</b> *@
ASP.NET MVC3中新增的 Razor 视图引擎有很多的优势,关于使用 Razor 的优势从前几篇的文章中也能看出一些,我们的 Android 博客项目就采用了 Razor。本篇将简单的介绍下 MVC3 中 Razor 视图引擎中页面布局。
使用 Razor 视图引擎,我们会发现不同于 .ASPX 视图,它没有使用母板页。下边我们看看 Razor 布局技术,首先看看我们项目中的公共视图,如下:
![](https://img-my.csdn.net/uploads/201212/26/1356486232_3709.png)
可见,我们分别定义了页面的页头、页脚等,Razor 中布局是非常简单的,类似我们以前使用的include加载方法。首先,我们看看"_layout.cshtml"中的代码,它类似于"ASPX"视图引擎中的母版页,如下:
第4行中,使用了ViewBag.Title,这样我们可以在各视图页指定各页面标题的名称,同理第8行指定body 的 id。如在Home页中:
第10行、21行使用了HtmlHelper.Partial()方法,分别将页头和页脚的局部视图加载进来,也没有太多可说的。16行中RenderBody()将各视图页的主体部分全部加载了进来,这样我们在"_layout.cshtml"页中完成了我们页面的布局,达到了复用的目的。最后在"_ViewStart.cshtml"中指定 Layout为我们定义的"_layout.cshtml"页,当然,我们还可以在"_ViewStart.cshtml"中根据需要加载不同的布局。
以上这些是 Razor 中基本的布局方法,很明显,如果复用的部分并不是静态的内容,想想我们在WebForm中使用的自定义控件。那么我们怎样在 Razor 视图中实现自定义控件一样的效果呢?在第18行中我们就实现了这个目的,下边就让我们看看,首先,我们在项目中添加了 App_Code 文件夹,并添加了名为“Latest.cshtml”的文件,如下:
接下来,我们使用helper类来定义了一个名为“Lastest()”的方法(方法名没取好),用来显示我们最近发表的文章,我这里并没有具体的实现,而是取出了所有的文章,下图为方法定义:
最后,我们在需要显示的页面中调用这个方法即可。所以我在"_Layout.cshtml"页中调用了这个方法,如第18行。
好了,本篇关于 ASP.NET MVC3 中 Razor 布局的简单介绍就到这里,希望对学习 ASP.NET MVC3 的朋友能带来一些帮助。到此我们已经了解了 ASP.NET MVC3 三层结构以及数据的查询与显示、Razor 部局等,下一篇我们会看看 ASP.NET MVC3中的添加、修改和删除操作。