我想很多朋友使用母板或控件时遇到一个同样的问题就是,这些被多个不同目录下的页面引用的公共区里,涉及到的相对路径问题。

先看下下面的简单代码:

Default.master母板在根目录:

 

  1. <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Default.master.cs" Inherits="MyWebservice.Default" %> 
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" > 
  6. <head runat="server"> 
  7.     <title>无标题页</title> 
  8.     <script type="text/javascript" src="js/jquery.js"></script> 
  9.     <script type="text/javascript"> 
  10.     $(document).ready(function(){ 
  11.         alert("jQuery.") 
  12.     }); 
  13.     </script> 
  14.     <asp:ContentPlaceHolder ID="head" runat="server"> 
  15.     </asp:ContentPlaceHolder> 
  16. </head> 
  17. <body> 
  18.     <form id="form1" runat="server"> 
  19.     <div> 
  20.         <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
  21.          
  22.         </asp:ContentPlaceHolder> 
  23.     </div> 
  24.     </form> 
  25. </body> 
  26. </html> 

 和母板同一目录的页面index.aspx:

 

  1. <%@ Page Language="C#" MasterPageFile="~/Default.Master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="MyWebservice.index" Title="首页" %> 
  2. <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
  3. </asp:Content> 
  4. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
  5. </asp:Content> 

index.aspx页面可以找到js/jquery.js文件。

但是下面的OA目录下的oa.aspx:

 

  1. <%@ Page Language="C#" MasterPageFile="~/Default.Master" AutoEventWireup="true" CodeBehind="oa.aspx.cs" Inherits="MyWebservice.oa.oa" Title="在线办公" %> 
  2. <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 
  3. </asp:Content> 
  4. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
  5. </asp:Content> 

因为它在OA/下,所以需要../js/jquery.js但是怎么能兼顾这2种情况呢,实际中兴许嵌套级别更多。

当然了,可能会考虑使用绝对url即用/js/jquery.js,但这个方法的问题就是“虚拟目录”的问题,团队开发如果各自的虚拟目录不一样,相互间总不能每次修改吧,不太灵活。

所以灵活一点就是动态的方式,如下:

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

查看生成的代码都是绝对url方式:

<script type="text/javascript" src="/pathtest/js/jquery.js">
我这里虚拟目录是pathtest.
也可以
<script type="text/javascript" src="<%=ResolveUrl("~/js/jquery.js") 
%>"></script>
下面做个实验,我们把母板移动下,放到masterpage/文件夹里,看看什么情况,这时候需要主要2点,第一是
页面引master母板需要改:
原来
<%@ Page Language="C#" MasterPageFile="~/Default.Master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="MyWebservice.index" Title="首页" %>
表示项目根目录下,现在改成:
<%@ Page Language="C#" MasterPageFile="masterpage/Default.Master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="MyWebservice.index" Title="首页" %>

或者绝对(注意是项目绝对位置哦)

<%@ Page Language="C#" MasterPageFile="~/masterpage/Default.Master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="MyWebservice.index" Title="首页" %>

这是index.aspx的。

第二点需要改的是jquery.js的路径,

如下

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

或绝对的

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

你会发现<% %>里的一般是项目路径(绝对带~)。

另外OA/oa.aspx与index.aspx不同的就是引入母板的地方:

<%@ Page Language="C#" MasterPageFile="~/masterpage/Default.Master" AutoEventWireup="true" CodeBehind="oa.aspx.cs" Inherits="MyWebservice.oa.oa" Title="在线办公" %>

或者相对(这个注意与index.aspx的区别哦)

<%@ Page Language="C#" MasterPageFile="../masterpage/Default.Master" AutoEventWireup="true" CodeBehind="oa.aspx.cs" Inherits="MyWebservice.oa.oa" Title="在线办公" %>

 

2.好了上面的页面生成时是绝对URL,

<script type="text/javascript" src="/pathtest/js/jquery.js"></script>

那么相对URL呢。

使用Page.ResolveClientUrl()方法咯,

注意OA/oa.aspx的:

<script type="text/javascript" src="../js/jquery.js"></script>
与index.aspx的区别:
<script type="text/javascript" src="js/jquery.js"></script>

看完这篇,请继续看 

再谈asp.net的路径 http://xcf007.blog.51cto.com/471707/344259