This article shows how to add an option for the user to switch application theme on the fly. This technique was tested with both ASPRunner.NET v10.91 and v11.
There also an excellent video from Corrie that complements this tutorial.
Here is how it looks in the generated application:
Unzip this file to any temporary folder. It contains a few themes and an additional file with C# code.
Open your existing project, proceed to Style Editor. Expand Custom files, choose 'Import folder'. Select folder 'scheme' from the zip file.
In Page Designer, on the page where you need to add theme selection functionality insert a code snippet named, for instance, 'select_scheme'. Probably make sense to move it to the top right corner of your page. Use the following code there:
MVCFunctions.Echo("<div class='dropdown'>");
MVCFunctions.Echo("<a class='dropdown-toggle' data-toggle='dropdown' href='#'>");
MVCFunctions.Echo("<span class='glyphicon glyphicon-eye-open' id='span_skins'></span>");
MVCFunctions.Echo("<span class='caret'></span>");
MVCFunctions.Echo("</a>");
MVCFunctions.Echo("<ul class='dropdown-menu dropdown_scheme' style='margin-top:10px;min-width:100px;'>");
dynamic p = null, scheme = null;
foreach (var folder in Directory.EnumerateDirectories(MVCFunctions.getabspath("scheme"))){
p = MVCFunctions.strrpos(folder,"\\");
scheme = folder.Substring(p+1);
MVCFunctions.Echo(MVCFunctions.Concat("<li class='li_menu' scheme='",scheme,"'>",scheme,"
"));
}
MVCFunctions.Echo("</div>");You can add the same code snippet to other pages.
- To every page where this code snippet was added you also need to add the following code to BeforeProcess event:
CommonFunctions.init_scheme(pageObject);
- The following code goes to After Application Init event:
if(MVCFunctions.postvalue("scheme")){
MVCFunctions.SetCookie("colorscheme",MVCFunctions.postvalue("scheme"),60*60*24*1);
XSession.Session["colorscheme"] = MVCFunctions.postvalue("scheme");
}
if(MVCFunctions.GetCookie("colorscheme"))
XSession.Session["colorscheme"] = MVCFunctions.GetCookie("colorscheme");- The following code goes to Event Editor ->custom_functions.js section:
$("document").ready(function() {
$(".li_menu").click(function() {
$.get("",{scheme:$(this).attr("scheme")},function(){
window.location.reload();
})
});
});
Sergey Kornilov admin