1. 程式人生 > >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")%>"