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.