在 ASP.NET 中使用 MasterPages

Posted 2023-03-05

技术标签:

【中文标题】在 ASP.NET 中使用 MasterPages【英文标题】：Using MasterPages in ASP.NET 【发布时间】：2014-07-19 00:18:28 【问题描述】：

我的应用程序现在有几个页面，我将开始使用母版页来减少 html 中的代码量。所以我创建了一个“使用母版页的 Web 表单”，目前我在其中创建了一个菜单栏：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="PersonnelMasterPage.master.cs" Inherits="bSimplex.Personnel.PersonnelMasterPage" %>


    <asp:ContentPlaceHolder ID="cnt_MenuBar" runat="server">
            <div class="bsimplex header-bar left">
        <div class="header-context clearfix header-label">
            <asp:Image ID="bsimplexPTLogo" runat="server" CssClass="small-logo" ImageUrl="~/Images/tracker logoOnly.png" />
            <label class="configurationlbl">Personnel Tracker</label>
        </div>
        <div class="menubarbest">
            <ul id="nav">
                <li  class="current"><a href="bPersonnelTrackerDashboard.aspx" >Home</a></li>
                <li><a href="#">Manager</a>
                    <ul>
                        <li><a href="#">Rota</a></li>
                        <li><a href="#">Holiday Requests</a></li>
                    </ul>
                </li>
                <li><a href="#">Absences</a>
                    <ul>
                        <li><a href="bSicknessForm.aspx">Sickness</a></li>
                        <li><a href="bLatenessForm.aspx">Lateness</a></li>
                        <li><a href="bMedicalLeaveForm.aspx">Medical Appointment</a></li>
                        <li><a href="OtherMedical.aspx">Other</a></li>
                    </ul>
                </li>
                <li><a href="#">Reports</a>
                    <ul>
                        <li><a href="#">Attendance Record</a></li>
                        <li><a href="#">Rota</a></li>
                    </ul>
                </li>
                <li><a href="Admin/Administration.aspx">Admin</a></li>
        </div>
    </div>
    </asp:ContentPlaceHolder>

然后在我刚刚创建的 Web 表单上，我添加了这个 Content Holder：

<%@ Page Title="" Language="C#" MasterPageFile="~/Personnel/PersonnelMasterPage.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="bSimplex.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cnt_MenuBar" runat="server">
</asp:Content>

首先，我的页面上没有显示任何内容，我想知道我做错了什么吗？

其次，我有这个菜单栏的 CSS 样式，这些样式会保持不变还是因为我已进入母版页，它们是否需要更改？

【问题讨论】：

如果你想在所有页面中显示菜单栏，你为什么要在子页面中再次覆盖。不要在子页面中包含“cnt_MenuBar”的任何内容控件 @malkam 我在哪里覆盖它？我对调用母版页菜单栏感到困惑。子页面中的将设置为空白。在 Master Page 中再声明一个 ContentPlaceHolder 以呈现 html 的其余部分，保留 cnt_menubar 以在所有页面中显示 Menu。 【参考方案1】：

在您的母版页上，不要将内容放入 ContentPlaceHolder。 CPH 是您要放置子页面内容的区域（使用 Content 控件）。

在您的母版页上，如果您将内容放在 ContentPlaceHolder 中，如果您在子页上添加相应的 Content 控件，它将被覆盖。因此，大多数时候您不会在母版页的 CPH 中添加任何内容。例外情况是，如果您想要一些“默认”内容，您可能会在某些子页面上覆盖这些内容。

顺便说一句，您的***母版页应该包含您网站的基本布局以及所有必需的标签（例如：<html><head><title><body> 等）。然后，您将这些 ContentPlaceHolders 放在您希望子页面添加其内容的位置。

您的 CSS 应该没问题，无需更改，尽管您希望从母版页而不是子页链接到它。

【讨论】：

