how to render the relative path with tilde into ../../ of relative path in jquery/javascript?

Question

Well, i understand my title is a bit confusing. I will state it clearly below with the example.

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

In html, the control above will be rendered as

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

I notice that,it will convert the src from "~" to "../../" .It auto arrange it will the file level.

so in javascript, i want to set it the control with this url :

~/Presentation/Resources/Images/PDF.png

unfortunately, in html it will be rendered 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 wanna get the "../../" relative path with "~" ? I have tried this,but i cant get it.

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

For Razor see https://stackoverflow.com/questions/8574237/using-site-root-relative-links-in-razor — Michael Freidgeim, May 12 '18 at 04:51

score 9 · Accepted Answer · answered Sep 13 '11 at 07:04

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

In the master page for the site, put this:

<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 have put the function right in the master page, but then you wouldn’t get intelli-sense on it for the rest of your code. Now you can call ResolveUrl with ~/ right from javascript.

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

I need it because i have to bind dynamic html control with the ~/url — DEN, Sep 13 '11 at 07:42

score 5 · Answer 2 · edited May 23 '17 at 12:00

Actually, URLs with tilde get converted to 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 actually done automatically for you in Web Controls like HyperLink and such)

The big difference with those two methods happens when you use User-controls. In a case, the URL refers to the URL relative to the folder where the user-control is, in the other case, that would be the page containing the user-control.

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

Jonas Stensved · Answer 3 · 2011-09-13T07:13:43.887

Have a look at the VirtualPathUtility Class and this information from msdn about ASP.NET project paths.

The VirtualPathUtility.ToAppRelative method is probably what you're looking for.

VirtualPathUtility.ToAppRelative

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

It explains and gives examples on how to convert between different path formats.

I also think you should to output the correct path at server level instead of reverse engineering in javascript in the browser. It may cause issues if you rearrange your project and asp changes it.

I edited my answer since I misunderstood your question when I read it the first time. — Jonas Stensved, Sep 13 '11 at 07:16

score 1 · Answer 4 · answered Sep 13 '11 at 07:04

WebControls translate the tilde into the correct path when run on the server before rendering the html, you will need to use the full path or relative path in jQuery if you're changing the src on the fly.

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

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

how to render the relative path with tilde into ../../ of relative path in jquery/javascript?

4 Answers4

Linked