Switching A CSS file with JQuery in an ASP.Net MVC app

Question

I wanna switch the css that is being applied to my mvc app. I want to do this in my Index page. The defenition for the default css is in the site.master defined like this:

<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

The jquery I am trying to use which may or may not be right is

 $(document).ready(function() { 
        $("link").attr("href", '../../Content/nick.css');

    });
});

I wanna somehow put this jquery in the Index page (which is the basic Index view that loads with MVC)

>   <%@ Page Language="C#"
> MasterPageFile="~/Views/Shared/Site.Master"
> Inherits="System.Web.Mvc.ViewPage" %>
> 
> <asp:Content ID="Content1"
> ContentPlaceHolderID="TitleContent"
> runat="server">
>     Home Page
>     </asp:Content>
>     <asp:Content ID="Content2" ContentPlaceHolderID="MainContent"
> runat="server">
>         <h2><%: ViewData["Message"] %></h2>
>         <p>
>             To learn more about ASP.NET MVC visit <a
> href="http://asp.net/mvc"
> title="ASP.NET MVC
> Website">http://asp.net/mvc</a>.
>         </p>
>     </asp:Content>

Can someone look at my jquery and see if its right and show my how I can hook this up? Thanks in advance

i just copied what was in the site master when I create an mvc app — Nick LaMarca
– Nick LaMarca, Commented Feb 3, 2011 at 1:53

tvanfosson · Accepted Answer · 2011-02-03 02:14:05Z

2

Why not just add/change your styles using an additional CSS file in the view itself. If you don't already have a HeaderContent placeholder, just add it to your Site.master file and then add the new CSS to it in the view you want to update.

<head>
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeaderContent" runat="server" />
</head>

Then in your view

 <asp:Content ID="headerContent" ContentPlaceHolderID="HeaderContent" runat="server">
 <link href="../../Content/nick.css" rel="stylesheet" type="text/css" />
 </asp:Content>

answered Feb 3, 2011 at 2:14

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

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

5 Comments

Daniel T. Over a year ago

He may want to remove the first style and replace it with a second style instead of just applying extra styles and overriding existing ones.

tvanfosson Over a year ago

@DanielT - I could see this when doing themes, but typically you'd replace the theme CSS not the site.css for this.

Daniel T. Over a year ago

I agree wholeheartedy. However, in his original question (before he edited it), he said he wanted to replace the CSS. I would say your solution is the recommended course of action though, assuming he doesn't really need to replace the CSS.

tvanfosson Over a year ago

@DanielT - when choosing a different CSS file to apply for a particular view I think it's almost always the best way to simply reference an additional CSS file in the view, replacing styles as needed, rather than replacing the CSS via javascript. At least you can be assured that it will work ok without javascript.

Daniel T. Over a year ago

+1 Agreed. To anyone reading this out there, replace your CSS with Javascript only if you specifically need to do it for a special situation.

Daniel T. · Accepted Answer · 2011-02-03 02:37:06Z

1

I believe your jQuery should be changed to:

$(function() {
    $('link').first().attr('href', 'nick.css');
});

Assuming that it is the first css file you want to change. There's nothing wrong with using an ID property for the link tag though:

<link id="style" href="../../Content/Site.css" rel="stylesheet" type"text/css" />

And then your jQuery can be:

$('link#style').attr('href', 'nick.css');

You can put the jQuery anywhere you want in your index page, as long as you wrap it in a <script> tag, but what I recommend you do is to add a ContentPlaceHolder in the <head> tag of your Master page:

<head>
    <title><asp:ContentPlaceHolder ID="TitleHolder" runat="server"></title>
    <asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</head>

Then in your index page, add a section for it:

<asp:Content ContentPlaceHolderID="ScriptContent" runat="server">
    <script>
        $(function() {
            $('link#style').attr('href', 'nick.css');
        });
    </script>
</asp:Content>

Adding Model data to jQuery

It's pretty much the same thing you would do in HTML:

<script>
    $(function() {
        $('link#style').attr('href', <%= Model.CssStyle %>);
    });

This is assuming your Model has a property called CssStyle. You might get warnings when you compile the program about invalid Javascript tags but you can safely ignore them. Javascript support within Visual Studio is not that great without plugins.

edited Feb 3, 2011 at 2:37

answered Feb 3, 2011 at 2:03

Daniel T.

38.6k37 gold badges146 silver badges207 bronze badges

11 Comments

Nick LaMarca Over a year ago

I want to add it to the index page because I wanna use information from a parameter in the model that hooked up to the index page. Does that make sense.

Daniel T. Over a year ago

Yes it does. Just put the jQuery in your index page. Or are you trying to ask how you would put model data into Javascript?

Nick LaMarca Over a year ago

Can you show a quick example putting a value in model data in the jquery. I was thinking of putting the data as a value in a hidden tag, but Im not sure if thats a good idea.

Daniel T. Over a year ago

I edited my answer to include what you can do. It's pretty straightforward.

Nick LaMarca Over a year ago

<head> <title><asp:ContentPlaceHolder ID="TitleHolder" runat="server"></title> <asp:ContentPlaceHolder ID="ScriptContent" runat="server"></title> </head> ---this isnt compiling for me

|

Collectives™ on Stack Overflow

Switching A CSS file with JQuery in an ASP.Net MVC app

2 Answers 2

5 Comments

Adding Model data to jQuery

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Adding Model data to jQuery

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related