我很困惑。我不会在我的子页面上调用带有内容标签的 contentplaceholder 吗？如果您希望子页面有内容，您可以。母版页在呈现给客户端时与子页合并。母版页有 ContentPlaceHolder 的任何地方，都是子页面的内容可以去的地方。例如，您可能对 MainContent、LeftSidebar、RightSidebar 和 Footer 有不同的 ContentPlaceHolder 区域。只是取决于你的布局。结帐Master Pages on MSDN。【参考方案2】：

占位符元素是一个因页面而异的区域。我认为您不希望菜单栏有所不同。因此，将菜单条码放在母版页中的占位符之前，或者最好放在用户控件中

【讨论】：

【参考方案3】：

您似乎想在多个页面之间共享菜单，所以我想试试这个：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="/css/style.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="bsimplex header-bar left">
        <div class="header-context clearfix header-label">
            <asp:Image ID="bsimplexPTLogo" runat="server" CssClass="small-logo" ImageUrl="~/Images/tracker logoOnly.png" />
            <label class="configurationlbl">Personnel Tracker</label>
        </div>
        <div class="menubarbest">
            <ul id="nav">
                <li  class="current"><a href="bPersonnelTrackerDashboard.aspx" >Home</a></li>
                <li><a href="#">Manager</a>
                    <ul>
                        <li><a href="#">Rota</a></li>
                        <li><a href="#">Holiday Requests</a></li>
                    </ul>
                </li>
                <li><a href="#">Absences</a>
                    <ul>
                        <li><a href="bSicknessForm.aspx">Sickness</a></li>
                        <li><a href="bLatenessForm.aspx">Lateness</a></li>
                        <li><a href="bMedicalLeaveForm.aspx">Medical Appointment</a></li>
                        <li><a href="OtherMedical.aspx">Other</a></li>
                    </ul>
                </li>
                <li><a href="#">Reports</a>
                    <ul>
                        <li><a href="#">Attendance Record</a></li>
                        <li><a href="#">Rota</a></li>
                    </ul>
                </li>
                <li><a href="Admin/Administration.aspx">Admin</a></li>
        </div>
    </div>
    <div>
        <asp:ContentPlaceHolder ID="cnt_Body" runat="server"></asp:ContentPlaceHolder>
    </div>
</body>

然后在 WebForms 页面上，执行以下操作：

<%@ Page Title="" Language="C#" MasterPageFile="~/Personnel/PersonnelMasterPage.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="bSimplex.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cnt_Body" runat="server">
    <h1>Sickness Form</h1>
    <p>Please fill out the following sickness form...</p>
</asp:Content>

【讨论】：

感谢您的回答很好，只有 2 个问题。首先，我的 CSS 样式现在没有出现。如何将样式链接回母版页？其次，我不明白母版页中的 CPH 是如何不包裹内容的，但仍然知道它需要它？您需要从母版页链接到 CSS，以便任何子页面都已经具有适当的样式。您所说的“不围绕内容”是什么意思？ @mason 在母版页的底部，您有一个名为“cnt_body”的 CHP，其中没有任何内容。该内容占位符如何知道其中包含哪些内容？它会从该 MasterPage 中获取所有内容吗？ @user3129331 内容页面“知道”母版页上的 ContentPlaceHolders。当用户请求页面时，子页面中的内容区域会合并到母版页上相应的 ContentPlaceHolders 中。去尝试一下，实现 Ben 的代码，应该很清楚它是如何工作的。另请查看我在回答的评论中提供的链接。 @mason 我想我明白了，这是否意味着如果我想向该母版页添加一些我只想在一半页面上使用的东西，那是不可能的吗？除非我使用 2 个母版页？

以上是关于在 ASP.NET 中使用 MasterPages的主要内容，如果未能解决你的问题，请参考以下文章

ASP.Net，母版页：每页样式表

将脚本添加到 asp.net 内容页面

控件与标准 HTML

无法修改 Controls 集合，因为控件包含代码块（即 <% ... %> ），动态添加具有 Masterpages 的控件

为现有网站创建母版页的指南

如何在 asp.net 中使用 ccavenue 支付网关