本文介绍了ASP.NET中母版页及其子页面正确配置图片、CSS及JS文件路径的方法。通过使用绝对路径与相对路径结合的方式，确保不同层级目录下的页面能够正确加载所需的外部资源。
母版页中引用图片、外部js、css文件的路径问题
当嵌套母版页的子页面与母版页不在同一级目录时，往往会牵涉到外部图片、js、css文件引用的路径问题。（以下是引用别人加自己整理）
1. 图片、<a>标签
非常好解决
<img runat="server"src='~/images/log.gif'></script>
<ahref='~/book/buy.aspx' runat="server"></a>
加上runat="server" ，路径使用绝对路径~/基本上就OK了。
2. CSS文件引用
<link rel="stylesheet"type="text/css" href='style.css'></script>
这里神奇的就是link的文件的href是随着被访问文件的目录结构自动调整，说白了就考虑母版页引用的路径就可以了，其他不用费心。
比如在母版页同目录下的一个文件夹内的一个xxx.aspx引用的母版页，那么上面的语句在客户端就自动变为
<link rel="stylesheet"type="text/css" href='../style.css'></script>
前提就是<head runat="server"></head>必须有runat="server"
3. JS文件的引用
<script type="text/javascript" src='menu/jquery.min.js'></script>
这样的话在其他目录下的页面文件，客户端肯定就引用不到了
那么你需要这样处理
<script type="text/javascript" src='<%=ResolveUrl(“menu/jquery.min.js”) %>'></script>
<script type="text/javascript" src='<%=ResolveClientUrl(“'menu/jquery.min.js”) %>'></script>
这是2种方式，在客户端的路径当然也会不一样，分别是：
<script type="text/javascript" src='/Example/menu/jquery.min.js'></script>
<script type="text/javascript" src='menu/jquery.min.js'></script>
那么很明显ResolveClientUrl是相对路径，是比较好用的，当然ResolveUrl也有很多地方需要这样的绝对路径，其中Example是web应用的名字。
另外，如果不可用请在<head>标记中添加：runat="server"
当子页面需要引用自己的css、js外部文件时，可以在母版页的<head runat="server" ></head>标记中加添加一个标签
<asp:contentplaceholder runat="server" id="HeadContent" >
</asp:contentplaceholder>
子页面可在此标记中加入自己需要引用的文件
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" Runat="Server">
<link rel="stylesheet" href="css/thickbox.css" type="text/css" />
<link rel="stylesheet" href="http://www.cnblogs.com/css/common.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
扫一扫
119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
