ASP.NET母版页与内容页相对路径的问题

ASP.NET母版页与内容页相对路径的问题

1. 图片问题

    图片显示问题:
<img runat="server" src="~/images/ad468x60.gif" alt="" />

方法1:如果<img>标签外层有runat"server"类型的form 加上runat="server" 路径使用绝对路径~/
方法2: background="<%=ResolveClientUrl("~/image/Logo1.jpg")%>"
方法3:使用服务器标签  <asp:Image runat="server" ID="img" ImageUrl="~/images/close.jpg" />
    背景图问题:
在一个控件的背景使用背景图的时候,在相对路径下会找不到图片,此时只需要将此图片设置成CSS文件的相对路径就可以了:
如CSS定义:.menu_head { background-image:url(../images/plus.gif);background-repeat:no-repeat; background-position:right;}
JS文件中改变此背景图: $(this).css({ backgroundImage: "url(/images/minus.gif)" });

其中url的路径从‘/’开始,表示从网站的根路径开始寻址

2. CSS文件引用

<link rel="stylesheet" type="text/css" href="style.css" />

这里神奇的就是link的文件的href是随着被访问文件的目录结构自动调整,说白了就考虑母版页引用的路径就可以了,其他不用费心。

比如在母版页同目录下的一个文件夹内的一个xxx.aspx引用的母版页,那么上面的语句在客户端就自动变为

<link rel="stylesheet" type="text/css" href="../style.css" />

前提就是<head runat="server"></head>必须有runat="server"

3. JS文件引用

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

这样的话在其他目录下的页面文件,客户端肯定就引用不到了

那么你需要这样处理

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

<script type="text/javascript" src='<%=ResolveClientUrl("menu/ddsmoothmenu.js")%>'></script>

那么很明显ResolveClientUrl是相对路径,是比较好用的,当然ResolveUrl也有很多地方需要这样的绝对路径,其中TLERP是web应用的名字。

4.母版页下查找DOM问题

方式1:使用母版页,组件的id都会变得,所以不能写死,要用 xxxx.ClientID 动态的
方式2:利用jquery智能的selector。  var arg = $('[id$=TextBox1]').val();(未验证)
获取window的width和div的width时出现的问题:
一般情况下: ($(".page")代表一个div)
var windowWidth = $(window).width();
var pageWidth = $(".page").width();
但使用母版页后,内容页与母版页不在同一目录时则不可用:
调试后发现$(window)的第一个元素为一个Window Window下包含innerWidth属性
$(".page")的第一个元素为一个HTMLDivElement 下面包含clientWidth属性
所以改写后为:
var windowWidth = $(window)[0].innerWidth;
            var pageWidth = $(".page")[0].clientWidth;

 

ASP.NET母版与内容页相对路径的问题 

2011-11-24 10:34:44|  分类: 默认分类 |  标签:相对路径  母版页  绝对路径内容页  |举报 |字号 订阅  

1. 图片问题

非常好解决

<img runat="server" src="~/images/ad468x60.gif" alt="" />

加上runat="server" ,路径使用绝对路径~/基本上就OK了。

2. CSS文件引用

<link rel="stylesheet" type="text/css" href="style.css" />

这里神奇的就是link的文件的href是随着被访问文件的目录结构自动调整,说白了就考虑母版页引用的路径就可以了,其他不用费心。

比如在母版页同目录下的一个文件夹内的一个xxx.aspx引用的母版页,那么上面的语句在客户端就自动变为

<link rel="stylesheet" type="text/css" href="../style.css" />

前提就是<head runat="server"></head>必须有runat="server"

3. JS文件的引用

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

这样的话在其他目录下的页面文件,客户端肯定就引用不到了

那么你需要这样处理

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

<script type="text/javascript" src='<%=ResolveClientUrl("menu/ddsmoothmenu.js")%>'></script>

这是2种方式,在客户端的路径当然也会不一样,分别是:

<script type="text/javascript" src='/TLERP/menu/jquery.min.js'></script>

<script type="text/javascript" src='../menu/ddsmoothmenu.js'></script>

那么很明显ResolveClientUrl是相对路径,是比较好用的,当然ResolveUrl也有很多地方需要这样的绝对路径,其中TLERP是web应用的名字。

另外,如果你将这样的代码放在了<head>里面,将会报错:

控件包含代码块(即 <% ... %>),因此无法修改控件集合。

原因我不说了,你将引用的东西放在<body>里即可,哪怕是<body>和<form>之间。

在看了上面的东西后 的确很实用

比如说你在母版页中用到了背景 background-image:url(./image/Logo1.jpg);

第一种方法:

建立一个CSS文件,然后用到上面的2方法。

第二种方法:

用到上面的3

background="<%=ResolveClientUrl("~image/Logo1.jpg")%>"

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值