关于URL路径的基本使用
在使用CSS样式时,设计到对路径的引用,这里以<a></a>为例,说明路径的常规处理。
一般而言,链接路径的表达有三种方式:绝对路径、相对路径和基于根目录的路径。例如假设当前应用程序的结构如图3-5,它的网址为 http://www.asp.net,下面就介绍链接路径的表达方法。
(1)绝对路径
使用完整的URL地址,这种链接路径就是绝对路径,其特点是路径同链接站点的源点无关。如图
在图3-5里,如要建立指向about目录下的about.aspx,则链接地址为:
< a href=”http://www.asp.net/about/
about.aspx”></a>
而建立指向database.aspx文档的路径为:
< a href=”http://www.asp.net/product/other
/database.aspx”></a>
使用绝对路径的最大缺点是不利于移植,例如现在站点的地址为http://www.asp.net,如果有一天站点更该http://www.asp.com,则所有的链接地址都失效,需要进行更改,难以维护。
(2)相对路径
为了避免绝对路径的缺陷,可以使用相对路径。相对路径可以表达源端点和目标端点之间的相互位置关系。具体可以范围如下两种情况:
l 如果链接中,源端点和目标端点在同一个目录下,则在链接中只需要指明目标端点的文档名称就可以了。例如在图3-5中,如果希望在about.aspx文档中创建指向develop.aspx的链接,则可以写成如下:
<a href=”develop.aspx”>
l 如果在链接中,源端点和目标端点不位于同一个目录下,则只需要将目录的相对关系表达出来就可以了。如果链接指向的文档没有位于当前目录的子级目录中,则可以利用”..”符号来表示当前的父目录,多个..符号可以表示根高的父级目录,从而构建出目录的相对位置。例如如果希望在about.aspx文档中创建指向位于product目录中的software.aspx文档的链接,则可以用如下的代码:
<a href=”../product/software.aspx”>
如果希望在database.aspx文档中创建指向about.aspx文档的链接,则可以使用录如下的路径
<a href=”../../about/about.aspx”>
利用相对目录的好处在与只要站点的结构和文档不变,链接就不会出错,然而如果你移动了文件,或者相对关系发生变化,则就会发生错误。
(3)基于跟目录的路径
基于跟目录的路径可以看成是绝对路径和相对路径之间的一种折衷,在这种表达方式下,所有的路径都是从站点的跟目录开始的,它同源端点位置无关。
例如在图3-5时,建立指向About文件夹下的about.aspx的链接为
<a href="/about/about.aspx">
建立指向database.aspx的链接为
<a href="/product/other/database.aspx">
另外,如果指向的是主页可以写成
<a href="/">或者<a href="/default.aspx">
注意:判断一个路径是相对路径还是相对于跟目录的路径就看链接地址是否是从"/"开始
(4)ASP.NET的“~”路径
在ASP.NET里增加了一个新的表达方法“~”,“~”表示的路径是当前应用程序的跟目录。“~”和上面介绍的“/”最大的区别是由服务器进行动态解释。由于”~”是相对于应用程序的根目录,所以利用它可以简化路径的设置,在某些情况下似乎还必须使用该控件,例如如下使用了一个TreeView控件(具体以后会介绍)
<asp:TreeView ID="TreeView1"
RootNodeStyle-ImageUrl="~/images/xp/computer.gif"
ParentNodeStyle-ImageUrl="~/images/xp/folder.gif"
LeafNodeStyle-ImageUrl="~/images/xp/ie.gif"
CollapseImageUrl="~/images/xp/minus.gif"
ExpandImageUrl="~/images/xp/plus.gif"
NoExpandImageUrl="~/images/xp/blank.gif"
runat="server">
<Nodes>
<asp:TreeNode Text="My Computer">
<asp:TreeNode Text="Favorites" ImageUrl="~/images/xp/star.gif">
<asp:TreeNode Text="News">
<asp:TreeNode Text="MSN" NavigateUrl="http://www.msn.com"/>
<asp:TreeNode Text="MSNBC News" NavigateUrl="http://www.msnbc.msn.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Technology">
<asp:TreeNode Text="Microsoft" NavigateUrl="http://www.microsoft.com"/>
<asp:TreeNode Text="ASP.NET" NavigateUrl="http://www.asp.net"/>
<asp:TreeNode Text="GotDotNet" NavigateUrl="http://www.gotdotnet.com"/>
<asp:TreeNode Text="MSDN" NavigateUrl="http://msdn.microsoft.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Shopping">
<asp:TreeNode Text="MSN Shopping" NavigateUrl="http://shopping.msn.com"/>
<asp:TreeNode Text="MSN Autos" NavigateUrl="http://autos.msn.com"/>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="City Links">
<asp:TreeNode Text="MapPoint" NavigateUrl="http://www.mappoint.com"/>
<asp:TreeNode Text="MSN City Guides" NavigateUrl="http://local.msn.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Music Links">
<asp:TreeNode Text="MSN Music" NavigateUrl="http://music.msn.com"/>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
面显示了它的运行结果:
图3-6 TreeView控件运行结果图
在这个运行结果里可以看到News和CityLinks连接器都使用了文件夹图片folder.gif,这是通过
ParentNodeStyle-ImageUrl="~/images/xp/folder.gif"
进行设置的。在这里使用相对路径是不行的,因为在运行时,News和CityLinks在不同的级别,无法使用相对路径设置,如果使用绝对路径这里也算一个不错的选择,如果使用相对于根目录的路径,如果您使用的虚拟主机的话,就会发现有时你并得不到相对于根目录的路径,所以这里使用相对于应用程序的根目录确实是一个最好的做法。这个“~”就会由.NET在运行时自动解析的。
(5)在样式中使用地址注意的问题
可以在样式中引用图像,该图像的引用使用相对与样式文件的引用,仍然以图3-3为例,我在Style下建立了一个StyleSheet.css文件来存放样式,该样式的内容非常简单如下:
td.mybg{background:url(images/bg.gif)}
你可以看到我将td元素重新定义增加了背景图片bg.gif。这里的bg.gif来自于Style/images文件夹下的bg.gif,这样如果在首页引用时,可以正确的显示,如下:
<link rel="stylesheet" type="text/css" href="Style/StyleSheet.css">
<table height="86">
<tr>
<td width="146" class="mybg">this is a test</td>
</tr>
</table>
然而这和后面介绍主题里使用图像时正好相反。主题还可以包含外观文件中的控件定义所引用的图像。外观中对图像的引用应使用 Theme 目录下的图像文件夹的相对路径,以便外观文件和图像可以一起移到其他应用程序中。在运行时,会重新设置图像的路径,以使引用相对于目标页中的控件,而不是相对于外观文件。所以请务必区分这一点。
(6)确保路径指向文件的唯一性
在用ASP.NET处理路径时,需要确保文件的唯一性,否则将发生错误。特别是在使用用户控件时,如果路径引用的过于复杂,尽管理论上应该正确,但是实际运行时可能得到预想不到的错误,以图3-7为例:
图3-7 MyBlog结构图
在UI的目录学有一个Control文件夹,然后在该文件夹下有一个Calendar.ascx用户控件,Page.ascx用户控件引用了该calendar.ascx的代码如下:
<%@ Register TagPrefix="uc1" TagName="Calendar" Src="Controls/Calendar.ascx" %>
... ...
<uc1:Calendar id="Calendar1" runat="server"></uc1:Calendar>
在根目录下有一个default.aspx首页,它又引用了Page.ascx用户控件,如下:
<%@ Register TagPrefix="uc1" TagName="Page" Src="UI/Page.ascx" %>
... ...
<uc1:Page id="Page1" runat="server"></uc1:Page>
同时跟目录下也有一个Control文件夹和Calendar.ascx文件。那么尽管上面代码表面上看应该没有问题,但是由于用户控件层层嵌套引用,使得实际运行时,系统区分不了到底使用哪一个Calendar.ascx而发生错误,此时一个较为简单的解决方法是,所以的路径都使用相对于跟目录的引用就能够解决。