在ASP.NET的母版页中使用图片和超链接，HTML标记和ASP.NET标记的不同

在ASP.NET的母版页中使用图片和超链接

在母版页中使用相对地址的时候要特别小心.特别是在母版页中添加图片和超链接的时候。HTML标记或ASP.NET控件中，相对地址的解析是不一样的。

如果你在ASP.NET控件中使用相对地址，相对地址被解析为相对母版页的地址，例如，假设你在母版页中添加了一个图片：

<asp:Image ImageUrl="Picture.gif" Runat="Server" />

如果母版页在一个MasterPages文件夹中，这个地址会被解析为：

/MasterPages/Picture.gif

如果引用母版的内容页在另一个不同的文件夹中，图片地址还是会被解析为这个相对于母版页的地址。

在HTML标记中使用相对地址则不同，这个图片地址会被解析为相对于引用母版页的内容页的地址。

解决的方法有三个：

第一种方法，把HTML标记替换成ASP.NET标记。

第二种方法，使用绝对地址，而不是相对地址，例如，在名为MyApp的应用程序中，可以使用以下<img>标签来显示在MasterPages文件夹中的图片：

第三种方法，在母版页中使用方法来重新解析相对地址，如程序清单5.10所示。

我的解决办法：

1、把母版页和引用页都放在项目根目录下，想把母版页放在主题文件夹下的，系统不让。

2、把母版用的图片放在主题文件夹下，和CSS文件在一起。

01.<%@ Master Language="VB" %>
02.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
03."http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
04.
10.
11.
14.
15.

You must be careful when using relative URLs in a Master Page. For example, you must be careful when adding images and links to a Master Page. Relative URLs are interpreted in different ways, depending on whether they are used with HTML tags or ASP.NET controls.

If you use a relative URL with an ASP.NET control, then the URL is interpreted relative to the Master Page. For example, suppose that you add the following ASP.NET Image control to a Master Page:

<asp:Image ImageUrl="Picture.gif" Runat="Server" />

The ImageUrl property contains a relative URL. If the Master Page is located in a folder namedMasterPages, then the URL is interpreted like this:

/MasterPages/Picture.gif

Even if a content page is located in a completely different folder, theImageUrl 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="Picture.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 namedContentPages, the relative URL is interpreted like this:

/ContentPages/Picture.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 different folders, the relative URL changes. There are three ways that you can solve this problem.

First, you 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.

Note

Relative URLs used by ASP.NET controls in a Master Page are automatically reinterpreted relative to the Master Page. This process of reinterpretation is calledrebasing. Only ASP.NET control properties decorated with theUrlProperty attribute are rebased.

Second, you 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 theMasterPages folder:

<img src="/MyApp/MasterPages/Picture.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.

Another option is to use a method to reinterpret relative URLs in a Master Page. For example, the Master Page inListing 5.10 includes a method namedMasterUrl(). This method is used with the<img> tag in the body of the Master Page, which displays the website logo.

Listing 5.10. `MasterPages\ImageMaster.master`

<%@ Master Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat="server">

    Public Function MasterUrl(ByVal url As String) As String
        Return String.Format("{0}/{1}", Me.TemplateSourceDirectory, url)
    End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Image Master</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <img src='<%=MasterUrl("Logo.gif") %>' alt="Website Logo" />

    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server" />

    </div>
    </form>
</body>
</html>

The Master Page in Listing 5.10 is located in a folder namedMasterPages. This folder also includes an image namedLogo.gif. This image is displayed with the following HTML tag:

<img src='<%=MasterUrl("Logo.gif") %>' alt="Website Logo" />

The MasterUrl() method appends the image's filename to the value of the Master Page'sTemplateSourceDirectory property. TheTemplateSourceDirectory property represents the folder that contains the Master Page.

The content page inListing 5.11 uses the Master Page and correctly displays the website logo (seeFigure 5.5):

Figure 5.5. Displaying a Master Page relative image.

[View full size image]

Listing 5.11. ImageContent.aspx

<%@ Page Language="VB" MasterPageFile="~/MasterPages/ImageMaster.master" %>

<asp:Content
    ID="Content1"
    ContentPlaceHolderID="ContentPlaceHolder1"
    Runat="Server">

    <h1>Content</h1>

</asp:Content>

posted on 2011-11-23 22:21 WestGarden 阅读(708) 评论(0) 编辑收藏举报

刷新页面返回顶部