CSS and Javascript relative path confusion in ASP.NET MVC

Question

My javascript paths work on this page: http://localhost:53049/

But not on this page: http://localhost:53049/Home/Messages

The reason is that the relative paths are different, the former requires ("js/...") and the latter requires ("../../js/...").

I'm including my javascript in my Site.Master file:

<script type="text/javascript" src="js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="~/js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="<%= this.ResolveClientUrl("~/Scripts/jquery-1.2.6.js") %>"></script>

How do I get around this relative path madness, i.e. what is the best practice way in ASP.NET MVC to set CSS/Javascript paths in the Site.Master so that they work for each view no matter how deep that view's URL happens to be.

ADDENDUM:

It seems that for the Index view, any path will work, strangely:

<script type="text/javascript" src="/Scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../../Scripts/jquery-1.2.6.js"></script>

But for any other pages (pages with a deeper URL), none of these work.

What's going on here? How can we set the Javascript path once in Site.Master and they work for all pages?

ADDENUM II:

It turned out to only be a problem with the jqgrid javascript file (not the jquery file), apparently inside that file it is referencing other javascript files and gets confused:

<script type="text/javascript" src="<%= Url.Content ("~/js/jquery.jqGrid.js") %>"></script>

I know (hope) you can't see them on my local machine, I just don't know how to make the http's non-links with this editor. Point is that the paths don't work if there are directories in the URL. — Edward Tanguay
– Edward Tanguay, Commented Jan 12, 2009 at 15:55
Good point about the Index View because everything appears to work fine until you move to another Action. — JustinStolle
– JustinStolle, Commented May 27, 2010 at 17:04

Community · Accepted Answer · 2017-05-23 12:09:11Z

15

You can also use the Url.Content method call to make sure that the paths are correctly set.

Examples can be found here.

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Jan 12, 2009 at 15:47

Kieron

27.2k16 gold badges81 silver badges124 bronze badges

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

Comments

Tomas · Accepted Answer · 2012-04-02 11:30:25Z

13

Regarding paths used in CSS documents:

/Content/site.css

Body {background-image:url('background.jpg');}

Relative paths in CSS documents are related to the CSS document, not the document being displayed.

This information saved me some headaches.

edited Apr 2, 2012 at 11:30

Tomas

60.2k54 gold badges251 silver badges386 bronze badges

answered Apr 29, 2009 at 12:48

Ropstah

17.9k27 gold badges123 silver badges199 bronze badges

Comments

jacobangel · Accepted Answer · 2009-01-12 15:37:37Z

3

Try setting the javascript to use a forward slash at the beginning, like "/js/jquery.jqGrid.js" This will set them to use the root domain instead of relative pathing.

answered Jan 12, 2009 at 15:37

jacobangel

7,0262 gold badges37 silver badges35 bronze badges

1 Comment

Sean Carpenter Over a year ago

Of course this will only work if the files truly live in a location off the root of the site. For instance, developing in a virtual directory but deploying in the root would cause this method to fail during development.

Daniel Earwicker · Accepted Answer · 2009-05-11 21:40:30Z

1

The solution for jqGrid: open the file jquery.jqGrid.js and locate the line:

var pathtojsfiles = "js/"; // need to be ajusted

As the comment says, you need to edit that path, e.g. for a typical ASP.NET MVC app,

var pathtojsfiles = "/Scripts/js/"; // need to be ajusted

answered May 11, 2009 at 21:40

Daniel Earwicker

117k38 gold badges209 silver badges289 bronze badges

2 Comments

Yonatan Karni Over a year ago

when running locally in a virtual directory/application, the URL will be /MyApp/Scripts/js/. any suggestions on what to do then? I'd hate to turn the js file into a view just so I can use URL.Content, and I'm not too crazy about relying on changes to lmhosts etc. any alternatives?

Daniel Earwicker Over a year ago

Short answer: I switched to using slickgrid, which doesn't have this problem.

Samir Ahmed · Accepted Answer · 2013-04-20 12:18:44Z

1

You need to add runat="server" and to specify the absolute path like this:

<script type="text/javascript" runat="server" src="~/js/jquery.jqGrid.js"></script>]

answered Apr 20, 2013 at 12:18

Samir Ahmed

111 bronze badge

Collectives™ on Stack Overflow

CSS and Javascript relative path confusion in ASP.NET MVC

5 Answers 5

Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related