How to make relative path with tilde in ../../ relative path in jquery / javascript?

Question

Well, I understand that my title is a bit confusing. I will give this as an example below.

<asp:ImageButton ID="imgButton" NavigateUrl="~/Presentation/Resources/Images/addFile.png" runat="server" /> 

In html, the control above will display as

 <input type="image" name="imgButton" id="imgButton" src="../../Resources/Images/addFile.png" style="border-width:0px;"> 

I notice that it converts src from "~" to "../../". Automatically organizes its file level.

so in javascript i want to install it using this url:

~ / Presentation / Resources / Images / PDF.png

Unfortunately in html it will display as

 <input type="image" name="imgButton" id="imgButton" src="~/Presentation/Resources/Images/addFile.png" style="border-width:0px;"> 

My question is: what should I write if I want to get the relative path "../../" with "~"? I tried this, but I can't get it.

 <script type="javascript"> document.getElementById("<%= imgButton.ClientID %>").src = "~/Presentation/Resources/Images/PDF.png"; </script> 

Answer 1

Try the following: http://weblogs.asp.net/joelvarty/archive/2009/07/17/resolveurl-in-javascript.aspx

On the main page of the site, enter the following:

 <script type="text/javascript"> var baseUrl = "<%= ResolveUrl("~/") %>"; </script> 

Then in your javascript file put this function:

 function ResolveUrl(url) { if (url.indexOf("~/") == 0) { url = baseUrl + url.substring(2); } return url; } 

You could put the function on the main page, but then you would not get intelli-sense on it for the rest of your code. Now your turn can call ResolveUrl with ~ / to the right of javascript.

Why do you need this for customers? Use servercontrols ( runat=server ) and you can use the tilde to resolve the URL on the server.

Answer 2

In fact, tilde URLs translate to an absolute URL thanks to the methods: ResolveURL and ResolveClientURL

Therefore, you should be able to do this:

 <input type="image" name="imgButton" id="imgButton" src="<%=this.ResolveClientUrl("~/Resources/Images/addFile.png")%>" style="border-width:0px;"> 

(this is done automatically for you in web controls like HyperLink, etc.)

The big difference with these two methods occurs when you use User-controls. In the case of a URL, it refers to the URL relative to the folder in which the user control is located, otherwise it will be a page containing the user control.

See also this question: Control.ResolveUrl vs Control.ResolveClientUrl vs VirtualPathUtility.ToAbsolute

Answer 3

WebControls translates the tilde to the correct path when running on the server before html rendering, you will need to use the full path or relative path in jQuery if you change src on the fly.

You might want to have a property on the page with the root path, for example: ApplicationRootURL, and do something like this:

 <script type="javascript"> document.getElementById("<%= imgButton.ClientID %>").src = "<%=ApplicationRootURL%>/Presentation/Resources/Images/PDF.png"; </script> 

Answer 4

See the VirtualPathUtility Class and this information from msdn about the ASP.NET Project Path .

The VirtualPathUtility.ToAppRelative method is probably what you are looking for.

VirtualPathUtility.ToAppRelative

If the virtual path for the application is "myapp" and the virtual path "/myApp/sub/default.asp" is passed to the ToAppRelative method, the resulting relative path of the application is "~ / sub / default.aspx".

It explains and provides examples of how to convert between different path formats.

I also think that you should output the correct path at the server level instead of reverse engineering in javascript in the browser. This can cause problems if you change your project and change its asp.