網頁

ASP.NET -- 同一個Master Page不同資料夾使用之路徑處理

在早期寫ASP時代,在美工方面,最喜歡使用include方式,把各區塊切一切後,include到原始*.asp之中,main一塊、content一塊、sidebar一塊、footer一塊,如果頁面複雜些,那就你的原始code中滿滿的include程式碼。

到了ASP.NET,有了Master Page,中文稱「主版頁面」,其實美工類的東西我碰的不多(其實是lazy),最近自己試著使用Master Page與CSS來進行的排版,排的還蠻有心得,CSS玩久了,好像是玩樂高積木,還不錯玩。

Master Page讓我們很方便進行統一排面配置,結合到頁面時,會不會有一堆雜七雜八的Code,可專心在Content上,但碰到一個問題,就是不同目錄在使用同一個Master Page時,會出現找不到檔案的問題。

例如,我在網站根目錄之下有「Site.master」檔案,內容引用CSS檔及jQuery檔:

<link href="Styles/Site.css" rel="stylesheet" type="text/css" media="screen" />
<script src="Scripts/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>

在同一頁目錄之下的所有頁面,使用起來應讓是100%沒有問題,但如果你在其他目錄之下引用同一個Site.master檔,head引用的檔案會出現問題,例如在News目錄下引用根目錄之下的Site.master,會出現找不到Site.master的圖、檔案…等等。

查了一下路徑,原來Site.master的路徑被換成:

<link href="Styles/Site.css" rel="stylesheet" type="text/css" media="screen" />
<script src="News/Scripts/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>

CSS的link正常,但script被多加了目錄路徑上去,就算你在Master Page使用ASP.NET的絕對路徑「~/Scripts/jQuery/jquery-1.4.4.min.js」,complier後的路徑是「News/~/Scripts/jQuery/jquery-1.4.4.min.js」,還是不對。(是因為script不是ASP.NET伺服器控制項)

最後上網查了一下,解決方式也很簡單,解法有二:

複製原始Master Page

在每個目錄下copy一份原始的Master Page,然後修改裡面的路徑。例如在News複製一份原始的Site.master,然後指定使用News/Site.master檔,Blog目錄一樣複製然後使用Blog/Site.master。

好處
如果你每個分類(News/Blog/Product/...)都會有不同的排版方式,因為*.master各自獨立,所以不會互向影響,每個版面修的改修,只影響各自分類的頁面。

壞處
如果你是要每個分類都有統一的版面,那複製就不是好辦法,複製*.master比較合適「客製化」,也就是每個分類頁面是有差異的,但如果是統一版面,那就是牽一髮動全身,一個*.master修改,其他所有*.master也要跟著修改。

路徑轉換

必須在Master Page裡使用in-line Code的寫法,為路徑進行ResolveUrl轉換即可。

<script src="<%= ResolveUrl("~/Scripts/jQuery/jquery-1.4.4.min.js") %>" type="text/javascript"></script>

像我現在在寫後台管理系統,需要的就是統一版面,使用複製*.master並不是好辦法,所以使用了ResolveUrl來轉換路徑之後,就可以在網站任何目錄及路徑之下使用根目錄的Site.master,而不會有任何問題。所以當你需一個統一版面的Master Page,記得為head裡的路徑加上ResolveUrl函數進行轉換。

ps. CSS引用的link可以不用, 怎麼用路徑都是正確的,我也不知道為什麼?

Reference:

2 則留言:

  1. 謝謝, 寫得很好, 讓我受益良多

    回覆刪除
  2. 學習了,寫的真好,因為你解決了一個問題,感謝!

    回覆刪除

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。