在.NET MVC中实现动态CSS的最佳方法 [英] Best way to implement Dynamic CSS in .NET MVC

问题描述

我正在尝试设置2个不同的主题(基本上是2个不同的 CSS ).用户可以选择浅色或深色主题.如果他选择浅色主题，则需要加载主题为 CSS 的浅色主题，如果他选择深色主题，则需要加载主题为 CSS 的深色主题.

I am trying to have 2 different themes (basically 2 different CSS). User has an option to choose either light or dark theme. If he chooses the light theme, I need to load the light themed CSS and if he chooses the dark theme, I need to load the dark themed CSS.

我尝试过

.NET MVC:如何实现不同的页面每个用户的外观?

但是不能使它工作，因为 Url.Action 只是生成链接，并且没有从Action方法返回结果.

but was not able to make it working because Url.Action was just generating the link and it was not returning the result from the Action method.

我有一个版面页面，网站上的所有页面都继承了该页面，因此我希望以某种方式将其加载到版面"页面中.

I have a layout page which all the pages in my website inherits and I somehow want to have this to be loaded in the Layout page.

另一种方法是 http://forums.asp.net/t/1892421.aspx?Dynamic + Themes + in + MVC + Razor

可以在 HttpContext.Application ["Theme"] 中设置 css 吗?

我遇到的另一种方法是在加载页面时使用javascript设置css文件.

The other approach I came across was setting the css file using javascript while loading the page.

您认为哪种方法更好?

推荐答案

我会在布局页面内使用以下方式.也许我会/可以改进"GetThemeName"方法，以便它返回完整的链接字符串.这样，布局页面仅包含布局功能，而不包含代码.

I would use the following way inside the layout page. Perhaps I would/could improve the "GetThemeName" method so that it returns the full link string. So that the layout page only contains layout features instead of code.

例如:

@switch (UserSettings.GetThemeName())
    {
        case "Red":
            <link rel="stylesheet" href="/Content/ThemeRed/css/default.css" />
            break;
        case "Blue":
            <link rel="stylesheet" href="/Content/ThemeBlue/css/default.css" />
            break;
        default:
            <link rel="stylesheet" href="/Content/Default/css/default.css" />
            break;
    }

UserSettings.GetThemeName是一个公共静态函数，可获取用户当前的主题名称"或主题ID"

the UserSettings.GetThemeName is a public static function which gets the users current "theme name" or "theme id"

这篇关于在.NET MVC中实现动态CSS的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！