[ASP.net] 確保頁面的圖片、引用的JS檔和CSS檔路徑不會錯亂

2011-07-07

15813
0
ASP.net WebForm
2011-08-04

曾經碰過這樣的網站：

在網站根目錄下有MasterPage，裡面的ContentPage分散在各資料夾內、而各分散的ContentPage裡又再包分散在各資料夾的WebUserControl、可能WebUserControl裡又再包其他的WebUserControl

這時候如果在WebUserControl寫個相對路徑語法，如：


<img src="../images/Hello.jpg" alt="" />

在設計開發階段是可以看到圖片沒錯，但當該WebUserControl執行起來和其他.aspx合併後，此路徑可能就錯誤，圖片變叉燒包(引用的JS檔和CSS檔同樣道理)

有個辦法可以處理這問題(只是設計開發階段，圖片還是叉燒包)

Step 1 ：在Web.config裡配置網站的URL路徑，例如：


<appSettings>
    <add key="WebUrlWWW" value="http://shadow1.no-ip.info/"/>
     <!--測試開發時則用(記得要把網站的動態通訊埠設為False)--><add key="WebUrlWWW" value="http://localhost:8080/網站資料夾名稱/" />
  </appSettings>

Step 2 ：在App_Code資料夾下加入一個類別，宣告一個靜態成員讀取此配置，例如：


public class AppSettingsHelper
{
 public static string WebUrlWWW = WebConfigurationManager.AppSettings["WebUrlWWW"];
}

Step 3：在各頁面的<img src=”” />和引用javascript檔的寫法

靜態圖片


<img src="<%= AppSettingsHelper.WebUrlWWW  %>images/MyImage.jpg" alt="" />

javascript檔


    <script type="text/javascript" src="<%= AppSettingsHelper.WebUrlWWW  %>js/jQuery.js"></script>

引用CSS檔的寫法不支援上面兩種src=”<%= AppSettingsHelper.WebUrlWW %>”方式

就算只有寫href=’<%= AppSettingsHelper.WebUrlWWW %>’也是一樣


<link type="text/css" rel="Stylesheet" href="<%= AppSettingsHelper.WebUrlWWW %>"/>

呈現出來的HTML原始碼：

所以引用CSS檔可以用後置程式碼的方式來解

.aspx


<link type="text/css" rel="Stylesheet"  id="myCss" runat="server"/>
<!--加id和runat屬性為了要讓後置程式碼可以控制-->

.cs


    protected void Page_Load(object sender, EventArgs e)
    {
        myCss.Attributes["href"] = AppSettingsHelper.WebUrlWWW + "css/MyCss.css";
    }

另外，從下面的回應引用，感謝91版大提供另一種更快的方式


<link href="~/css/MyCss.css" type="text/css" rel="Stylesheet" />

這樣不管各資料夾的ContentPage或各資料夾WebUserControl怎麼包來包去，都能確保引用的資源路徑都是正確的

2011.7.25追記 ASP.net MVC做法

在MVC的View(.aspx)裡，直接用<%= 類別.成員%> 程式會出錯

所以Web.config


<appSettings>
 <!--正式上線時要換成DomainName-->
 <add key="WebUrl" value="http://localhost:34232/">
</appSettings>

Gloab.asax


 /*多追加此方法*/ 
 void Session_Start(object sender, EventArgs e)
 {

 // 啟動新工作階段時執行的程式碼
 Session["WebUrl"] = WebConfigurationManager.AppSettings["WebUrl"];
 }

接著在 .aspx View引擎


<iframe src='<%= (string)Session["WebUrl"]%>Home/About' width="100%" ></iframe>

之後要上線時只要改掉Web.config裡的設定，其他全部程式就都會跟著改了。

以上如果有更好的解決方式，歡迎提出來分享

出處：http://social.msdn.microsoft.com/Forums/zh-TW/236/thread/09b9b528-932d-4d75-a503-8f2a7bc69ba1

2011.8.2追記

參考：http://social.msdn.microsoft.com/Forums/zh-CN/295/thread/b30ca00e-9cb6-48f8-8df8-c02bf8de0332/

ASP.net WebForm用Page.ResolveUrl("~") 在開發環境會取得

/網站資料夾名稱/

上線時(有DomainName)的話，則會出現 /

使用Page.ResolveUrl("~")就可以避掉一堆設定

2011.8.4 追記

ASP.NET 中得到网站绝对路径的几种方法

回首頁