如何更改cshtml文件头部分的属性

Question

我在浏览页面时遇到了删除属性的问题。

我在HomeController中使用PartialView来定义index.cshtml页面。

我把数据传递到目的地的那一行显示得很整齐。

HomeController -> Contract.cshtml -> _Layout.cshtml -> NavbarPartial.cshtml

以下是HomeController.cs文件。

public ActionResult ContractUs()
{
ViewBag.Attribute = ""; // header-transparent
return View();
}

下面是我的Contract.cshtml。

@{
ViewBag.Title = "Contract Us";
Layout = "~/Views/Shared/_Layout.cshtml";
}

下面是我的_Layout.cshtml。

Html.RenderAction("NavbarPartial", "Home");

下面是我的NavbarPartial.cshtml。

<header id="header" class="fixed-top d-flex align-items-center header-transparent">
</header>

我想做的是在索引页面中显示这个标题代码片段，并在另一个页面上显示另一个，如下所示，而不更改NavbarPartial.cshtml.

索引.cshtml

<header id="header" class="fixed-top d-flex align-items-center header-transparent">
</header>

Contract.cshtml

<header id="header" class="fixed-top d-flex align-items-center">
</header>

我该怎么做？

Answer 1

如果您从另一个视图呈现部分视图，那么您可以发送一些参数来决定应该应用哪个类。让我们来看一下这个例子。

我们调用部分视图并发送附加数据：

@{Html.RenderPartial("_Header", new ViewDataDictionary { { "ApplyStyle", true } });}

然后在局部视图中，我们可以有条件地应用样式：

@{
var yourClasses = "";
if ((bool)ViewData["ApplyStyle"])
{
yourClasses = "fixed-top d-flex align-items-center header-transparent";
}
else
{
yourClasses = "fixed-top d-flex align-items-center";
}
}
<header id="header" class="@yourClasses">
This is header!
</header>

更新：

这是一个完整的例子。然而，这个fiddle不支持PartialView，但我相信基本思想已经显示出来了。

Answer 2

尝试在类值中使用条件。

例如：

<header id="header" class="fixed-top d-flex align-items-center @(@Model.name === 'index' ? 'header-transparent' : '')">

如果当前组件没有任何类型的变量名，可以使用Javascript的位置对象。window.location.pathname将为您提供当前页面的路径名。使用此值可以添加条件类值