使用母版页时更改内容占位符的样式

Question

我有一个网站（VS2010、asp.net、VB）并且我正在使用母版页。我还有其他几个页面，在其中一个页面上，我想将背景颜色设置为内容占位符。我正在使用样式表并在 .aspx 页面上有以下代码。 （这只是测试代码）

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Dashboard2.aspx.vb" Inherits="Dashboard2" %>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="body_color">
<table id="mainDisplay">
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
</div>
</asp:Content>

我已尝试引用内容占位符的 id 但不起作用。

以下是表格的 CSS，我将其水平和垂直居中。

#mainDisplay
{
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    width:900px;
    height:450px;
}

更新代码以在 aspx 页面上显示所有内容

Answer 1

ContentPlaceHolder 元素不会在客户端代码上呈现。查看您生成的源代码并检查。您需要将样式应用于 ContentPlaceHolder 中的 div。

例子：

<style>
    #placeHolderDiv {
        width: 1000px;
        height: 650px;
        background-color: #AAA;
    }
    #mainDisplay {
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        width: 900px;
        height: 450px;
        background-color: #DDD;
    }
</style>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div id="placeHolderDiv">
        <table id="mainDisplay">
...

Answer 2

解决方案 #1：CSS

如果这是一个 CSS 问题，并且您很容易发现内容周围的空白，那么您可能需要调整设置 div 样式的方式。尝试给容器 div（包含背景颜色的桌子周围的那个）这个类：

.container-div 
{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    top:100px;
}

这假设您希望容器 div 顶部有 100 像素的间隙。

---

解决方案 #2：使用 jQuery 更改背景

在内容页面的标签内添加一个脚本标签。在 script 标签中，放置一个 jQuery 代码来更改相应背景层的类。以下示例假设您的背景

例子：

母版页 HTML

<body class="default-bg">
    <p>This is your content outside the ASP content place holder.</p>

    <asp:ContentPlaceHolder runat="Server" ID="ContentPlaceHolder1">
    </asp:ContentPlaceHolder>
</body>

内容页面 HTML

    <script>
        $(function(){
            $('.my-background-layer').removeClass('default-bg').addClass('alternate-bg');
        )};
    </script>



    <div>
        <table id="mainDisplay">
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
            <tr>
                <td>a</td>
                <td>a</td>
                <td>a</td>
            </tr>
        </table>
    </div>
</asp:Content>

CSS

.default-bg {background:white;}
.alternate-bg {background:grey;}

---

请记住，ContentPlaceHolders 旨在仅替换母版页中的代码段。我遵循的一个好方法是在母版页的标题部分中放置至少两个 ContentPlaceHolder。

第一个用于您的默认 CSS 和 Javascript 引用，而第二个用于附加内容页面引用。如果您从内容页面中忽略这些 ContentPlaceHolders，则您的母版页中的默认设置将生效。但是，如果您想更改主要的 CSS 或 Javascript 引用，您只需为该 ContentPlaceHolder 添加一个标签并为该内容页面添加您的代码。

---

如何实现jQuery

​​>

我想你可能需要一些关于如何安装 jQuery 的速成课程，因为你提到你不喜欢 javascript（顺便说一句，你迟早要学习它）。这是一个体面说明的链接：

• Implementing jQuery (Stack Overflow)