如何从 _Layout.cshtml 页面隐藏页面上的特定元素答案

【问题标题】：How to hide specific element on page from _Layout.cshtml page如何从 _Layout.cshtml 页面隐藏页面上的特定元素
【发布时间】：2017-02-22 10:59:45
【问题描述】：

我从事 mvc 5 项目。

在我的_Layout.cshtml 上，我有一个名为id="topBar" 的html 元素，该元素显示在每个页面中。

但我有一个名为 About.cshtml 的页面我不希望此页面仅显示元素 id="topBar" _Layout.cshtml 中的所有其他 html 元素我希望它们在 About.cshtml 中正常显示。

知道如何实现上述外观吗？

【问题讨论】：

不能用jQuery来实现吗？
@if (ViewContext.RouteData.Values["action"].ToString() != "About") { ... }

标签： asp.net asp.net-mvc

【解决方案1】：

实现此目的的一种简单方法（不使用 javascript）是在您的 about Action 内的 ViewBag 中设置一个值，并在布局中使用它，如下所示：

_Layout.cshtml

@if (ViewBag.ShowTopBar ?? false)
{
    <div id="topBar">

    </div>
}

控制器中的操作：

public class MyAwesomeController : Controller
{

    public ActionResult About()
    {
        ViewBag.ShowTopBar = true;
        return View();
    }

}

【讨论】：

【解决方案2】：

有两种选择：

1。为每个 `body` 元素添加一个 ID

您可以在每个页面的正文中添加一个ID，其中包含例如控制器和操作名称，然后添加一个 CSS 规则来隐藏关于页面上的 topBar 元素。

首先，让我们为控制器和动作名称创建两个字符串变量。在您的 _Layout.cshtml 中执行此操作：

@{
    string controller = ViewContext.RouteData.Values["controller"].ToString();
    string action = ViewContext.RouteData.Values["action"].ToString();
}

接下来，将 ID 添加到正文中：

<body id="@controller-@action">

在你的 css 中，你现在可以添加一个规则来隐藏 about 页面中的 topbar（假设控制器名为 HomeController）：

#Home-About #topBar {display:none;}

您还可以使用扩展方法来获取控制器和操作名称。例如like this。

2。在 About 页面上使用 jQuery

您可以在 about 页面上添加 Javascript 并使用 jQuery 隐藏顶栏（我假设 jQuery 已经加载）：

<script>
   $("#topBar").hide();
</script>

【讨论】：

【解决方案3】：

更简单的方法，就是这样做：单独设置页面样式：

<style>
    #showcase {  display: none; }   
</style>

把这个放在你想隐藏的页面上，showcase 是我的部分 id。 ;)

【讨论】：

1。为每个 body 元素添加一个 ID

2。在 About 页面上使用 jQuery

1。为每个 `body` 元素添加一个 ID