Creating Master Page (Using Images and Hyperlinks) in ASP.NET: Part 4

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!

Up Next
    Ebook Download
    View all
    Learn
    View all