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

问题描述 投票：0回答：4

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

主体包含在 

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

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

然而，在今天这么晚的时候，我似乎无法弄清楚如何根据我当前所在的页面来更改这种颜色。我最初的想法是考虑使用 JQuery 获取 body 元素并通过那里更新背景样式属性，但我仍然不确定如何判断我当前所在的页面来决定颜色。

css asp.net-core background-color razor-pages
4个回答
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>

文件夹结构：

enter image description here

结果： enter image description here

0
投票

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

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

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

行程下的每一页我都添加了：

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

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

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

然后我有一段在 

DOMCONTENTLOADED
上执行的 Javascript/JQuery：

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");
    }
});

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

0
投票

您可以在代码中的

ViewData
中设置一个值，然后在布局页面中使用该值

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

就我个人而言，我可能会使用一个类来驱动它

<body class=" @ViewData["BackgroundClass"]">
0
投票

您始终可以为每个具有硬编码正文背景颜色的视图分配不同的布局页面

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.