母版页的相对路径问题

母版页引用外部文件的路径问题(2009-08-06 14:49:01)
转载标签： 杂谈 分类： jscript学习笔记 
在母版页中引用的外部文件不外乎css 和js 文件, css文件比较简单, 因为它的路径是相对于母版页的位置而言的, 而js 则不然, 它是相对于内容页而言的. 举个例子, 有下面的文件树:

root
 |_master.master
 |_content1.aspx
 |_js1.js
 |_folder1
     |_content2.aspx

在应用程序的根下面, 有一个母版页master.master, 一个内容页content1.aspx, 一个js文件js1.js, 另外, 还有一个处于folder1子目录下的另一个内容页conten2.aspx,  则, 在母版页中引用js1.js 时, content1 的相对路径就是当前目录, 直接写文件名就行了, 可是对content2来说,  js1.js 处于它的上层目录, 相对路径要写作: ../js1.js  , 由于此js 文件是在母版页中的引用的, 所以这个相对路径就没办法直接写了.

解决办法有:
1. 直接写绝对路径.

<script type="text/javascript" src="//virtualPath/js1.js"></script>
这种做法是我极度反感, 并且无法忍受的, 因为它使得虚拟目录的名字无法改变, 而且事实上, 我们公司应用程序的名字和正式服务器上虚拟目录的名字是不同的, 所以这种方法要么在开发阶段无效, 要么在运行阶段无效, 除非应用程序名和虚拟目录名总是一样, 并且虚拟目录名不会改变, 否则不应该这样引用js.

2. 在服务器端注册.

Page.ClientScript.RegisterClientScriptInclude("js1.js", Page.ResolveClientUrl("~/js1.js"));
aspx页面中可以使用<%=Page.ResolveUrl("~/")js1.js%>但是不知道为什么不能用在master中

这种做法的缺点也是明显的, 首先, 它必须放在page_load 之类的事件处理器中, 每次回发都执行一次,  其次, 这样引用后, 在页面上写js代码时, 无法智能感知到已经引用的js 文件, 减慢编程速度, 而且一大堆警告也不是什么赏心悦目的事件.

3. 用ScriptManager 引用

    <asp:ScriptManager ID="sm1" runat="server">
        <Scripts>
            <asp:ScriptReference ScriptMode="Auto" Path="~/Js1.js" />
        </Scripts>
    </asp:ScriptManager>
这种引用是可以智能感知到的, 目前为止也没发现有什么副作用, 是推荐的解决方案.

--

昨天漏写了图片url的路径问题, 图片url 也是相对于内容页的, 所以在客户端并没有特别好的办法, 我的建议是直接给img 控件加个runat="server" 属性, 例如:
 <img alt="" src="images/img.gif" runat="server" />
这样, 服务器就会自动给它生成正确的url.

另外, 如果在样式中指定了背景图片之类的, 建议放入css文件中, 在css文件中, url() 里面的相对路径是相对于css文件本身的, 而如果放入母版页中, 则就变成了相对于内容页了.  例如:

母版页中:

<table class="css1">

css文件:

.css1
{
    background-image:url(../images/1.jpg);
    background-repeat:no-repeat;
}
 
而如果把这两个样式放在table的style中, 就只有跟母版页路径相同的内容页才能正确显示.

16.4.5　母版页和相对路径

一个经常让开发人员疑惑的问题是母版页是如何处理相对路径的。如果你使用的是静态文字，这一问题不会困扰你。不过，如果你加入了<img>标签或者指向其他资源的HTML标签，问题就可能发生。

当你把母版页和内容页放在不同的目录时，问题就发生了。把母版页和内容页分放到不同的目录，这是大型网站推荐使用的最佳实践。实际上，微软建议你在专门的文件夹里保存所有的母版页。不过，如果你不够小心，使用相对路径时会带来问题。

例如，假设你把母版页放在一个叫做MasterPages的子文件夹里，并在母版页里加入了如下的<img>标签：

 

假设文件\MasterPages\banner.jpg存在，这看起来是行得通的。甚至在Visual Studio设计环境会出现图片。但是，如果你在另一个子文件夹里创建了一个内容页，路径就会被解释成相对于那个文件夹。如果文件在那里不存在，就会得到一个破损的链接而看不到图片。更糟的是，如果有一幅具有相同文件名的另外一个图片，你会不经意地得到一幅错误的图片。

这样的问题之所以会发生，是因为<img>标签是普通的HTML。所以，ASP.NET不会接触到它。遗憾的是，当ASP.NET创建内容页的时候，这个标签就不合适了。相同的问题出现在向其他页面提供相对链接的<a>标签以及用来把母版页链接到样式表的<link>元素。

要解决这一问题，你可以预先把URL写成相对于内容页面的地址。不过这会带来混淆，限制母版页使用的范围，并且产生在设计环境里不正确显示母版页的负面效应。

另一个快捷的解决方案是把图片标签变成服务器端控件，这样ASP.NET就会修复这个错误：

 

这个解决办法会起作用是因为ASP.NET根据这一信息创建一个HtmlImage服务器控件。这个对象在母版页的Page对象实例化后创建，此时，ASP.NET把所有路径解释为相对于母版页的位置。你可以使用同样的技术来修复<a>标签对其他页面的链接。

你还可以使用根路径语法，并用"~"字符作为URL的开头。例如，下面这个<img>标签毫无歧义地指向网站的MasterPages文件夹中的banner.jpg文件。

 

遗憾的是，这种语法只对服务器端控件有效。如果你要对普通的HTML产生同样的效果，你需要在链接里包含域名的完整的相对路径。这样的HTML代码难看且不可移植，所以不推荐使用。