Different between ./ , ../ , ../../ , ~/ on file path(URL) in asp.net

These path components are shortcuts with specific meanings:

  • . means the current path level (so if you’re on index.aspx and you reference ./style.css then the latter would have to be in the same folder as the former)
  • .. means one path level up (so if you’re on /somefolder/index.aspx and you reference ../style.css then the latter would have to be in the parent folder of someFolder)
  • / means the root level (so /style.css is the same as http://www.mysite.com/style.css)
  • ~ in ASP.NET means the server-side application root (so ~/index.aspx would be translated to the URL of the index.aspx file that’s in the application’s root)

There are a number of things to note here:

  • There is a difference between server paths and client paths. For example, from the web browser’s perspective there’s no “application root.” A web browser wouldn’t know what to do with ~. That can only be used in paths which are pre-processed in server-side components. The server-side components would then know to translate that into a client-visible path based on the current location of the application relative to the web server.
  • Parent path specifiers (..) have no limit. The root’s parent is considered the root. So if you’re on http://www.mysite.com/someFolder/index.aspx and you reference ../../../../style.css it will go to http://www.mysite.com/style.css.
  • The browser also translates paths for you. This is one of the differences between the “page source” and the “DOM.” Your page source may have a reference to ../somePage.aspx, but when you hover over it with your mouse the browser indicates that it’s http://www.mysite.com/somePage.aspx. This is because the browser has converted the relative path of the former into the absolute path of the latter.