Url Rebasing in ASP.NET 2.0
page 2 of 3
by Suresh Kumar Goudampally
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 32514/ 66

URL Rebasing and MasterPages

We know that Masterpages are used for standardized look across the pages of a webapplication, which injects its html markup to the content page.  Content pages are aspx files that are tied up to masterpages where content is defined by placing the html in the content control.

 

We give the exact path in html markup if the web form and the image are in the same path

 

Eg: <img src="Images/logout.gif" />

 

We also know that we give the relative path in html markup if the webform and image are in differnt folder

Eg: <img src="../Images/logout.gif" />

 

Suppose we have image tag in the masterpage where image path is relative path, and we have content page

 

Eg: <img src="../Images/logout.gif" />
 

When a content page is requested, its content is merged with the master page, and the page runs in the context of the content page. That is the browser requests the Content page webform and not directly the masterpage file. The masterpage html markup is exactly injected into the content page.

 

So this works only when masterpage and the content page are in the same folder. If the masterpage is one folder and derived page is some sub folder as seen in the screen shot the relative path given points to wrong path and the image is not rendered.

 

To avoid this ASP.NET 2.0 rebases the url based on the folder of the content page , on the condition that control should have a runat ="server" attribute.

 

Eg:  <img id="Img1" src="../Images/logout.gif" runat="server" />

 

Now the ASP.NET 2.0 renders the correct relative path despite of content page is in different folder where the masterpage is. This concept of rebasing the url is called Url Rebasing.

 

In case of "~" also we need to use runat="server" attribute for rendering correct relative path.

 

Eg:  <img id="Img1" src="~/Images/logout.gif" runat="server" />
 

Including stylesheet in the following way aslo fails if the masterpage and derived page are in different folders

 

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />   

 

The workaround for this would be to include the style sheet in the following way

 

<link href='<%= BasePath %>/MasterPages/StyleSheet.css' 
rel="stylesheet" type="text/css" />

 

Where BasePath is public string declared and assigned in the masterpage class as follows

 

public string BasePath = "";
 
BasePath = string.Format("http://{0}{1}", 
HttpContext.Current.Request.ServerVariables["HTTP_HOST"],
(HttpContext.Current.Request.ApplicationPath.Equals("/")) ?
string.Empty : HttpContext.Current.Request.ApplicationPath);

 

Advantages

1.      Developer need not put any additional effort to avoid this sort of issues when using masterpages.

2.      Migration to masterpages of existing application without masterpage would be easy in case of relative path issues.

3.      Common stylesheets can be included in the masterpage rather than all the content pages.

 

Some important points of Url Rebasing

 

·         When embeded as given below in masterpage works only when master page and derived page are in the same folder.

      Eg: <img src="../Images/logout.gif"/>      
 

·         When embeded as below in master page (runat ="server" included) works even if masterpage and derived page are in different  pages here url rebasing happens in asp.net 2.0 and the control is rendered as

     <img id="Img1" src="../../../Images/logout.gif"
          runat="server"/>          

     Based on the folder where the derived page is residing.

     Eg: <img id="Img1" src="../Images/logout.gif" runat="server"/>
 

·         <img src="logout.gif"/>

      This works when masterpage and derived page are in the same folder   

      and image is also in the same folder. This  wont work if derived  

      page is in different folder and masterpage and the image are in the 

      same folder.  

 

·         <img id="Img1" src="logout.gif" runat="server"/>

      This works when even when the masterpage and derived page are in different   

      folders or in same folder, where the Url Rebasing happens.  

 

·         Both mentioned below work and the second Image will rebase URL

      Eg1: <asp:Image ID="imgTest1" runat="server"  
           ImageUrl="~/Images/tree.png"/>    
      Eg2: <asp:Image ID="imgTest3" runat="server"    
           ImageUrl="Images/tree.png"/>

 

·         This works as includes runat server attribute and the “~” symbol

      Eg: <img id="Img1" src="~/images/tree.png" 
          runat="server" /> 

View Entire Article

User Comments

Title: A very apt and to-the-point article for the topic   
Name: Hardik Shah [Guru]
Date: 2010-03-14 4:50:27 AM
Comment:
Good one ... !!! It surely sufficed.
Title: Resolve URL page method ?   
Name: Umar
Date: 2009-08-04 10:12:33 AM
Comment:
They way you handle the URL issues is good but its old style that was adopted in 1.1 or before it. Now we have a page method "ResolveURL" which converts the relative path to absolute path.
Title: Good Practice   
Name: TrongKha
Date: 2009-07-31 6:03:36 PM
Comment:
This is the good practice to solve link resource issues when you develop an ASP.NET application. You will not run into any problem even you decide to move (*.aspx) to different subfolders.

basePath = Request.ApplicationPath;
or
basePath = Page.ResolveUrl("/~");

(*.aspx) uses "~/folder/filename" for:
head runat="server"
asp:image ...
asp:hyperlink ...
Title: Mr   
Name: Thanigainathan
Date: 2009-07-31 8:36:45 AM
Comment:
Very nice article. Will be helpful in practical scenarios.

Thanks,
Thani
Title: stylesheet trick   
Name: shaun
Date: 2009-07-30 4:45:47 AM
Comment:
the trick to rebase the stylsheet is totally unneccessary.
the 'HEAD' section of the masterpage should have the 'runat=server' attribute and anything in the head section will be processed at the server, so just use the '~' in the stylesheet path to denote the root of your site.
Title: good one   
Name: vinny
Date: 2009-07-13 11:40:47 AM
Comment:
Thank you Suresh
Title: Programmer   
Name: Cyril Gupta
Date: 2009-06-13 8:27:00 PM
Comment:
Well, I simply use the '~' facility in my projects and though I don't identify it as rebasing or anything similar, it works wonderfully. Thanks for the article.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2018 ASPAlliance.com  |  Page Processed at 2018-12-13 3:36:08 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search