母版页中引用图片，外部js、css文件的路径问题 [转]

最新推荐文章于 2019-08-17 16:20:25 发布

weixin_30872789

最新推荐文章于 2019-08-17 16:20:25 发布

阅读量112

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cziger/archive/2012/05/31/2529313.html

本文介绍在ASP.NET中如何正确地在母版页及子页面中引用图片、CSS及JS等外部资源文件，包括使用绝对路径和相对路径的方法。

当嵌套母版页的子页面与母版页不在同一级目录时，往往会牵涉到 外部图片、js、css文件引用的路径问题。（以下是引用别人加自己整理）  
. 图片、<a>标签    
    非常好解决     
    <img runat="server"  src="~/images/log.gif" mce_src="~/images/log.gif"></script>   
     <a  href="~/book/buy.aspx" mce_href="~/book/buy.aspx" runat="server"></a>      
    加上runat="server" ，路径使用绝对路径~/基本上就OK了。   
. CSS文件引用     
     <link rel="stylesheet"  type="text/css"  href="style.css" mce_href="style.css"></script>      
     这里神奇的就是link的文件的href是随着被访问文件的目录结构自动调整，说白了就考虑母版页引用的路径就 可以了，其他不用费心。   
    比如在母版页同目录下的一个文件夹内的一个xxx.aspx引 用的母版页，那么上面的语句在客户端就自动变为     
     <link rel="stylesheet"  type="text/css"  href="../style.css" mce_href="style.css"></script>   
    前提就是<head runat="server"></head>必须有runat="server"     
.  JS文件的引用    
    <mce:script type="text/javascript" src="menu/jquery.min.js" mce_src="menu/jquery.min.js"></mce:script>        
    这样的话在其他目录下的页面文件，客户端肯定就引用不到了      
    那么你需要这样处理       
    <mce:script type="text/javascript" src='<%=ResolveUrl(“menu/jquery.min.js”) %><!--  
    '>  
    // --></mce:script>      
    <mce:script type="text/javascript" src="<%=ResolveClientUrl(“" mce_src="&lt;%=ResolveClientUrl(“"menu/jquery.min.js”) %><!--  
    '>  
    // --></mce:script>    
      
    这是2种方式，在客户端的路径当然也会不一样，分别是：      
    <mce:script type="text/javascript" src="/Example/menu/jquery.min.js" mce_src="Example/menu/jquery.min.js"></mce:script>    
    <mce:script type="text/javascript" src="menu/jquery.min.js" mce_src="menu/jquery.min.js"></mce: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" mce_href="css/thickbox.css" type="text/css" />  
        <link rel="stylesheet" href="http://www.cnblogs.com/css/common.css" mce_href="http://www.cnblogs.com/css/common.css" type="text/css" />  
        <mce:script type="text/javascript" src="js/jquery-1.4.1.min.js" mce_src="js/jquery-1.4.1.min.js"></mce:script> 
本文转自：http://blog.youkuaiyun.com/liujun198773/archive/2010/09/29/5913882.aspx