CODEWITHSUNDEEP
javascriptjquerycssasp.nettwitter-bootstrap
matan129
matan129

Reputation: 1697

ASP.NET Fails to Load CSS and Javascript Files

I'm experiencing a very peculiar issue with ASP.NET. I have a small website. I've written a simple MasterPage that is used across most of the site's pages.

I want to include Bootstrap and jQuery's CSS and Javascript files. When I link then in my master page with URI pointing at remote location (see below), everything works fine:

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="Stylesheets" runat="server">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    </asp:ContentPlaceHolder>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

For couple of reasons I want these JS and CSS files to be available locally, so I downloaded the relevant files to the server. But when I try to include these local files in the master page, they fail to load.

I tried:

Example of non-working code:

<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
    <link rel="stylesheet" href="~/App_LocalResources/css/bootstrap.min.css"/>
    <script src="~/App_LocalResources/js/jquery.min.js"></script>
    <script src="~/App_LocalResources/js/bootstrap.min.js"></script>
</asp:ContentPlaceHolder>

The result is the same whether I use the ContentPlaceHolder or not.

If you could assist me in resolving this issue, I'd be genuinely awesome - thanks in advance.

Upvotes: 3

Views: 2767

Answers (1)

matan129
matan129

Reputation: 1697

I was able to detect and resolve the cause of this issue failry quickly after reading through some very helpful comments - so kudos for the users who posted them.

The issue was being caused by 404s (when trying to acces the js and css files). The 404s happened due to:

  • The URLs were not correct - although I used the ~ (home) character it somehow was converted to a path relative to the page.

Example of such 404 as seen in Firefox/Firebug Console (make sure that "Logging" is on: 404 in Firefox Consol

I was able to resolve this issue by using ResolveUrl. Example: <script src="<%= ResolveUrl("~/App_LocalResources/js/bootstrap.min.js") %>"></script>

  • After resolving this first issue, the 404s persisted.

    I tried to access the files directly through the browser, and I got a IIS 404.8 error - meaning that the server was blocking access to the App_LocalResources folder. This is the default behaviour of IIS server on some predefined folder names (including App_LocalResources, bin, App_Data, etc.).

IIS Server 404.8 Error Page

So, I moved the css and js files to a folder named res and that did the trick.

Eventually, the <head> section in the master page looks like this:

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="Stylesheets" runat="server">
        <link rel="stylesheet" href="<%= ResolveUrl("~/res/css/bootstrap.min.css") %>" />
        <script src="<%= ResolveUrl("~/res/js/jquery.min.js") %>"></script>
        <script src="<%= ResolveUrl("~/res/js/bootstrap.min.js") %>"></script>
    </asp:ContentPlaceHolder>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder> 
</head>

Upvotes: 4

Related Questions