Home/ Questions/Q 3843014
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T15:52:38+00:00

I wanna switch the css that is being applied to my mvc app. I

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0