当前位置: 首页 > news >正文

(转)母版页和相对路径

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

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

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

01.jpg

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

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

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

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

02.jpg  

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

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

03.jpg

遗憾的是,这种语法只对服务器端控件有效。如果你要对普通的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这个方法,还真不错,呵呵...

相关文章:

  • 不修改原数组方法
  • [Mvc]在ASP.NET MVC中使用Repeater
  • django 一对一, 一对多,多对多的领悟
  • [转]ASP.NET Core: Static Files cache control using HTTP Headers
  • VMware HA实战攻略之五VMwareHA测试验收
  • Java的Cloneable接口还有深浅复制
  • WSUS系列之第三版部署
  • 一篇你看了就懂的DNS详解
  • 使用TripleDES算法加密/解密
  • Sql Server函数全解(二)数学函数
  • IT维护部门的绩效考核怎么做?
  • cs20_8-1
  • 恢复Linux系统里被删除的 Ext3文件
  • Python基础之函数
  • Picturing virtual functions
  • 网络传输文件的问题
  • 自己简单写的 事件订阅机制
  • 《用数据讲故事》作者Cole N. Knaflic:消除一切无效的图表
  • Angular 2 DI - IoC DI - 1
  • CentOS7简单部署NFS
  • Elasticsearch 参考指南(升级前重新索引)
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • JavaScript 无符号位移运算符 三个大于号 的使用方法
  • javascript 总结(常用工具类的封装)
  • JavaScript工作原理(五):深入了解WebSockets,HTTP/2和SSE,以及如何选择
  • Mysql数据库的条件查询语句
  • PHP 的 SAPI 是个什么东西
  • PHP面试之三:MySQL数据库
  • python学习笔记 - ThreadLocal
  • uva 10370 Above Average
  • v-if和v-for连用出现的问题
  • vue 个人积累(使用工具,组件)
  • Vue.js 移动端适配之 vw 解决方案
  • 多线程事务回滚
  • 工作中总结前端开发流程--vue项目
  • 官方新出的 Kotlin 扩展库 KTX,到底帮你干了什么?
  • 世界上最简单的无等待算法(getAndIncrement)
  • 首页查询功能的一次实现过程
  • 限制Java线程池运行线程以及等待线程数量的策略
  • 项目管理碎碎念系列之一:干系人管理
  • 译有关态射的一切
  • 用Python写一份独特的元宵节祝福
  • kubernetes资源对象--ingress
  • #define用法
  • $GOPATH/go.mod exists but should not goland
  • (10)ATF MMU转换表
  • (libusb) usb口自动刷新
  • (附源码)springboot美食分享系统 毕业设计 612231
  • (附源码)springboot猪场管理系统 毕业设计 160901
  • (过滤器)Filter和(监听器)listener
  • .NET 4.0中的泛型协变和反变
  • .NET 8 编写 LiteDB vs SQLite 数据库 CRUD 接口性能测试(准备篇)
  • .NET构架之我见
  • /boot 内存空间不够
  • @Autowired注解的实现原理