【转载】母版页引用外部文件的路径问题

在母版页中引用的外部文件不外乎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"));

这种做法的缺点也是明显的, 首先, 它必须放在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中, 就只有跟母版页路径相同的内容页才能正确显示.