如何封裝JS和CSS檔案為伺服器端控制項

如何封裝JS和CSS檔案為伺服器端控制項
我們以封裝一個JS的日期控制項為列子，將它和伺服器的TextBox結合在一起做成一個伺服器控制項，以達到直接托上去就可以使用的效果。其實很簡單，大家共同學習。先看看：

方法：
首先：下載一個JS的日期組件，帶封裝。
然後：建一個日期類檔案CalendarBox.cs代碼如下：
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Drawing;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

[assembly: WebResource("Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js", "application/x-javascript", PerformSubstitution=true)]

namespace Wisesoft.Web.Control
{
[ToolboxBitmap(typeof(CalenderBox), "Wisesoft.Calendar.CalendarBox.ico")]
public class CalenderBox : TextBox
{
protected override void OnPreRender(EventArgs e)
{
string calendar = CalenderCSS.CSS;
calendar = calendar.Replace("$ImaginURL$", this.ImaginURL);
if (!Page.ClientScript.IsClientScriptBlockRegistered("_calendar"))
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "_calendar", calendar);

this.Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete);
this.CssClass = "Wdate";
this.Attributes.Add("onfocus","setday(this)");
this.Attributes.Add("onchange", "checkDate(this.value)");
base.OnPreRender(e);
}

void Page_PreRenderComplete(object sender, EventArgs e)
{
Page.ClientScript.RegisterClientScriptResource(this.GetType(), "Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js");
}

/**//// 〈summary〉
/// 彈出日期控制項小圖片的地址
/// 〈/summary〉
[Bindable(true)]
[Category("表徵圖設定")]
[DefaultValue("imagin/calender.gif")]
[Localizable(true)]
public string ImaginURL
{
get
{
String s = (String)ViewState["ImaginURL"];
return ((s == null) ? "imagin/calender.gif" : s);
}
set
{
ViewState["ImaginURL"] = value;
}
}

/**//// 〈summary〉
/// 設定日期，時間的初始格式。
/// 〈/summary〉
[Bindable(true)]
[Category("初始化設定")]
[DefaultValue(false)]
[Localizable(true)]
public bool ShowTime
{
get
{
bool s = (bool)ViewState["ShowTime"];
if (ViewState["ShowTime"] != null)
{
return s;
}
return false;
}
set
{
ViewState["ShowTime"] = value;
}
}

/**//// 〈summary〉
/// 注樣式檔案
/// 〈/summary〉
/// 〈param name="path"〉〈/param〉
private void RegisterCssFile(string path)
{
HtmlLink link1 = new HtmlLink();
link1.Attributes["type"] = "text/css";
link1.Attributes["rel"] = "stylesheet";
link1.Attributes["href"] = path;
this.Page.Header.Controls.Add(link1);
}
}
}
注意：[assembly: WebResource("Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js", "application/x-javascript", PerformSubstitution=true)]是用來封裝你的JS檔案，要使用你項目的名字加上你JS檔案的名字，還需要將你的JS檔案做一點設定，點右件，選擇屬性---〉然後選擇進階，選擇產生操作--〉選擇內嵌資源，這樣才能將JS檔案封裝進去，當然如果有圖片或者是CSS檔案也是一樣的。
再看 void Page_PreRenderComplete(object sender, EventArgs e)
{
Page.ClientScript.RegisterClientScriptResource(this.GetType(), "Wisesoft.Web.Control.Wisesoft.Calendar.calendar.js");
}
是在頁面呈現之前將你的JS檔案註冊到頁面上。
[Bindable(true)]
[Category("表徵圖設定")]
[DefaultValue("imagin/calender.gif")]
[Localizable(true)]
是利用反射的中繼資料資訊，來設定屬性。就是給你的日期控制項旁邊加上個小表徵圖，把它做成一個屬性，可以讓程式員自訂設定圖片，也可以把它繼承進去。
好了，這樣就可以把JS檔案封裝好了，再來看看CSS檔案如何封裝並寫入用戶端。
我們可以看見下面有一個方法，

/**//// 〈summary〉
/// 注樣式檔案
/// 〈/summary〉
/// 〈param name="path"〉〈/param〉
private void RegisterCssFile(string path)
{
HtmlLink link1 = new HtmlLink();
link1.Attributes["type"] = "text/css";
link1.Attributes["rel"] = "stylesheet";
link1.Attributes["href"] = path;
this.Page.Header.Controls.Add(link1);
}它就是用來註冊你的CSS檔案的，大家都知道在我們的頁面代碼裡面是〈link href="StyleSheet.css" rel="stylesheet" type="text/css" /〉引入外部樣式檔案。這個方法就是達到這個目的。那麼我們現在還沒有樣式檔案。
因此我們就必須建立一個CSS，然後把它設定一下（和JS的設定方式一樣）。再到void Page_PreRenderComplete(object sender, EventArgs e)方法調用就可以了，但是還有其他方法，我們來介紹第二種（對JS檔案也可以這樣使用），建立一個CalendarCSS.cs檔案，代碼如下：
using System;
using System.Collections.Generic;
using System.Text;

namespace Wisesoft.Web.Control
{
public class CalenderCSS
{
public static string CSS = @"〈style type=""text/css""〉
.Wdate{
border:#999 1px solid;
height:18px;
background:url($ImaginURL$) no-repeat right;
}
.WdateFmtErr{
font-weight:bold;
color:red;
}
〈/style〉";
}
}這個類其實是將我們的CSS檔案，寫為一個字串形式，然後供主函數調用，以註冊到用戶端使用。
那麼我們再看看CalendarBox.cs檔案裡的這段代碼
string calendar = CalenderCSS.CSS;
calendar = calendar.Replace("$ImaginURL$", this.ImaginURL);
if (!Page.ClientScript.IsClientScriptBlockRegistered("_calendar"))
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "_calendar", calendar);
它就是將我們已經寫好的一段字串以快的形式註冊到用戶端（當然還有更多的註冊方式，可以在MSDN看看ClientScript類）。