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" />
