根据当前 Razor 页面更改主体背景颜色答案

【问题标题】：Change the Main Body Background Colour dependant on current Razor Page根据当前 Razor 页面更改主体背景颜色
【发布时间】：2021-06-01 12:28:44
【问题描述】：

我正在开发一个基本的 Razor Pages 网络应用程序，它具有三个主要页面。我希望能够根据用户当前正在查看的 Razor 页面更改正文的背景颜色。

正文包含在_Layout.cshtml 文件中，我可以在其中更改整个应用程序的颜色：

<body style="background-color: lightcoral ">

但是，在一天的这个深夜，我似乎无法弄清楚如何根据我当前所在的页面更改此颜色。我最初的想法是考虑使用 JQuery 来获取 body 元素并通过那里更新背景样式属性，但我仍然不确定如何告诉我当前所在的页面来决定颜色。

【问题讨论】：

标签： css asp.net-core background-color razor-pages

【解决方案1】：

如果要为不同的区域添加不同的背景颜色，可以添加带有当前区域名称的body id，并为不同的id添加样式。这里有一个演示：

_layout.cshtml：

@{
    var routeUrl = this.Url.RouteUrl(ViewContext.RouteData.Values);
    var area = routeUrl.Split("/")[1];
}
<body id="@area">
<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-page="/Index">RazorPageWithAreas</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="Entry" asp-page="/Create">Entry/Create</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="Session" asp-page="/Create">Session/Create</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="Trip" asp-page="/Create">Trip/Create</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

...

<style>
    #Session {
        background-color: #ffefef;
    }

    #Trip {
        background-color: #fff8d7;
    }

    #Entry {
        background-color: #eafff3;
    }
</style>
</body>

文件夹结构：

结果：

【讨论】：

【解决方案2】：

您可以在代码中的ViewData 中设置一个值，然后在布局页面中使用它

<body style="background-color: @ViewData["BackgroundColor"]">

我个人可能会使用一个类来驱动它

<body class=" @ViewData["BackgroundClass"]">

【讨论】：

【解决方案3】：

所以我想出了这个可行的方法，但是当我在页面之间导航时背景仍然闪烁白色。我很想听听其他人的解决方案，这些解决方案可能更好、性能更高……甚至包括一些过渡；）

我有三个区域，每个区域包含一个创建、编辑、详细信息、索引、删除页面。区域是季节、旅行、入境。因此，对于 Season 下的每个页面，我都添加了一个隐藏字段：

<input type="hidden" name="hdnPageSelector" id="hdnSeasonPage" />

Trip 下的每一页我都添加了：

<input type="hidden" name="hdnPageSelector" id="hdnTripPage" />

以及我添加的条目下的每个页面：

<input type="hidden" name="hdnPageSelector" id="hdnEntryPage" />

然后我有一段 Javascript/JQuery 在DOMCONTENTLOADED 上执行：

document.addEventListener("DOMContentLoaded", function () {

    var pageId = $("[name ='hdnPageSelector']").attr('id');

    if (pageId == "hdnSeasonPage") {
        $("body,html").css("background-color", "#ffefef");
    }
    if (pageId == "hdnTripPage") {
        $("body,html").css("background-color", "#fff8d7");
    }
    if (pageId == "hdnEntryPage") {
        $("body,html").css("background-color", "#eafff3");
    }
});

正如我所提到的，这似乎可行，但有兴趣听到一些更好的解决方案。

【讨论】：