Fatal编程技术网
  • css/
  • Css 根据当前页面更改主体背景颜色

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

css asp.net-core

Css 根据当前页面更改主体背景颜色,css,asp.net-core,background-color,razor-pages,Css,Asp.net Core,Background Color,Razor Pages,我正在开发一个基本的Razor Pages web应用程序，它有三个主要页面。我想能够改变身体的背景颜色，这取决于用户当前查看的剃须刀页面 正文包含在\u Layout.cshtml文件中，我可以在其中更改整个应用程序的颜色： <body style="background-color: lightcoral "> 然而，在一天中这么晚的时候，我似乎不知道如何根据我当前所在的页面改变这种颜色。我最初的想法是使用JQuery获取body元素并更新backgro

我正在开发一个基本的Razor Pages web应用程序，它有三个主要页面。我想能够改变身体的背景颜色，这取决于用户当前查看的剃须刀页面

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

<body style="background-color: lightcoral ">
然而，在一天中这么晚的时候，我似乎不知道如何根据我当前所在的页面改变这种颜色。我最初的想法是使用JQuery获取body元素并更新background style属性，但我仍然不确定如何判断当前所在的页面以确定颜色。

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

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

<input type="hidden" name="hdnPageSelector" id="hdnSeasonPage" />
正如我所提到的，这似乎是可行的，但我有兴趣听到一些更好的解决方案。

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

<body style="background-color: @ViewData["BackgroundColor"]">
就我个人而言，我可能会使用一个类来驱动它

<body class=" @ViewData["BackgroundClass"]">
如果要为不同区域添加不同的背景颜色，可以使用当前区域名称添加主体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>

@{
var routeUrl=this.Url.routeUrl（ViewContext.RouteData.Values）；
var区域=路线分割（“/”[1]；
}


结果:



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



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



@{
    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>