zoukankan      html  css  js  c++  java
  • asp.net中Master模版页和相对路径的问题

    这是在CSDN上别人的分享经验,作为新人,把它记录下来:

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

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

    例如,假设你把母版页放在一个叫做MasterPages的子文件夹里,并在母版页里加入了如下的<img>标签:
    <img src="aaa.jpg" />

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

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

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

    另一个快捷的解决方案是把图片标签变成服务器端控件,这样ASP.NET就会修复这个错误:
    <img src="aaa.jpg" runat="server" />

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

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

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

     今天在解决这个问题的时候另一个问题又出现了,现在我要在母版页引入jquery的文件,按照上面的方法我写成  
    <script src="js/jquery.js" type="text/javascript" runat="server"></script>

    可是在运行的时候却出错了,说是jquery.js中的第12行的$符号不知道是什么意思,然后我把runat="server"去掉后就又运行成功了, 看来是不能加runat="server"这个属性了,可是这样的话我在另一文件夹中套用母版页的时候又会出现上面这个相对路径的错误了,经到CSDN论 坛发贴问,解决方法如下:

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

    ResolveUrl作用:

           将URL转换成请求客户端可用的URL,一般用于在不同的目录下调用模板,

           模板中调用了图片,引入了外部CSS文件,如果用相对路径,在不同的目录下会出现问题.

           ResolveUrl正好解决了这个问题,在不同的目录自动生成相应路径.

    用法:

    ResolveUrl("login.css") // login.css相对于模板页

  • 相关阅读:
    饿了么P7级前端工程师进入大厂的面试经验
    前端程序员面试的坑,简历写上这一条信息会被虐死!
    这次来分享前端的九条bug吧
    移动端开发必会出现的问题和解决方案
    创建一个dynamics 365 CRM online plugin (八)
    创建一个dynamics 365 CRM online plugin (七)
    创建一个dynamics 365 CRM online plugin (六)
    创建一个dynamics 365 CRM online plugin (五)
    使用User Primary Email作为GUID的问题
    怎样Debug Dynamics 365 CRM Plugin
  • 原文地址:https://www.cnblogs.com/wenghaowen/p/2776693.html
Copyright © 2011-2022 走看看