Webform in subfolder using master page

Question

Currently all of my web-form files (.aspx) are in root folder of my project (VS 2012).

I created a new folder name "pages" and add a new webform to it (WebForm1), using master page. When I run this page, its address is localhost:49217/pages/WebForm1.aspx which is correct, problems are:

• All of links now have been added the word "pages", for example the correct link should be localhost:49217/Contact.aspx now became: localhost:49217/pages/Contact.aspx

• The CSS look weird, kind of missing some css files (the path is wrong).

The CSS code in master page, css files are in css folder:

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">

If I add a new webform in root folder, everything is fine, but if I do that in a subfolder, everything is messed up.

EDIT:

1. CSS has been fixed, thanks for everybody.

2. Still the "pages" not fixed, it is added in all the links (of the master page)

Answer 1

When referencing style sheets or java script files inside of a master page I usually do the following:

<link href="<%= ResolveUrl("~/css/reset.css") %>" rel="stylesheet" />
<script type="text/javascript" src='<%= ResolveUrl("~/js/master.js") %>'></script>

This will work if you are debugging on your local, deploying to a web server in a virtual directory or if you deploy to the website root.

Answer 2

Your paths are relative to the current directory, you need to prefix them with a slash so that they always reference the root directory. Like this:

<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="/css/grid.css" type="text/css" media="screen">

You'll also have to do the same thing to your image paths.