详解ASP.NETMVC3新的Layout布局系统

I:回忆MVC2当中MasterPage那些事

创新互联公司为客户提供专业的网站制作、做网站、程序、域名、空间一条龙服务，提供基于WEB的系统开发. 服务项目涵盖了网页设计、网站程序开发、WEB系统开发、微信二次开发、移动网站建设等网站方面业务。

大家先看下面的代码：

 
 
 
 
  
  
  
   
  
  
  
   
  
  
  
  <%@ Master Language="C#"   
  
  
  
      Inherits="System.Web.Mvc.ViewMasterPage" %> 
  
  
  
  Master head  
  
  
  
   
  
  
  
  Master1...  
  
  
  
   
  
  
  
  Master2...  
  
  
  
   
  
  
  
  Master3...  
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
  <%@ Page Language="C#"   
  
  
  
      MasterPageFile="~/Views/Shared/Site.Master"   
  
  
  
      Inherits="System.Web.Mvc.ViewPage" %> 
  
  
  
   
  
  
  
  MainContent...  
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
  OtherContent...  
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
  AnyContent...  
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
  Master head  
  
  
  
  MainContent...  
  
  
  
  Master1...  
  
  
  
  OtherContent...  
  
  
  
  Master2...  
  
  
  
  AnyContent...  
  
  
  
  Master3...

我们可以看到在Master中ContentPlaceHolder服务端控件起到了一个占位符的作用.***输出的,其实是在View当中的Content服务端控件内的内容,接下来开始介绍Layout.

II:ASP.NET MVC3 新的Layout布局系统

在MVC3当中我们可以利用新的Layout布局系统来代替掉原来在MVC2当中使用的MasterPage(当然在MVC3当中,如果你是继续使用ASPX视图引擎的话,那么还是可以用回原来的MasterPage,然后~~~~然后~你会和runat=”server”保持着从.NET 1.x到.NET 4.0以来从没有间断过的合作关系,可谓缘分呀!).

我们在VS2010 MVC3项目中创建Item时,从创建向导中可以看到以下新增的几个Item

下面进行逐一介绍:

Layout页:

该家伙其实就相当于原来的Master文件.为站点的统一主题界面和减少大部分冗余的Html,head,body标记曾作出过很大的贡献.可谓是功不可莫啊!MasterPage他的诞生是在.NET 2.0版本!在服役到.NET4.0版本后出现了一个新成员[Layout]去向他挑战.MasterPage能否经得起新成员的挑战呢?这个还是得留各位观众做详细对比吧!

Partial页:

相当于原来的UserControl.它可以为你减轻不少需要重复劳动的时间!

View页:

就是View啦.创建它时.一般都是在不需要使用Layout/MasterPage的时候.

View Page with Layout:

等同于原来的View Content Page.它的功能只是为了实现原来在Layout/MasterPage下所定义的占位符.当然在原来的MasterPage中如果你没有实现原先定义的占位符,那么在最终合并输出的时候MasterPage占位符那里就会输出空.

以上这4个新成员都是可以利用新的Razor视图引擎进行工作.如果你还没了解Razor那么可以参考我的另外一编文章

1.Layout页基础:

如果你有使用MasterPage的经验,你将会记得如下的几个东西

A:<%@ Master %>

B:<%@ Page %>

但是在Layout中,以上的这些东西将会消失.(作者不排除有WebPages和WebForms兼容工作的可能性)

取而代之的新功能是:

A.Layout属性:等同于原来的MasterPageFile属性.

B.@RenderBody()方法:直接渲染整个View到占位符处,而不需要原来所使用的.

C.@RenderPage()方法:渲染指定的页面到占位符处.

D.@RenderSection方法:声明一个占位符,和原来的功能类似.

E.@section标记:对@RenderSection方法声明的占位符进行实现,和原来的功能类似.

1.1.@RenderBody()方法的使用

首先在~/Views/Shared/下创建一个名为_MyLayout.cshtml的LayoutPage文件,并将默认的内容替换为如下:

 
 
 
 
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
      @ViewBag.Title 
  
  
  
   
  
  
  
   
  
  
  
       
  
  
  
          开始渲染Body 
  
  
  
          @RenderBody()  
  
  
  
          渲染Body结束

