What are the differences between ./, ../, and ~/ for specifying an image in my web application?
Like current directory, root, parent directory, etc.
"./" //the current directory
"../" //the parent directory
"/" //the site root directory
"~/" //virtual root Web path
ASP.NET Web Project Paths is a very good article in MSDN regarding paths in ASP.NET with good examples.
Web Pathing:
./ means this folder, equivalent to nothing on the front
ex: ./image.jpg and image.jpg are the same thing
/ the web application root folder
ex: /Test/image.jpg, go to the application root, find folder Test, find image.jpg
../ means up one folder then go to the folder after the slash...
ex: ../Test/image.jpg, go up one folder from the current folder your in, go into folder Test, and find image.jpg.
Physical Pathing:
~/ means the application physical root folder. This will not work if you are using it directly in the webpage (ex: <img src="~/images/image.jpg" />). You can use ResolveUrl to get the web path to a file. I have used this for referencing JavaScript libraries in a master page. I've also seen it used in some custom uploaders.
Related
I started with an ASP.NET MVC Core 2.1 project. Then, I loaded a 3rd party theme (html/css/javascript/fonts) into wwwroot folder of the project. When I open the .html files from wwwroot, all appears fine.
I now want to "cut" the theme into MVC parts -- _Layout.html, views, etc. When html content is placed into MVC views, do I need to prefix every link with "~"? For example, href="css/colors/orange.css" becomes href="~/css/colors/orange.css"? This seems like a lot of work. Is there any way to tell .NET that relative paths are off wwwroot?
And a related question -- I don't have to use MVC - if I used ASP.NET Core non-MVC project, would this not be an issue?
Thanks.
The tilde is used to resolve virtual folders. For example, if I put my app in a virtual folder app1 in IIS, then href="~/path" would be translated to href="/app1/path". If you aren't using virtual folders then you shouldn't need the tilde.
Additional
href="css/colors/orange.css" is relative to the folder you are in. It is expecting css to be a child of the current folder. If you were to add a leading slash then it would be an implied absolute path with the leading slash being root. href="/css/colors/orange.css" would expect css to be a child of your root folder. If you aren't using virtual folders as explained above you would still need to add a leading slash since css will always be a child of root.
I am working on a solution which has two projects in it. One is a virtual app which works in another. The first application is the panel and the second is the website. First application can be accessed with "localhost:10001/panel" and the second with "localhost:10001". You see, I created a virtual path for the first app to work under the second one in Visual Studio and they work great that way.
The problem I am having now is about the file uplaod system, "Blueimp's jQuery-File-Upload" plugin and as backend using "Backload". I must say that these work great on a standalone project. That's why I decided to continue the project using these.
But when it comes to a setup which I explained below, I cannot access the files I upload. I installed fileupload system in the panel project, which is accessed as "localhost:10001/panel" so when I leave the default web.config configuration for backload (default is "~/files"), all files are uploaded to the "localhost:10001/panel/files" path. And after the upload when I refresh the page, all uploaded file links are referencing "localhost:10001/files/" without the "panel" folder.
In BackLoad web.config notes how to change and use root upload folders are explained like that
filesRoot: // Root upload folder. If the value starts with '~/' (e.g. ~/files) the path is relative to the web root, otherwise set an absolute local path (e.g. d:/files) [Default: "~/Files"].
I understand that having "~/" at the beggining of a folder reference shows the project's root. But I can't figure out how to reference the upload folder, instead of the default "~/files", to upload and access all files from the second project's root. When I need to reference folder between these two projects I simple use "../", or "/" to access the second project's (site) root. But doing that in "filesRoot" attribute of BackLoad config settings, all file references are starting "///file....." and shows a local path in the computer.
I simply want to upload and access the files from the "localhost:10001/files" location when I upload files from the panel. Now, I cannot even use the "localhost:10001/panel/files" path because files are uploaded to "panel/files" folder, but are accessed from "files" folder with default settings.
BTW: I am using BackLoad's WebForms Example on this project, and this is a Web Forms project.
I ended up using Files folder as a temp folder. At the time of submit, I move the file which is uploaded in Files folder, to the folder of my need. And the problem is solved.
Thanks anyway...
I am trying to get my head over FileHelpers library and have main critical problem. When I try to implement it in my web app, or even use online demo I end up with "FileNotFoundException". The chosen file is being looked for on my C: drive. How can I make the FileHelpers code to access relative path to my application instead of absolute one?
Regards,
Bartosz
Use the Server.MapPath() method to map a relative path (based on current directory or web-site root) to an absolute accessible path.
For example, if yourfile.txt is placed inside App_Data folder of your web-site then you can write:
Customer[] customers =
(Customer[])engine.ReadFile(Server.MapPath("~/App_Data/yourfile.txt"));
The tilde character represents the root of your web-site, if you specify a relative path then it'll be resolved as relative to the directory where your ASP.NET page resides.
I feel like a nub for asking this, but I can't figure it out.. I've found several posts (here's one) saying that to use a relative path from the root of your site, start the path with /, ex:
<img src="/images/img1.jpg" />
My file hier. looks like
-root
-images
-css
-index.aspx
-subFolder
-test.aspx
Now when I use the src path as shown above, it doesn't work in either index.aspx or test.aspx, but when I remove the /, it works for index.aspx. In test.aspx, I used ../images/img1.jpg and it works. What gives? Why is my example above not working?
Your site is probably in a virtual directory, so the "/" refers to the actual web root as IIS (or whatever web server) sees it - maybe the folder above your 'root' folder
.
The relative paths work because they are traversing the directory based on the location, so for index.aspx it needs to go into images folder and get the img1.jpg, for test.aspx it needs to go up one level .. then into the images folder and get the img1.jpg.
Absolute paths are based off of were the application is installed from based on IIS settings. If you are just testing this from that folder your absolute path needs to include the root folder. /root/images/img1.jpg and then it will work from both test and index with the same absolute path.
Sometime we need to put / or ~/ as the suffix in order to make refer to the root
<script type="text/javascript" src="/scripts/jquery-1.5.1.min.js"></script>
<link href="~/Styles/MasterPage.css" rel="stylesheet" type="text/css" />
This is what i know from Phill
~/ is not valid unless you have a runat attribute on your control/element. '/' by itself specifies to the browser to look from the root directory, so if you link to '/css/main.css' from www.mysite.com/product/view.aspx it will look for the css file in www.mysite.com/css/main.css. When you use '~/' with runat-server, it will work out the path to the directory at runtime, so in the same example with '~/css/main.css' the rendered url will look like '../css/main.css' because it needs to drop the directory back 1 before finding the directory 'css'. (hope that makes sense) – Phill
How to include jquery in masterpage header without path problems?
but as i has tried, even i use / firefox still refer to ../../ instead of static path.
also, I don't know it clearly how to use it correctly , which one use on which situation.
~/ refers to virtual directory application root where as "/" refers to site roots eg if you have site that in http://www.example.com/ and which has http://www.example.com/foo where folder "foo" configured as virtual directory application in IIS a page in http://www.example.com/foo/foo.aspx will resolve ~/ as relative to virtual directory application root directory which is http://www.example.com/foo but "/" will still resolve to site root which is http://www.example.com/
The / at the beginning of a relative URL backs up to the root of the hostname.
The prefix ~/ in a relative URL can only be interpreted by the ASP.NET process, which is why it only works for runat=server. It is translated upon output to refer to the root URL of the ASP.NET application. Many times, this is the same as the root of the hostname, but it will differ if the ASP.NET application that the code is running in is a virtual directory in IIS rather than its own site.
If you only need to drop one directory level back, you can use "../" as the prefix rather than "/" or "~/".