locked
Dynamic Themes in MVC Razor RRS feed

  • Question

  • User-1044618314 posted

    Hi,

    I struggled for the whole day to apply themes dynamically in MVC and found a solution by combining few googling results

    and the solution follows

    I done it by swapping CSS only. If you are looking for HTML, then it's not appropriate solution.

    Step 1: Create Dummy CSS Redmond.css ( Copy of Site.css with colors and bg colors changed)

    Step 2: From Layout Change the Styles Reference as following

               <link href= @HttpContext.Current.Application["Theme"] as string rel="stylesheet" type="text/css" />

    Step 3: In Index Method(Startup Method of application), set Theme value as follows

            public ActionResult Index()
            {
                if (HttpContext.Application["Theme"] == null)
                    HttpContext.Application["Theme"] = LoadTheme();
                ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
                return View();
            }

    where LoadTheme is a common Method

     public string LoadTheme(string Theme = null)
            {
                string sLocation = "/Content/";
                if (Theme == null)
                {
                    sLocation += "themes/" + "Site.css";
                }
                else if (Theme == "RedMond")
                {
                    sLocation += "themes/" + "RedMond.css";
                }
                HttpContext.Application["Theme"] = sLocation;
                return HttpContext.Application["Theme"] as string;
            }

    Step 4: Declare 2 buttons as follows to allow user to change themes

            <input type="button" id="RedMond" value="RedMond Theme" />
            <input type="button" id="Default" value="Default Theme" />

    Step 5 : Fire JQuery Event to call common Method LoadTheme on button click

           <script type="text/javascript">
            $(document).ready(function () {
                $('#RedMond').click(function () {
                    $.ajax({
                        url: "/Home/LoadTheme/?Theme=" + "RedMond",
                        success: function (data) {
                            $("link[rel=stylesheet]").attr({ href: data });
                            return false;
                        }
                    })         
                });
                $('#Default').click(function () {
                    $.ajax({
                        url: "/Home/LoadTheme",
                        success: function (data) {
                            $("link[rel=stylesheet]").attr({ href: data });
                            return false;
                        }
                    })
                });
            });
        </script>

    That's It. Hope this helps.

    Friday, March 22, 2013 2:14 AM

All replies

  • User-1137493631 posted

    did you find the answer? how did you do that?

    Tuesday, April 2, 2013 9:46 PM
  • User-2126744837 posted

    I like your approach, but isn't this al about different views as well? Is a view not one of the benefits of using MVC so you can seperate your presentation from the logic? Or do you think this is not helping you looking at duplicating code and adaptability?

    As part of this discussion you should consider looking over to this code:

    http://mvcthemes.codeplex.com/SourceControl/latest#MVCThemes.WebUI/Global.asax

    Demo: http://mvcthemes.creativeminds.dk/ (click the menu-items to change the theme)

    I would like to hear what you think of that approach, and why yours is better :)

    Thursday, May 30, 2013 3:41 AM