ASP.NET里的路径的使用-客户端标记
使用客户端标记<img>来说明一下绝对路径和相对路径的使用。
在VS2005里新建一个WebSite,取名为:AbsoluteAndRelativePath,呵呵,名字很长,构建了具有层次的文件夹结构,如图所示:
其中,有些页面没有使用MasterPage,有些使用了。
一 不使用MasterPage
对于根目录(AbsoluteAndRelativePath)下的页面RootPage.aspx,在VS中,直接从image文件夹里把图片拖多来,得到的代码如下:
<img src="image/root.png" />
<img src="SubFolderOne/image/subone.png" />
<img src="SubFolderTwo/image/subtwo.png" />
<img src="SubFolderTwo/NestedFolder/image/nested.png" />
这类型路径是一相对路径,其含义为:在当前的驱动盘下的当前页面(RootPage.aspx)所在的文件夹(目录)内的image文件夹(目录)里的root.png文件。另外几个类似,就不在累赘了。
Ctrl+F5看看效果,是正常显示的,哈哈,当然正常,不正常那就太诡秘了。
恩,接下来,让我们变换一下路径的写法:
(1) 将其改为:src="../image/root.png",然后,运行一下,呃,结果大失所望,不显示图片。怎么一回事呢?让我们看看解析以后的地址,如下:http://localhost:3188/image/root.png
恩,难怪不显示图片,这个路径下,根本就不存在图片嘛。让我们回头看看这个写法的意思。如果大家还记得上一讲基础知识篇的内容,那我们知道,两个点(..)符号,是取上一级目录(父目录)的,于是,我们从RootPage.aspx所在的位置出发,它在AbsoluteAndRelativePath下,则,其上一级,则到了http://localhost:3188了,如果不清除的话,让我们看看正常现实图片时候的路径,如下:
http://localhost:3188/AbsoluteAndRelativePath/image/root.png对比一下层次结构就很容易发现了。
(2)将其改为:src=./image/root.png,然后,运行一下,嗯,有正确的图片现实。
让我们看看这路径的含义:一个点表示当前目录,则,其意思为在RootPage.aspx所在的目录内的image目录里的root.png文件。
(3)将其改为:src=".././image/root.png"
大伙按照以上介绍的方法读读此路径,看看图片是否可以正确显示。
(4)将其改为:src="./../image/root.png"
同样,大伙看看此图能否正常显示。
以上两个路径都是不能正常显示的。
(5)将其改为:src="../AbsoluteAndRelativePath/image/root.png"
(6)将其改为:src="../AbsoluteAndRelativePath/./image/root.png"
大伙看看此路径能否正常显示。
以上两个路径是可以正常显示的。
二 使用MasterPage
使用位于AbsoluteAndRelativePath目录下的MasterPage-(名字为:RootMasterPage.master)。我们使用最简单的效果,当一图片,默认是灰色的背景,当鼠标放上去的时候,将背景变为红色,鼠标移开,则变回灰色。
简单设置一下,如下所示:
<img src="image/header_gray.png"
onmouseover="this.src='image/header_red.png'"
onmouseout="this.src='image/header_gray.png'"
/>
如图:AbsoluteAndRelativePath下的RootPageRootMasterpage.aspx和SubFolderOne下的UseRootMasterpage.aspx都应用了此
MasterPage(RootMasterPage.master)。
运行试一试,位于子文件夹里的现实不正常。恩,让我们看看原因,原来是基准位置不对,造成了在SubFolderOne文件夹里的页面,当遇到上述的相对路径的时候,得到了一个不正确的文件路径,如下:
http://localhost:3188/AbsoluteAndRelativePath/SubFolderOne/image/root.png
知道了原因,那就让我们着手解决吧,于是,迅速更换了一个路径:
src="../image/header_gray.png"
这时,子文件夹是正常了,但是,副作用是,另外一个文件夹就不正常了,呃,没办法,只好重新写一路径:
src="/AbsoluteAndRelativePath/image/header_gray.png"
使用了一绝对路径,这回天下太平了,终于可以松一口气了。
喝了一杯茶回来以后,发觉,假设将此网站发布到IIS或者其他地方会有什么情况发生呢?
试之。
同时,取一个不是AbsoluteAndRelativePath的名字作为应用程序的名称,嚯嚯,这时候问题就来了,刚才设定的绝对路径,现在又开始出错了,真恼人啊。
改来改去,都没有找到最优雅的做法,于是,用了一个下下招:
在head标记里,使用了base节点,设定了相对路径的基准点:
<head runat="server">
<title>路径</title>
<base href="http://localhost:3159/AbsoluteAndRelativePath/" />
</head>
然后,路径改为相对路径:
<img src="image/header_gray.png"
onmouseover="this.src='image/header_red.png'"
onmouseout="this.src='image/header_gray.png'"
/>
然后,发布网站的时候,将此路径修改,哎,也不失为没办法中的办法啊