Simplify Object Paths

UI Tip

LANGUAGES: HTML | All .NET Languages

TECHNOLOGIES: User Controls

Simplify Object Paths

Save time by using the "~" character to complete your user controls.

By Brad McCabe

One of the hardest challenges of writing user controls or Web-based applications is that the path to objects, such as image files and hyperlinks, can vary based on the relative location of the requested page to the object. With ASP.NET, you can cut down on the complexity of these paths by using the "~" character.

The ~ causes ASP.NET to generate the relative path to the object at run time even though you have entered an absolute path at design time. Take a look at what happens with this image control:

<asp:Image id="Image1" runat="server" ImageUrl="~/Images/ig_logo.gif"></asp:Image>

The first thing you'll notice is that because the mapping of the path happens at run time, Visual Studio does not display the image on the design-time surface and you will see a red X as if the path isn't valid. This is OK; the image renders correctly in the browser.

If you place this control either directly on a page or in a user control on a page at the root of your ASP.NET application, this is the resulting HTML:

Now create a new folder off the root of your project and move that page to this location. If you run the project again and view the resulting HTML of the page in your browser, you'll notice that the source attribute (src) has been adjusted automatically:

If you drag and drop the page into the Images directory and run the project again, this will be the HTML for the image:

Using ~ is not limited to the Image control. You can use it on most standard server-side control properties that require a path, such as hyperlinks and image buttons.

In addition, you can use the ResolveURL function from the Page object to resolve a relative path in your code. The function returns a string containing the relative path based on the absolute path passed in. This works great if you work with a page-level base class, which I described in my last article (http://www.aspnetpro.com/art.asp?id=226). Because your base function could be called from any page at any level, using ResolveURL ensures any paths you set in code are correct. This is useful for various scenarios, such as creating navigation menus from your code on the fly.

Using ~, you can have ASP.NET create a relative path at run time automatically based on your absolute path for any ASP.NET server-side control. Just remember that this trick works only with ASP.NET server-side controls and not standard HTML objects, so this will not work if you put it directly on your page:

Got a UI question, a tip or an idea for a topic you'd like me to cover? I'd love to hear it. Email me at [email protected].

Brad McCabe is the technical evangelist for Infragistics. Brad also has been a systems architect and consultant for Verizon Communications and many other clients, and he was a leading .NET evangelist within Ajilon Consulting. His primary interests include ASP.NET, Windows CE .NET, .NET Compact Framework, and Microsoft's networking technologies. E-mail him at [email protected].

Comments

Plain text