Introduction
Here is Part 3
We must be careful when using relative URLs in a Master Page. For example, we
must be careful when adding images and links to a Master Page. Relative URLs are
interpreted in various ways, depending on whether they are used with HTML tags
or ASP.NET controls.
If we use a relative
URL with an ASP.NET control, then the URL is interpreted relative to the Master
Page. For example, suppose that we add the following ASP.NET Image control to a
Master Page:
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/CSSiteLogo.gif" />
![Master-page-in-vb.net.gif]()
The ImageUrl property contains a relative URL. If the Master Page is located in
a folder named MasterPages, then the URL is interpreted like this:
/MasterPages/CSSiteLogo.gif"
Even if a content page is located in a completely different folder, the ImageUrl
is interpreted relative to the folder that contains the Master Page and not
relative to the content page.
The situation is
completely different in the case of HTML elements. If an HTML element such as an
<img> or <a> tag includes a relative URL, the relative URL is interpreted
relative to the content page. For example, suppose you add the following <img>
tag to a Master Page:
<img src=" CSSiteLogo.gif" />
The src attribute contains a relative URL. This URL is interpreted relative to a
particular content page. For example, if you request a content page located in a
folder named ContentPages, the relative URL is interpreted like this:
/ContentPages/CSSiteLogo.gif
Using relative URLs with HTML elements is especially tricky because the URL
keeps changing with each content page. If you request content pages from various
folders, the relative URL changes. There are three ways that you can solve this
problem. First, we can replace all the HTML elements that use relative URLs with
ASP.NET controls. An ASP.NET control automatically reinterprets a relative URL
as relative to the Master Page. Second, we can avoid relative URLs and use
absolute URLs. For example, if your application is named MyApp, then you can use
the following <img> tag to display an image file located in the MasterPages
folder:
<img src="/MyApp/MasterPages/CSSiteLogo.gif"
/>
The disadvantage of using absolute URLs is that they make it difficult to change
the location of a web application. If the name of your application changes, then
the absolute URLs will no longer work and you'll end up with a bunch of broken
images and links.
<%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="Site" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<title>C#
Corner | ASP.Net | VB.Net | Silverlight | WPF | Blend</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="totalserved" class="csstotalserved">
We have served total 2323232 visitors last month.
</div>
<div>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/CSSiteLogo.gif" />
</div>
<div class="clear
hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/Forum/Forum.aspx" Text="Forum"/>
<asp:MenuItem NavigateUrl="~/Author/Author.aspx" Text="Author"/>
</Items>
</asp:Menu>
</div>
<div id="mainbody" class="main">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
Note: Continued
in the Next Part.
HAVE A GREAT CODING!