如何在MVC布局视图中使用c#编辑CSS类

本文关键字：编辑 CSS MVC 布局 视图 | 更新日期: 2023-09-27 18:18:10

我想知道如何从控制器内的c#代码更改分配给布局视图中的元素的类?

在我的导航栏中，我有一个css类，在查看页面时设置为活动，但显然我需要在更改视图(页面)时更改它，但我不确定在mvc

如何在MVC布局视图中使用c#编辑CSS类

中做到这一点的最佳方法

尝试将CSS值绑定到模型或viewbag

例如

@Html.TextBoxFor(model => model.Value1, new { @class = ViewBag.value1Class })

或

<div class="@Model.Class1 @Model.Class2"/>

你可以检查当前控制器的名称和动作，在这篇文章中详细说明，并使用这些信息在你的布局中选择哪个元素应该是"活动的"

或者在一个简单的应用程序中，另一种常见的方法是使用ViewBag并设置带有当前页面名称的属性。

在你的控制器方法中包括以下内容:

ViewBag.CurrentPageName = "HomePage";

你的Razor (MVC3+)视图代码可以使用这些信息，并在元素上设置适当的类。

@{
  string pageName = ViewBag.CurrentPageName ?? "Unknown";
}
if(pageName == "HomePage"){
   //Output your DOM element with the appropriate class name for the "active" link.
}

或

<a href="#" class="@(pageName == "HomePage" ? "active" : string.Empty)>Home Page</a>

对于MVC2和更早的版本，您需要使用TempData，但概念是相似的。

也许使用jquery ?

$( document ).ready(function() {
    $("#mainPageDiv").removeClass()
                     .addClass('newClass'); 
});
相关文章：