How to change theme dynamically in mvc3

Question

I want to change the theme of my web page on user selection I am using MVC3. My idea is to include various style sheets inside the Content folder and let the _layout.cshtml file decide which css file to call on user selection At present all i can do is include a single tag which is reflected on all the pages I want the view to be the same but the style sheets should change on selection.

I tried this code inside _Layout.cshtml:

    <script type="text/javascript">
    function loadjscssfile(filename) {
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref != "undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)

Inside Body tag:

<select>
        <option onclick="loadjscssfile("@Url.Content("~/Content/Site1.css")")">Theme1</option>
        <option onclick="loadjscssfile("@Url.Content("~/Content/Site2.css")")">Theme2</option>
        </select>

But this also does not work:( Please help me.I am new to MVC3...

Iridio · Accepted Answer · 2012-03-02 12:32:06Z

1

This post should help you:

ASP.NET MVC Theme Supported Razor View Engine

UPDATE: This sample won't compile with mvc3. You should do some "find and replace" for

ViewModel.Title -> ViewBag.Title
ViewModel.Message -> ViewBag.Message
ViewModel.PasswordLength -> ViewBag.PasswordLength

return new ViewEngineResult(CreateView(controllerContext, viewPath, masterPath), this, incompletMatch); -> return new ViewEngineResult(CreateView(controllerContext, viewPath, masterPath), this);

edited Mar 2, 2012 at 12:32

answered Mar 2, 2012 at 6:28

Iridio

9,2814 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

EqEdi Over a year ago

hi,i have already gone through this link and also downloaded the entire zip file but once i run it is giving me error as:ViewModel does not exists in the current context and i have no idea about ViewModels

MikeSW Over a year ago

If you need more powerful themming you can also try my CavemanTools Mvc toolkit (nuget it). See how to use themes here bitbucket.org/sapiensworks/caveman-tools/wiki/Themes

Iridio Over a year ago

Updated answer. After the edit compile and works on my machine with MVC3

EqEdi Over a year ago

@Iridio Hi All errors are resolved except one: Inside FindPartialView() return new ViewEngineResult(CreateView(controllerContext, viewPath, masterPath), this);

Iridio Over a year ago

if you change to return new ViewEngineResult(CreateView(controllerContext, viewPath, masterPath), this); in line 96 and 125 of ThemeableVirtualPathProviderViewEngine.cs, it should works. At least works for me

|

Charlie Pops · Accepted Answer · 2012-03-02 05:41:26Z

0

I think it is better if you keep one stylesheet and only changes a class on your body tag

<body class="red|blue">
    //your content
</body>

and inside your style sheet you only add different styles to each selector

.red{
    background-color: red;
}

.blue{
    background-color: blue;
}

answered Mar 2, 2012 at 5:41

Charlie Pops

786 bronze badges

1 Comment

EqEdi Over a year ago

Thanx for the reply But how should i change the Color dynamically whethr i should include some switch logic inside the controller?

Collectives™ on Stack Overflow

How to change theme dynamically in mvc3

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related