ASP. NET MVC Switch site theme

First of all, there are some defined CSS files, this example is using bootstrap as the front-end framework, you can download some theme files from the http://bootswatch.com/website, that is, some well-defined bootstap.css files.

These files are then placed in the site under Content folder themes, directory organization structure

Second, create a new folder in the site root directory for helper, create a Bootstrap.cs file below.

public class Bootstrap
{
Public Const string bundlebase = "~/content/css";

Class as a member of a class.
public class Theme
{
Public Const string cerulean = "Cerulean";
Public Const String Darkly = "Darkly";
Public Const String flatly = "flatly";
Public Const string Spacelab = "Spacelab";
Public Const string stock = "stock";
Public Const string superhero = "Superhero";
}

public static hashset<string> Themes = new hashset<string>
{
Theme.cerulean,
Theme.darkly,
theme.flatly,
Theme.spacelab,
Theme.stock,
Theme.superhero
};

public static string Bundle (String themename)
{
return bundlebase + themename;
}
}
}

Third, open the App-start folder under the Bundleconfig file, modify the following: Each topic is bundled

foreach (var theme in bootstrap.themes)
{
var stylepath=string. Format ("~/content/themes/{0}/bootstrap.css", theme);
Bundles. ADD (New Stylebundle (Bootstrap.bundle (theme)). Include (//Create bundle, "~/content/css+themename")
Stylepath,
"~/content/site.css"));

Four, to change the theme, you can put the name of the topic string in the session, you can also put in the database. All have shortcomings. session["ThemeName" is easy to lose, related to the client browser, if stored in the database, can be associated with the user. But our need here is to change the foreground display style through the background, all can put the name string of the topic in application or cache, this is the application global sharing.

Open the Global application configuration file Global.asax.cs,

public class MvcApplication:System.Web.HttpApplication
{
protected void Application_Start ()
{
Arearegistration.registerallareas ();
Filterconfig.registerglobalfilters (globalfilters.filters);
Routeconfig.registerroutes (routetable.routes);
Bundleconfig.registerbundles (Bundletable.bundles);

application["Csstheme"] = Bootstrap.Theme.Stock; Increase the application state collection.
}
}

V. Change the layout page _layout. Because if the layout page introduces a theme style file and changes the layout page, the whole-site style changes.

@using majorconstruction.helpers;
@{
var theme = system.web.httpcontext.current.application["Csstheme"] as string?? Bootstrap.Theme.Stock; The application state of the current request context. //Call the Application object through the current request of the application context object.? is a null-value merge operator, or, if empty, the default stock theme.
}

@Styles. Render (Bootstrap.bundle (theme))
@Scripts. Render ("~/bundles/modernizr")

Six, change the theme. Defines a Themecontoller controller. Get returns View,post to perform the change.

public class Themecontroller:controller
{
Get:admin/theme
Public ActionResult Changetheme ()
{

return View ();
}

[HttpPost]
[Validateantiforgerytoken]
Public ActionResult Changetheme (string theme)
{
httpcontext.application["csstheme"] = theme;
return View ();
}

The definition changes the view, displays the entire topic, for the choice. Because this page only needs to submit a theme string to the controller on it, all of us use a form that has a hidden field that is submitted via Ajax.

@using majorconstruction.helpers;

@{
Viewbag.title = "Change Theme";
}

<div class= "Container" >
<div class= "Row" >
@foreach (var theme in bootstrap.themes)
{
<div class= "Col-md-3" >
<div class= "Panel Panel-default" >//Using the bootstrap panel, do not title. Because just to add a border, so only use the Panel-body
<div class= "Panel-body" >
<br/>
<br/>
<p>
@{
bool Iscurrent = Theme = = httpcontext.current.application["Csstheme"].   ToString (); //Determines whether the currently traversed theme is not in use, and if it is in use, the Change button is dimmed. To bind a topic to a link on a JavaScript function
String btndisabled = Iscurrent? "Disabled": null;
}

Here is a link in the form of a button that executes a JavaScript script that binds the subject name value. Subject names must be quoted. Otherwise, you will be prompted that uncaught referenceerror:xx is not defined defined.
<a class= "btn btn-success @btnDisabled" href= "javascript:setactive(' @theme')" > Apply Themes </a> <!--bind the topic to JavaScript functions by invoking a JavaScript function to submit a hidden commendation. -
<!--also need to pay special attention to calling the JavaScript function parameters @theme must be quoted, if not quoted, always uncaught the browser always prompts referenceerror:xx not defined is not defined, Because the @theme variable is not a value type, it is hashset type--

Used to be without quotation marks, engaged in a half-day, are not submitted, what methods have tried, but also thought that there is a problem with the server code.
</p>
</div>

</div>
</div>
}

</div>
</div>

@using (Html.BeginForm ("Changetheme", "Theme", FormMethod.Post, new {id = "themeform"}))
{
@Html. AntiForgeryToken ()
<input type= "hidden" name= "theme" id= "Themeinput"/>
}

@section Scripts {
@Scripts. Render ("~/bundles/jqueryval")

<script type= "Text/javascript" >
var changethemeurl = ' @Url. Action ("Changetheme") ';

function SetActive (themename) {
$ ("#themeInput"). Val (ThemeName); Pass the parameter values to the hidden form.

$ ("#themeForm"). Submit (); Submit the form and send the Theme=themename to the controller post method.

}

</script>

Done.

ASP. NET MVC Switch site theme