Relative URLs in User Controls

If your user control contains child controls that have URL properties, you might want to expose some of those properties from your control directly. To do this correctly, you have to be aware of a few subtleties of URL resolution in a user control. By default, a relative URL passed into a user control is resolved with respect to the directory containing the user control. This URL resolution can be confusing to page developers who expect relative URLs that they pass into the control to be resolved with respect to the containing page. To provide a more intuitive model for page developers, we recommend that you invoke the Page.ResolveUrl method to resolve a URL that is passed into your user control before passing it on to a child control. This process is best understood with an example.

To demonstrate this technique, we'll create a user control ( LinkGlyph shown in Figure 4-4) that displays an image next to a hyperlink. LinkGlyph contains two child controls, an Image control and a HyperLink control. The Image control is an internal resource of LinkGlyph , and LinkGlyph itself sets the ImageUrl property of its Image control. On the other hand, LinkGlyph exposes the NavigateUrl property of its HyperLink control as a top-level property to be set by its users. Notice in Listing 4-13 that LinkGlyph resolves the URL that is passed into it before passing it on to its HyperLink child control.

Listing 4-13 LinkGlyph.ascx

 <%@ControlLanguage="C#"ClassName="LinkGlyph"%> <scriptrunat="server"> privatestring_navigateUrl; publicstringNavigateUrl{ get{ if(_navigateUrl==null){ returnString.Empty; } return_navigateUrl; } set{ _navigateUrl=value; link.NavigateUrl=Page.ResolveUrl(NavigateUrl); } } publicstringText{ get{ returnlink.Text; }

 set{ link.Text=value; } } </script> <asp:Imageid="image"ImageUrl=  "Image.gif"  runat="server"/> <asp:HyperLinkid="link"runat="server"/> <p/>

The ASP.NET page in Listing 4-14 uses LinkGlyph and sets its NavigateUrl property by specifying a page-relative URL. Figure 4-4 shows LinkGlyphTest.aspx accessed in a browser.

Listing 4-14 LinkGlyphTest.aspx

 <%@PageLanguage="C#"%> <%@RegisterTagPrefix="mspuc"TagName="LinkGlyph" src="UserControls/LinkGlyph.ascx"%> <html> <body> <formrunat="server"> <p> <mspuc:LinkGlyphid="linkglyph" NavigateUrl=  "CruiseSelectorTest.aspx"  Text="ClickToRegisterForanASP.NETCruise" runat="server"/> </p> </form> </body> </html>

Figure 4-4. LinkGlyphTest.aspx viewed in a browser

graphics/f04hn04.jpg

Request LinkGlyphTest.aspx in a browser, and examine the client-side HTML. You will see that the two relative URLs in the user control are resolved this way:

 <imgid="linkglyph_image" src="  /BookWeb/Chapter4/UserControls/Image.gif  "border="0"/> <aid="linkglyph_link" href="   /BookWeb/Chapter4/CruiseSelectorTest.aspx   "> ClickToRegisterForanASP.NETCruise </a>

The relative URL for the image was specified in LinkGlyph.ascx as Image.gif , and the relative URL for the hyperlink was specified in LinkGlyphTest.aspx as CruiseSelectorTest.aspx . The virtual root for our application is /BookWeb . Link Glyph.ascx is in /BookWeb/Chapter4/UserControls , and the containing page LinkGlyphTest.aspx is in /BookWeb/Chapter4 . Notice that the internally set ImageUrl property of the Image control is resolved relative to LinkGlyph.ascx as /BookWeb/Chapter4/UserControls/Image.gif , while the externally set Navigate Url of the Hyperlink control is resolved relative to LinkGlyphTest.aspx as /BookWeb/Chapter4/CruiseSelectorTest.aspx . If the user control did not invoke Page.ResolveUrl to resolve the externally set NavigateUrl , the relative URL set from the page would be resolved as /BookWeb/Chapter4/UserControls/Cruise SelectorTest.aspx , leading to a broken link.

If your user control is nested inside another user control, however, the technique we have recommended will not work if the containing user control passes in a URL that is relative to itself. In that case, it is best to pass in an absolute URL or a Web application “relative URL into the nested user control.

Warning

Finally, we'd like to add a warning about using URLs in HTML content ”in other words, tags that do not have runat="server". You should never use relative URLs in HTML content in a user control. This is because HTML is rendered without change by the user control. A relative URL in HTML will not be resolved by the control but will eventually be resolved with respect to the page on which the user control appears. A relative URL in the user control's HTML thus is meaningless, because a user control can be reused on different ASP.NET pages.