母版页中的js和css文件引用路径的问题

母版页中的js和css文件引用路径的问题

2010-10-08 10:46 by MichaelYin, 1520 阅读, 0 评论, 收藏, 编辑

今天在做项目的时候发现了母版页中引用css文件和js文件路径在内容页中发生路径错误。

先来说说问题发生的情况吧，比如我在一个母版页中引用了一个js文件和一个css样式表文件，路径是使用的相对路径，代码是这样子的

1 2 3

<link href="../css/dtree.css" rel="stylesheet" type="text/css" />   <script src="../js/dtree.js" type="text/javascript"></script>

1	母版页我放在项目文件MasterPage文件夹中，脚本文件和css文件我分别放在相应的文件夹中，在Design模式中这也是可见的，然后我加入内容页，内容页假设我放在网站根目录下面，然后放入内容，进入后台进行编程，基本上完成以后想看看效果，就F5进行了调试，不过缺发现js没有起作用，在IE下查看源文件，发现引用处的css和js的路径发生了变化，如下所示

1 2 3

<link href="css/dtree.css" rel="stylesheet" type="text/css" />   <script src="../js/dtree.js" type="text/javascript"></script>

1	从这里可以看到，内容页中的引用的css文件的路径在页面加载运行后发生了变化，而js的路径没有相应的发生变化。这样就造成了内容页中并不能正确的引用到js文件的路径，从而造成了错误。

1	其实这样的问题并不仅仅限于js,比如页面中的HTML基本元素，在内容页加载的时候也会因为相对路径的路径问题而产生这样那样的问题。到<a href="http://www.cnblogs.com/sunrack/archive/2009/11/06/1597337.html" target="_blank">这里</a>可以查看稍微详细一点的信息。

1	对于这种问题，比较好的解决方案就是写成这样的形式

1	<script src='<%=ResolveUrl("~/js/jquery.js") %>' type="text/javascript"></script>

ResolveUrl方法会把服务器端的地址进行解析，转换之后的地址是诸如/Project/Folder/File.jpg 这样的绝对路径，转换之后就不用担心母版页带来的路径问题了。