Problem with relative URLs

Topics: Controls
Mar 13, 2009 at 9:57 PM
The problem I am experiencing is with my Training And Support Now website.  However, the build that I am having trouble with is not the one that is uploaded.

I am trying to place a custom button in the website.  This button will link to another page on the site.  Here is the code for the button from the master page:
<asp:ImageButton ID="Help"
                            onmouseover="this.src='pics/Over.gif'"
                            onmouseout="this.src='pics/Up.gif'"
                            ImageUrl="~/pics/Up.gif"         
                            AlternateText="Step-By-Step Help"
                                CssClass="helpbutton"
                                onclick="Help_Click"                                
                                ToolTip="Step-By-Step Instructions"
                                runat="server" />

Here is the code for the button's click event:
protected void Help_Click(object sender, ImageClickEventArgs e)
    {
        Response.Redirect("~/page/Help.aspx");
    }
This works fine with the pages that were originally included in the theme (i.e., Home, Archive, Contact, Feed, etc.)   Unfortunately, for custom pages that I have created (Services and Rates at the link above) this does not work because the relative path is off.  It would need to go up one more directory like this:  ../pics/Up.gif.  If I do this, however, then the original pages no longer work correctly.

There has to be a better way of doing this.

I apologize for not having the website uploaded so that you can test it yourself.  If this is needed then I will do it this evening.
Coordinator
Mar 14, 2009 at 1:06 AM
Edited Mar 14, 2009 at 1:09 AM
Does Response.Redirect("/page/Help.aspx") work (no tilde)?

Also, if all you're doing when the button is clicked is sending the person somewhere, it would be slightly more efficient to use a hyperlink, rather than an ImageButton.  Either an <asp:HyperLink> control with an <img> tag (or <asp:Image> tag) embedded in the hyperlink.  Or you could do it with no server controls, and just use a standard <a> with an embedded <img>.  This would eliminate one extra round trip to the server.

<a href="/page/Help.aspx"><img onmouseover="this.src='/pics/Over.gif'"
       onmouseout="this.src='/pics/Up.gif'" src="/pics/Up.gif"
       alt="Step-By-Step Help" title="Step-By-Step Instructions" class="helpbutton" /></a>
Mar 14, 2009 at 3:36 AM
Edited Mar 14, 2009 at 4:05 AM
Ok, completely re-editing this post...

I think perhaps I should upload the website so that you can see what is going on.  I can already tell by looking at your response that if I simply use the <a> tag as you have it I will have the same problem that I am having now.

On my website if you navigate to the Services page or the Rates page you will be at these two URLs respectively:
  • http://www.trainingandsupportnow.magiancreative.com/page/Services.aspx
  • http://www.trainingandsupportnow.magiancreative.com/page/Rates.aspx
In order to use a relative URL from these links to get back to the pics directory I would have to use:
../pics/Up.gif
However, on the other pages such as Archive or Contact the URLs are:
  • http://www.trainingandsupportnow.magiancreative.com/archive.aspx
  • http://www.trainingandsupportnow.magiancreative.com/contact.aspx
Using a relative URL from these two pages I would have to put:
pics/Up.gif
So no matter how I set it up, there are always a few pages where it will not work correctly.  I will probably upload the website at some point tonight so that you can take a better look.
Coordinator
Mar 14, 2009 at 3:59 AM
Spending too much time in the ASP.NET world often makes you forget about the basics of HTML :)

Hopefully the /page/Help.aspx worked without the leading tilde.
Coordinator
Mar 14, 2009 at 4:13 AM
Why can't you use a url starting with a /  ... for example /pics/Up.gif.

/pics/Up.gif should always resolve to:

http://www.trainingandsupportnow.magiancreative.com/pics/Up.gif
Coordinator
Mar 14, 2009 at 4:33 AM
Also ... just a guess, are you testing this out on your local machine where you have your blog installed as a subfolder underneath localhost -- e.g. localhost/blog?  In that case, the leading slash won't work on your local computer since it would incorrectly try to go to localhost/pics/Up.gif when it should be localhost/blog/pics/Up.gif.

If this is the case, you can set the path for onmouseover and onmouseout from your code-behind:

=== ASPX markup ===
<asp:HyperLink ID="aHelp"
     runat="server"
     NavigateUrl="~/page/Help.aspx">
     <asp:Image ID="iHelp" runat="server" ImageUrl="~/pics/Up.gif"></asp:Image>
</asp:HyperLink>

=== Code Behind ===
iHelp.Attributes.Add("onmouseover", string.Format("this.src='{0}'", ResolveUrl("~/pics/Over.gif")));
iHelp.Attributes.Add("onmouseout", string.Format("this.src='{0}'", ResolveUrl("~/pics/Up.gif")));

This should work on both your local machine as well as your live server.
Mar 14, 2009 at 5:02 AM
Ah, so that is what was happening.  I had been trying the /pics/Up.gif relative path earlier but it wasn't working.  Thanks for clearing up why in your last post.

The website is uploaded now but FileZilla claimed that there were a lot of unsuccessful transfers.  I repeated the process several times with the same results.  Checking the website, though, everything seems all right so far.