ASP.Net MVC 4动态加载css文件(ASP.Net MVC 4 Load css File dynamically)

ASP.Net MVC 4动态加载css文件(ASP.Net MVC 4 Load css File dynamically)

我有一个网站，需要自定义，这意味着我需要根据用户选择的选项更改页面的主题。 我需要知道如何根据用户选择更改通过Layout.cshtml呈现的css文件。

这些是我的layout.cshtml中的两个css文件

@ Styles.Render（“〜/ Content / style1.css”） - >主题1 @ Styles.Render（“〜/ Content / style2.css”） - >主题2

我已经分配了两个链接点击以更改我的主页上的css文件（链接1主题1，链接2-主题2），但我不知道如何更改它。

我最初的想法是有两个链接，当链接被按下时，它将被发送到一个控制器，从layout.cshtml中选择适当的css文件后，它将被重定向到该页面，具体取决于使用if条件的用户选择，我想这个想法是不可能的。

请告诉我最好的方法，因为我需要尽快在我的网站上实施此解决方案。

I have a website on which there is a need for customization, which means i need to change the theme of the page depending on the option selected by the user. I need to know how to change the css file which is rendered through Layout.cshtml according to the users selection.

These are the two css file in my layout.cshtml

@Styles.Render("~/Content/style1.css") -> Theme 1 @Styles.Render("~/Content/style2.css") -> Theme 2

I have assign two links to click in order to change the css file in my home webpage(Link 1-Theme 1,Link 2- Theme 2) but i don't know how to change it.

My initial idea was to have two links and when the link is pressed it will be sent to a controller from which it will be redirected to the page after selecting the appropriate css file from layout.cshtml depending on the users selection using an if condition, i guess that idea is not possible.

Please let me know the best way to do this since i need to implement this solution in my website soon.

最满意答案

你可以有一个查询字符串参数来设置whichStyleFlavor ：

@{ string whichStyleFlavor = "1"; ... some logic to check what they requested and change whichStyleFlavor } @Styles.Render("~/Content/style" + whichStyleFlavor + ".css")

或者您可以通过切换CSS标记在客户端上执行此操作。

从这里 ：

<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css"> <script type="text/javascript"> function swapStyleSheet(sheet){ document.getElementById('pagestyle').setAttribute('href', sheet); }

You could have a query string parameter that sets whichStyleFlavor:

@{ string whichStyleFlavor = "1"; ... some logic to check what they requested and change whichStyleFlavor } @Styles.Render("~/Content/style" + whichStyleFlavor + ".css")

Or you can do it on the client, by switching the CSS tag.

From here:

<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css"> <script type="text/javascript"> function swapStyleSheet(sheet){ document.getElementById('pagestyle').setAttribute('href', sheet); }