通过

使用视图母版页创建页面布局 (C#)

  • 项目

由 Microsoft

下载 PDF

本教程介绍如何利用视图母版页在应用程序中为多个页面创建通用页面布局。 例如，可以使用视图母版页来定义双列页面布局，并将双列布局用于 Web 应用程序中的所有页面。

使用视图母版页创建页面布局

本教程介绍如何利用视图母版页在应用程序中为多个页面创建通用页面布局。 例如，可以使用视图母版页来定义双列页面布局，并将双列布局用于 Web 应用程序中的所有页面。

还可以利用视图母版页在应用程序中的多个页面之间共享常见内容。 例如，可以在视图母版页中放置网站徽标、导航链接和横幅广告。 这样，应用程序中的每个页面都会自动显示此内容。

本教程介绍如何创建新的视图母版页，以及如何基于母版页创建新的视图内容页。

创建视图母版页

首先创建一个定义双列布局的视图母版页。 通过右键单击“视图”\“共享文件夹”，选择菜单选项“ 添加”、“新建项”，然后选择“ MVC 视图母版页 ”模板，将新的视图母版页添加到 MVC 项目， (请参阅图 1) 。

添加视图母版页

图 01：添加视图母版页 (单击以查看全尺寸图像)

可以在应用程序中创建多个视图母版页。 每个视图母版页可以定义不同的页面布局。 例如，你可能希望某些页面具有双列布局，而其他页面则希望具有三列布局。

视图母版页看起来非常类似于标准 ASP.NET MVC 视图。 但是，与普通视图不同，视图母版页包含一个或多个 <asp:ContentPlaceHolder> 标记。 标记 <contentplaceholder> 用于标记母版页中可在单个内容页中重写的区域。

例如，清单 1 中的视图母版页定义双列布局。 它包含两个 <contentplaceholder> 标记。 每列一个 <ContentPlaceHolder> 。

列表 1 – Views\Shared\Site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs" Inherits="MvcApplication1.Views.Shared.Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
     <title></title>

     <style type="text/css">

     html
     {
           background-color:gray;
     }

     .column
     {
          float:left;
          width:300px;
          border:solid 1px black;
          margin-right:10px;
          padding:5px;
          background-color:white;

          min-height:500px;
     }

     </style>

     <asp:ContentPlaceHolder ID="head" runat="server">
     </asp:ContentPlaceHolder>
</head>
<body>

     <h1>My Website</h1>

     <div class="column">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
          </asp:ContentPlaceHolder>
     </div>
     <div class="column">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
          </asp:ContentPlaceHolder>
     </div>

</body>
</html>

清单 1 中视图母版页的正文包含两个对应于这两 <div> 列的标记。 级联样式表列类应用于这两个 <div> 标记。 此类在母版页顶部声明的样式表中定义。 可以通过切换到“设计”视图来预览视图母版页的呈现方式。 单击源代码编辑器左下角的“设计”选项卡， (请参阅图 2) 。

在设计器中预览母版页

图 02：在设计器中预览母版页 (单击以查看全尺寸图像)

创建视图内容页

创建视图母版页后，可以基于视图母版页创建一个或多个视图内容页。 例如，可以通过以下方式为主控制器创建索引视图内容页：右键单击 Views\Home 文件夹 ，选择“添加”、“新建项目”，选择 “MVC 视图内容页 ”模板，输入名称 Index.aspx，然后单击“ 添加 ”按钮 (请参阅图 3) 。

添加视图内容页

图 03：添加视图内容页 (单击以查看全尺寸图像)

单击“添加”按钮后，将显示一个新对话框，可用于选择要与视图内容页关联的视图母版页 (请参阅图 4) 。 可以导航到我们在上一部分中创建的 Site.master 视图母版页。

选择母版页

图 04：选择母版页 (单击以查看全尺寸图像)

基于 Site.master 母版页创建新的视图内容页后，将获取清单 2 中的文件。

清单 2 – Views\Home\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>

请注意，此视图包含一个 <asp:Content> 对应于视图母版页中 <asp:ContentPlaceHolder> 每个标记的标记。 每个标记都包含 <asp:Content> 一个 ContentPlaceHolderID 属性，该属性指向它所替代的特定 <asp:ContentPlaceHolder> 。

此外，请注意，清单 2 中的内容视图页面不包含任何正常的开始和结束 HTML 标记。 例如，它不包含开始和结束 <html> 或 <head> 标记。 视图母版页中包含所有正常开始和结束标记。

要在视图内容页中显示的任何内容都必须放在 标记中 <asp:Content> 。 如果在这些标记之外放置任何 HTML 或其他内容，则在尝试查看页面时会收到错误。

无需在内容视图页中替代母版页中的每个 <asp:ContentPlaceHolder> 标记。 仅当想要将标记替换为特定内容时，才需要重写 <asp:ContentPlaceHolder> 标记。

例如，清单 3 中修改后的索引视图仅包含两个 <asp:Content> 标记。 <asp:Content>每个标记都包含一些文本。

清单 3 – Views\Home\Index.aspx (modified)

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

     <h1>Content in first column!</h1>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">

     <h1>Content in second column!</h1>

</asp:Content>

当请求清单 3 中的视图时，它将呈现图 5 中的页面。 请注意，视图呈现一个包含两列的页面。 此外，请注意，视图内容页中的内容与视图母版页中的内容合并

“索引视图内容”页

图 05：“索引视图内容”页 (单击以查看全尺寸图像)

修改视图母版页内容

使用视图母版页时几乎立即遇到的一个问题是，当请求不同的视图内容页时，修改视图母版页内容的问题。 例如，你希望 Web 应用程序中的每个页面都有唯一的标题。 但是，标题在视图母版页中声明，而不是在视图内容页中声明。 那么，如何为每个视图内容页面自定义页面标题？

有两种方法可以修改视图内容页显示的标题。 首先，可以将页面标题分配给在视图内容页面顶部声明的 指令的 title 属性 <%@ page %> 。 例如，如果要将页面标题“Super Great Website”分配给“索引”视图，则可以在“索引”视图的顶部包含以下指令：

<%@ page title="Super Great Website" language="C#" masterpagefile="~/Views/Shared/Site.Master"
            autoeventwireup="true" codebehind="Index.aspx.cs" inherits="MvcApplication1.Views.Home.Index"%>

将索引视图呈现到浏览器时，所需的标题将显示在浏览器标题栏中：

浏览器标题栏

有一个重要要求，即母版视图页必须满足才能使 title 属性正常工作。 视图母版页必须包含一个 <head runat="server"> 标记，而不是其标头的普通 <head> 标记。 <head>如果标记不包含 runat=“server”属性，则不会显示标题。 默认视图母版页包含所需的 <head runat="server"> 标记。

从单个视图内容页修改母版页内容的替代方法是将要修改的区域包装在标记中 <asp:ContentPlaceHolder> 。 例如，假设你不仅要更改标题，还要更改由主视图页面呈现的元标记。 清单 4 中的母版视图页在其<head>标记中包含一个<asp:ContentPlaceHolder>标记。

清单 4 – Views\Shared\Site2.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.Master.cs" Inherits="MvcApplication1.Views.Shared.Site2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

     <asp:ContentPlaceHolder ID="head" runat="server">
          <title>Please change my title</title>
          <meta name="description" content="Please provide a description" />
          <meta name="keywords" content="keyword1,keyword2" />
     </asp:ContentPlaceHolder>
</head>
<body>
     <div>

          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

          </asp:ContentPlaceHolder>
     </div>
</body>
</html>

请注意， <asp:ContentPlaceHolder> 清单 4 中的标记包括默认内容：默认标题和默认元标记。 如果未在单个视图内容页中重写此 <asp:ContentPlaceHolder> 标记，将显示默认内容。

清单 5 中的内容视图页面将覆盖 <asp:ContentPlaceHolder> 标记，以显示自定义标题和自定义元标记。

列表 5 – Views\Home\Index2.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site2.Master" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <title>The Index2 Page</title>
     <meta name="description" content="Description of Index2 page" />
     <meta name="keywords" content="asp.net,mvc,cool,groovy" />    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

     Just some content in the body of the page.

</asp:Content>

总结

本教程提供了查看母版页和查看内容页的基本简介。 你已了解如何创建新的视图母版页并基于它们创建视图内容页。 我们还介绍了如何从特定视图内容页修改视图母版页的内容。

上一页下一页