The Will Will Web | 如何將 JavaScript, CSS, Images 檔案內含在 .NET 組件裡

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何將 JavaScript, CSS, Images 檔案內含在 .NET 組件裡

通常內嵌在組件的資源可以透過 ASP.NET 內建的 WebResource.axd 這個 HTTP Handler 取得,所以你才會在查看 ASP.NET 頁面產生的原始碼的時候看到許多奇怪的網址,裡面就是包含這個 WebResource.axd,而這些透過 WebResource.axd 抓到的檔案就是 Handler 去讀取組件(*.dll)的資源抓回來的內容,可能是任何型態的檔案,比較常見的有: JavaScript、各種圖檔或 css 檔案。

這種內嵌式的資源檔最大的好處就是簡化網頁設計的複雜度,如果我們要設計一個 WebControl 用在頁面上,而部屬(Deploy)這個 WebControl 的時候又需要用到一些外部的檔案(例如: 圖檔),如果不包含在組件理的話,就要在使用這個 WebControl 的時候 "記得" 將圖檔複製到目錄中,如果 "忘記" 的話就會破圖了!

如果你要將這些資源檔內嵌在你的 WebControl 專案中的話,有以下的步驟:

1. 先將需要內嵌的檔案全部加入到你的專案中。

2. 修改 AssemblyInfo.cs 檔案,手動將這些內嵌的資源檔定義到組件資訊去

[code:c#]
[assembly: System.Web.UI.WebResource("Doggy.UI.WebControls.MyControl.MyScript.js", "text/js")];
[assembly: System.Web.UI.WebResource("Doggy.UI.WebControls.MyControl.imgButton.gif", "img/gif")];
[assembly: System.Web.UI.WebResource("Doggy.UI.WebControls.MyControl.TextBox1.css", "text/css")];
[/code]

備註: 所有的檔名都要用以下這種格式表示才行!但是在專案裡的檔名不用改成這樣!

        DefaultNamespace.Filename.Extension

3. 在你的 *.cs 檔中使用這些內嵌的資源檔

[code:c#]
// 內嵌 JavaScript
string strJsLoc =Page.ClientScript.GetWebResourceUrl(this.GetType(), "Doggy.UI.WebControls.MyControl.MyScript.js");
Page.ClientScript.RegisterClientScriptInclude("Doggy.UI.WebControls.MyControl.MyScript.js", strJsLoc);

// 內嵌影像檔
Image img = new Image();
img.ImageUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "Doggy.UI.WebControls.MyControl.imgButton.gif");

// 內嵌 CSS 檔 ( 記得頁面中的 <head> 標籤要加上 runat="server" 才行!
string link_template = "<link rel='stylesheet' text='text/css' href='{0}' />";
string link_location = Page.ClientScript.GetWebResourceUrl(this.GetType(), "Doggy.UI.WebControls.MyControl.TextBox1.css");
LiteralControl ltlLink = new LiteralControl(String.Format(link_template, link_location));
((HtmlControls.HtmlHead) Page.Header).Controls.Add(ltlLink);
[/code]

如果看不懂的話,也沒關係,這裡有更清楚的文章說明: