如何从 _Layout.cshtml 页面隐藏页面上的特定元素
Posted
技术标签:
【中文标题】如何从 _Layout.cshtml 页面隐藏页面上的特定元素【英文标题】：How to hide specific element on page from _Layout.cshtml page 【发布时间】：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") ...
【参考方案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。 ;)
【讨论】：
以上是关于如何从 _Layout.cshtml 页面隐藏页面上的特定元素的主要内容，如果未能解决你的问题，请参考以下文章
如何将配置设置添加到 _Layout.cshtml 共享 Razor 页面
Razor 页面：从 _Layout.cshtml 设置 cookie
如何从从 NuGet 包获得的 RCL 导入 Razor 页面？
如何在 _layout.cshtml 中为不同区域动态渲染局部视图？