Javascript and CSS files don't work when using a sub-directory

Question

I need to get the base path because currently my application is hosted as a sub-site like:

www.example.com/site1/site2/

Where my IIS application is setup in site2, but my razor pages and master page is referencing things like:

 <link href="/Assets/css/styles.css" rel="stylesheet">

When in this case it should be like:

 <link href="/site1/site2/Assets/css/styles.css" rel="stylesheet">

I also have images like:

 <img src="/Assets/images/logo.jpg" />

How can I get this to work in a dynamic way so I don't have to hard code the sub-directory somewhere?

Notice the tilde ~ at the front of the path. It's important. See stackoverflow.com/questions/4563235/… — Dan Esparza
– Dan Esparza, Commented Apr 18, 2013 at 19:05

Tommy · Accepted Answer · 2013-04-18 19:05:01Z

5

You should use the built in helpers to get the relative path to your content.

 <link href="@Url.Content("~/Assets/css/styles.css")" rel="stylesheet">

For a site hosted at www.domain.com/site/subdirectory, the above will render out to

<link href="/site/subdirectory/Assets/css/styles.css" rel="stylesheet">

And, if you ever move your site or change your root path, you will not have to change your markup code.

More examples:

Images

<img src="@Url.Content("~/Assets/images/logo.jpg")" />

Javascript

<script type="text/javascript" src="@Url.Content("~/Assets/Scripts/jsfile.js")"></script>

edited Apr 18, 2013 at 19:05

answered Apr 18, 2013 at 18:53

Tommy

39.9k10 gold badges93 silver badges125 bronze badges

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

4 Comments

Tommy Over a year ago

I don't know what you mean by link URLs?

Tommy Over a year ago

This method is for providing the correct path to any static content on your web server. If you are asking about how to make links to controller/actions -> that is a different issue. But one we can help you with.

loyalflow Over a year ago

Yes for links, so the @Action.ActionLink have to be aware of the sub-directories etc.

Tommy Over a year ago

@Html.ActionLink() references a controller/action and has nothing to do with subDirectories. When you put @Html.ActionLink("Text", "action", "controller") it has no bearing on what level of a subdirectory your application is at.

Collectives™ on Stack Overflow

Javascript and CSS files don't work when using a sub-directory

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related