运用母版页时的链接问题
在母版页中使用相对URL必须十分小心,例如在母版页中添加图片和链接时。根据所使用的是HTML标签还是ASP.NET控件,相对URL就会有不同的解析方式。
如果使用ASP.NET控件,相对URL会解析为相对于母版页的URL。以下的代码用来在母版页中添加ASP.NET Image控件:
<asp:Image ImageUrl="Picture.gif" Runat="Server" />
控件的ImageUrl属性值是一个相对URL。如果母版页是在名为MasterPages的文件夹中,这个URL就会解析为:
/MasterPages/Picture.gif
即使内容页在一个完全不同的文件夹中,ImageUrl属性仍然会解析为相对于母版页的URL而不是相对于内容页的URL。
如果使用HTML标签,情况就完全不同。如果在<img>或<a>之类的HTML标签中使用相对URL,这个相对URL会解析为相对内容页的URL。以下的代码用来在母版页中添加<img>标签:
<img src="Picture.gif"/>
src属性值是一个相对URL,这个URL会解析为相对内容页的URL。打开ContentPages文件夹中的内容页时,这个相对URL会解析为:
/ContentPages/Picture.gif
在HTML元素中使用相对URL是非常麻烦的,因为每一个内容页的相对URL都可能不同。如果打开不同文件夹中的内容页,就会改变相对URL。有4种方法可以解决这个问题。
第一种方法,用ASP.NET控件来替换所有使用相对URL的HTML元素。ASP.NET控件可以把相对URL重新解析为相对母版页的URL。
注解
在母版页中,ASP.NET控件所使用的相对URL会自动重新解析为相对母版页的URL。这种解析方式称为重定向(rebasing)。只有包含UrlProperty属性的ASP.NET控件属性才能被重定向。
第二种方法,用绝对URL来替换相对URL。例如在名为MyApp的应用程序中,可以使用以下<img>标签来显示在MasterPages文件夹中的图片:
<img src="/MyApp/MasterPages/Picture.gif" />
(在网站的应用中,通常我们使用"/"来表示根目录,/img/photo.jpg就表示photo.jpg文件在这个网站的根目录上的img目录里。但是这样使用对于初学者来说是具有风险性的,因为要知道这里所指的根目录并不是你的网站的根目录,而是你的网站所在的服务器的根目录,因此当网站的根目录与服务器根目录不同时,就会发生错误。)
使用绝对URL的缺点是,改变应用程序的位置会比较困难。如果应用程序名称改变了,那么绝对URL可能就不再生效,图片和链接也就不再有效。
第三种方法,使用Page.Resolve Url()方法将应用的相对URL转换成绝对URL。<a href='<%=ResolveUrl("index.aspx")%>">首页</a>
其中ResolveUrl("Index.aspx") 相当于“在网站根目录中查找网页Index.aspx”。
在母版页的主体中使用<img>标签和Page.ResolveUrl()方法来显示一个站点的logo图片。 MasterPages\ImageMaster.master
母版页保存在名为MasterPages的文件夹中。这个文件夹也包含一个名为Logo.gif的图片。这个图片使用以下的HTML标签显示:<img src='<%=Page.ResolveUrl("~/MasterPages/Logo.gif") %>' alt="Website Logo" />
Page.ResolveUrl()方法会将~符号转换成当前应用程序目录的正确路径。
<a href='<%=ResolveUrl("index.aspx")%>'></a>
<script src='<% = ResolveUrl("JS/easing.js") %>'></script>
注解:ResolveUrl("index.aspx")是从根目录出开始找,Page.ResolveUrl("index.aspx")是在当前页面所在文件夹找,要从根目录找科在前面加"~/",如:Page.ResolveUrl("~/MasterPages/Logo.gif")
第四种方法,所有使用相对URL的HTML元素加上runat="server"转换为服务器控件,服务器会自动判断路径,比如:
<img src="image/in01.jpg" runat="server" />