ASP.NET MVC3 实例(五) Razor 布局简介

时间:2022-11-28 20:30:04

ASP.NET MVC3中新增的 Razor 视图引擎有很多的优势,关于使用 Razor 的优势从前几篇的文章中也能看出一些,我们的 Android 博客项目就采用了 Razor。本篇将简单的介绍下 MVC3 中 Razor 视图引擎中页面布局。

使用 Razor 视图引擎,我们会发现不同于 .ASPX 视图,它没有使用母板页。下边我们看看 Razor 布局技术,首先看看我们项目中的公共视图,如下:

 

可见,我们分别定义了页面的页头、页脚等,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()”的方法(方法名没取好),用来显示我们最近发表的文章,我这里并没有具体的实现,而是取出了所有的文章,下图为方法定义:

 

最后,我们在需要显示的页面中调用这个方法即可。当然了,Android 博客项目中希望在各个页面中都显示最新发布的文章,所以我在"_Layout.cshtml"页中调用了这个方法,如第18行。

好了,本篇关于 ASP.NET MVC3 中 Razor 布局的简单介绍就到这里,希望对学习 ASP.NET MVC3 的朋友能带来一些帮助。到此我们已经了解了 ASP.NET MVC3 三层结构以及数据的查询与显示、Razor 部局等,下一篇我们会看看 ASP.NET MVC3中的添加、修改和删除操作。