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：

• http://www.blueshop.com.tw/board/FUM20041006161839LRJ/BRD20061004102747OD4.html
• Program