devxlogo

Relative Urls in user controls

Relative Urls in user controls

Urls that you set in user-control’s child controls are relative to the user control’s directory, not to the host page’s directory. Say for example that you have an user-control located under the /UserControls directory, and the host page under the / root directory. The user-control exposes a custom public property named ImageUrl, that allows the host page to set the image to show in some area of the user control – to do this the control typically simply maps the ImageUrl of an inner Image control. The programmer correctly expects to set the ImageUrl with an Url relative to the host page, that’s the intuitive way to do, right? However, there will be problems if the ImageUrl property is defined as follows:

Public Property ImageUrl() As String    Get        Return InnerImageCtl.ImageUrl    End Get    Set(ByVal Value As String)        InnerImageCtl.ImageUrl = Value    End SetEnd Property

In fact, the passed Url will be considered relative to the user control’s path. So, if the developer sets the ImageUrl property to “Image1.gif” in the host page, thinking that she’s linking to the Image1.gif file located under the / root directory, the inner Image control will instead point to /UserControls/Image1.gif, namely to the file path relative to the user control’s folder. It wouldn’t be intuitive for the developer to set the Url relative to the user control’s folder, also because if this path changes, she would have to change all the Url in all the host pages. There is a solution of course, and its very easy. In the user control you can covert the Urls so that they’re relative to the host page, by using the Page.ResolveUrl method. The Set block of the ImageUrl property should then be changed as follows:

Public Property ImageUrl() As String    Get        Return InnerImageCtl.ImageUrl    End Get    Set(ByVal Value As String)        InnerImageCtl.ImageUrl = Page.ResolveUrl(Value)    End SetEnd Property

See also  Why ChatGPT Is So Important Today
devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist