ASP.NET 3.5：母版页样式表可变？答案

【问题标题】：ASP.NET 3.5: Master Page stylesheet variablized?ASP.NET 3.5：母版页样式表可变？
【发布时间】：2010-11-03 20:09:14
【问题描述】：

我是来自 PHP 和 ColdFusion 背景的 ASP.NET 新手，我有一个非常简单的问题：

在我的母版页中，如何使我的 CSS 文件链接之一成为变量，以便在适当的页面（例如主页）进入时，它包含要使用的正确 CSS 文件的变量？

    <!-- Custom CSS Files -->
    <link href="<Page Specific CSS Variable>" rel="stylesheet" type="text/css" />
    <link href="../../Content/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>

这就是答案吗？主页.aspx

<asp:Content ID="Content1" ContentPlaceHolderID="PageStylesheet" runat="server">
    <link href="../../Content/Styles/Home.css" rel="stylesheet" type="text/css" />
</asp:Content>

然后在母版页中：

<!-- Custom CSS Files -->
<asp:ContentPlaceHolder ID="PageStylesheet" runat="server" />

对吗？

【问题讨论】：

如果每个内容页面都有自己的 CSS 文件，为什么不将 CSS 链接放在内容页面中，而不是放在母版页中？
因为引入的每个页面都是页面的核心......而不是页眉。
但是有一个模板部分（内容区域）用于标题。
@Nikki，就像我说的......我是新来的。所以我试图找出这些“目的”是什么。我在上面编辑了我的问题^^ ...这就是它的工作原理吗？
是的；我从我的一个小应用程序中发布了一个示例。母版页是一个模板；你定义它的目的，真的。您也可以使用嵌套母版页。

标签： asp.net master-pages stylesheet

【解决方案1】：

一种解决方案是向母版页添加一个属性，您可以从每个 Web 内容表单中设置该属性。比如：

MasterPage.Master

    <!-- Custom CSS Files --> 
    <link href="<%=this.PageSpecificCSSURL%>" rel="stylesheet" type="text/css" /> 
    <link href="../../Content/Styles/Site.css" rel="stylesheet" type="text/css" /> 
</head>

MasterPage.Master.cs

private string mPageSpecificCSSURL = string.Empty;
public string PageSpecificCSSURL
{
    get
    {
        return mPageSpecificCSSURL;
    }
    set
    {
        mPageSpecificCSSURL = value;
    }
}

WebForm1.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    ((SiteMaster) this.Master).PageSpecificCSSURL = "mypage.css";
}

【讨论】：

说了这么多——我认为你最初的直觉是对的——添加一个单独的内容区域供每个内容页面填写。

【解决方案2】：

在母版页的页眉中使用内容部分。这就是它的目的；用于特定于内容页面的 CSS 和/或脚本等。内容将与母版页的内容合并，形成一个完整的头部部分。所有内容占位符几乎可以放在任何地方；标题，头，脚，任何你喜欢的，你可以嵌套母版页。它们只是模板；您不必将自己限制在 BODY 内容中。

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

<!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 runat="server">
    <title>REO CMS</title>
    <link rel="Stylesheet" href="REO.css" type="text/css" />
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="jqueryui-1.8%20jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddCaseContact.aspx.cs" 
Inherits="REO.AddCaseContact" MasterPageFile="~/REO.Master" %>
<asp:Content ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">       
        function showMessage(wTitle, msg) {
            var $dialog = $('<div></div>')
                .html(msg)
                .dialog({
                    autoOpen: false,
                    title: wTitle,
                    modal: true,
                    height: 300,
                    buttons: { "Ok": function() { $(this).dialog("close"); } }
                });
        $dialog.dialog('open');
    }
</script>
</asp:Content>
<asp:Content ContentPlaceHolderID="MainContent" runat="server">

【讨论】：

【解决方案3】：

在您的帮助下，答案就在我的编辑之内。完美。

【讨论】：