使用Razor来进行页面布局

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

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

　　1.指定母版与加载机制

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

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

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

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

@{
    Layout = null;
}

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

　　然后我们来看看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>

　注意@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>

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

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

2.使用Partial视图

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

　　比如上面的母版页，我们可以把它的头部和底部剥离出来，在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>

<!--_FooterPartial.cshtml-->
<div id="footer">
© 2008-2012 John Connor All rights reserved.
</div>

　可以看出，提取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>

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