然后打开在~/Views/Home/Index.cshtml文件并替换为如下的内容:

 
 
 
 
  
  
  
  @{  
  
  
  
      ViewBag.Title = "首页";  
  
  
  
  }  
  
  
  
   
  
  
  
   
  
  
  
      这里就是渲染Body啦.~~不需要写神马<asp:Content />,其实因为RenderBody()不在有歧义.

这个与之前MasterPage的代码量相比之下减少了许多,而更为简洁明了.

在此,你或许会有疑问了.在_Layout中定义的RenderBody()是Render那个页啊?

答:其实***Render页的归属就是Render你所访问的那个页,比如你访问/Home/Index.那么Render就是Home控制器下的Index.cshtml这个文件, 如果访问的是/Ohter/SomePage时,那么Render的是Ohter控制器下的SomePage这个.cshtml!

在这里可能有的朋友没有接触过MVC.在此补个基础,在默认的路由设置选项下:

public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional }
// Parameter defaults
);
}

请求地址:http://localhost/Home/Index的工作流程为下图(这里没有考虑Layout):

如果这个RenderBody满足不了你的业务需求,请放心,在此介绍另外一个Render方式RenderPage().它可以让你指定要Render的页.

在~/Views/Home/文件夹下新建立一个ViewPage1.cshtml文件,将内容改为如下:

@ViewBag.Title
开始渲染Body
@RenderBody()
渲染Body结束
开始渲染其他页
@RenderPage("~/Views/Home/ViewPage1.cshtml")
渲染其他页结束

@{
//some code
}
@ViewBag.Title
开始渲染Body
@RenderBody()
渲染Body结束
开始渲染其他页
@RenderPage("~/Views/Home/ViewPage1.cshtml")
渲染其他页结束
HOHO,开始学习Section了
开始渲染Section
声明方式1(推荐):SectionA:
@RenderSection("SectionA", false)
-------
声明方式2:SectionB:
@{
if (IsSectionDefined("SectionB"))
{
@RenderSection("SectionB")
}
}
-------
渲染Sction结束

@{
ViewBag.Title = "首页";
//
// some code
//
}
@section SectionA{
这里是SectionA:也不需要写神马runat="server"啊,有木有
}
@section SectionB{
这里是SectionB:也不需要写神马<asp:Content />啊,有木有
}
这里就是渲染Body啦.~~不需要写神马<asp:Content />,其实因为RenderBody()不在有歧义.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient; //在这里就用ADO.NET方式吧.EF我接触不久!
namespace Mvc3Application1
{
public class ReaderSQL_Date
{
private static readonly string _SQL_CONN_STR = "server=.\\mssqlserver,1433;uid=sa;pwd=yourpwd;database=student;";
public static IList GetAllStudent()
{
//这里仅仅是做演示,生产环境并不这样写
using (SqlConnection conn = new SqlConnection(_SQL_CONN_STR))
{
SqlCommand cmd = conn.CreateCommand();
cmd.CommandType = CommandType.Text;
cmd.CommandText = "SELECT [Sno],[Sname],[Sage] FROM [dbo].[STUDENT]";
IList result = new List();
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
result.Add(new StudentEntity
{
S_No = sdr.GetInt32(0),
S_Name = sdr.GetString(1),
S_Age = sdr.GetInt32(2)
});
}
}
//SqlConnection.ClearPool(conn); //可选清理连接池.
return result;
}
}
}
public class StudentEntity
{
public int S_No { get; set; }
public string S_Name { get; set; }
public int S_Age { get; set; }
}
}

@{
IList studentEntities = Mvc3Application1.ReaderSQL_Date.GetAllStudent();
}
@ViewBag.Title
@{

@foreach (Mvc3Application1.StudentEntity item in studentEntities)

{

}

学号	姓名	年龄
@item.S_No	@item.S_Name	@item.S_Age

}
开始渲染Body
@RenderBody()
渲染Body结束
开始渲染其他页
@RenderPage("~/Views/Home/ViewPage1.cshtml")
渲染其他页结束
HOHO,开始学习Section了
开始渲染Section
声明方式1(推荐):SectionA:
@RenderSection("SectionA", false)
-------
声明方式2:SectionB:
@{
if (IsSectionDefined("SectionB"))
{
@RenderSection("SectionB")
}
}
-------
渲染Sction结束

详解ASP.NETMVC3新的Layout布局系统

III:在Layout布局系统中实现类似于原来MasterPage功能的实现方式

IV:关于前篇文章中有热心的观众朋友们问到如何在Layout(MasterPage)中读取数据库并初始化页面的问题的解答