如何封裝JS和CSS文件為服務器端控件

　　我們以封裝一個JS的日期控件為列子將它和服務器的TextBox結合在一起做成一個服務器控件以達到直接托上去就可以使用的效果其實很簡單大家共同學習先看看效果圖
  

　　

　　方法
  首先下載一個JS的日期組件帶封裝
  然後建一個日期類文件CalendarBoxcs代碼如下

　　   using System;
  using SystemCollectionsGeneric;
  using SystemComponentModel;
  using SystemText;
  using SystemWeb;
  using SystemDrawing;
  using SystemWebUI;
  using SystemWebUIWebControls;
  using SystemWebUIHtmlControls;
  
  [assembly: WebResource(WisesoftWebControlWisesoftCalendarcalendarjs application/xjavascript PerformSubstitution=true)]
  
  namespace WisesoftWebControl
  {
   [ToolboxBitmap(typeof(CalenderBox) WisesoftCalendarCalendarBoxico)]
   public class CalenderBox : TextBox
   {
   protected override void OnPreRender(EventArgs e)
   {
   string calendar = CalenderCSSCSS;
   calendar = calendarReplace($ImaginURL$ thisImaginURL);
   if (!PageClientScriptIsClientScriptBlockRegistered(_calendar))
   PageClientScriptRegisterClientScriptBlock(typeof(string) _calendar calendar);
  
   thisPagePreRenderComplete += new EventHandler(Page_PreRenderComplete);
   thisCssClass = Wdate;
   thisAttributesAdd(onfocussetday(this));
   thisAttributesAdd(onchange checkDate(thisvalue));
   baseOnPreRender(e);
   }
  
   void Page_PreRenderComplete(object sender EventArgs e)
   {
   PageClientScriptRegisterClientScriptResource(thisGetType() WisesoftWebControlWisesoftCalendarcalendarjs);
   }
  
   /**//// <summary>
   /// 彈出日期控件小圖片的地址
   /// </summary>
   [Bindable(true)]
   [Category(圖標設置)]
   [DefaultValue(imagin/calendergif)]
   [Localizable(true)]
   public string ImaginURL
   {
   get
   {
   String s = (String)ViewState[ImaginURL];
   return ((s == null) ? imagin/calendergif : 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 link = new HtmlLink();
   linkAttributes[type] = text/css;
   linkAttributes[rel] = stylesheet;
   linkAttributes[href] = path;
   thisPageHeaderControlsAdd(link);
   }
   }
  } 

　　注意[assembly: WebResource(WisesoftWebControlWisesoftCalendarcalendarjs application/xjavascript PerformSubstitution=true)]是用來封裝你的JS文件要使用你項目的名字加上你JS文件的名字還需要將你的JS文件做一點設置點右件選擇屬性>然後選擇高級選擇生成操作>選擇嵌入的資源這樣才能將JS文件封裝進去當然如果有圖片或者是CSS文件也是一樣的
  再看

　　 void Page_PreRenderComplete(object sender EventArgs e)
   {
   PageClientScriptRegisterClientScriptResource(thisGetType() WisesoftWebControlWisesoftCalendarcalendarjs);
   }  

　　是在頁面呈現之前將你的JS文件注冊到頁面上
   [Bindable(true)]
   [Category(圖標設置)]
   [DefaultValue(imagin/calendergif)]
   [Localizable(true)]
  是利用反射的元數據信息來設置屬性就是給你的日期控件旁邊加上個小圖標把它做成一個屬性可以讓程序員自定義設置圖片也可以把它繼承進去
  好了這樣就可以把JS文件封裝好了再來看看CSS文件如何封裝並寫入客戶端
  我們可以看見下面有一個方法

　　    /**//// <summary>
   /// 注樣式文件
   /// </summary>
   /// <param name=path></param>
   private void RegisterCssFile(string path)
   {
   HtmlLink link = new HtmlLink();
   linkAttributes[type] = text/css;
   linkAttributes[rel] = stylesheet;
   linkAttributes[href] = path;
   thisPageHeaderControlsAdd(link);
   } 

　　它就是用來注冊你的CSS文件的大家都知道在我們的頁面代碼裡面是<link rel=stylesheet type=text/css />引入外部樣式文件這個方法就是達到這個目的那麼我們現在還沒有樣式文件
  因此我們就必須建立一個CSS然後把它設置一下（和JS的設置方式一樣）再到void Page_PreRenderComplete(object sender EventArgs e)方法調用就可以了但是還有其他方法我們來介紹第二種（對JS文件也可以這樣使用）建立一個CalendarCSScs文件代碼如下

　　   using System;
  using SystemCollectionsGeneric;
  using SystemText;
  
  namespace WisesoftWebControl
  {
   public class CalenderCSS
   {
   public static string CSS = @<style type=text/css>
   Wdate{
   border:# px solid;
   height:px;
   background:url($ImaginURL$) norepeat right;
   }
   WdateFmtErr{
   fontweight:bold;
   color:red;
   }
   </style>;
   }
  } 

　　這個類其實是將我們的CSS文件寫為一個字符串形式然後供主函數調用以注冊到客戶端使用
  那麼我們再看看CalendarBoxcs文件裡的這段代碼

　　   string calendar = CalenderCSSCSS;
   calendar = calendarReplace($ImaginURL$ thisImaginURL);
   if (!PageClientScriptIsClientScriptBlockRegistered(_calendar))
   PageClientScriptRegisterClientScriptBlock(typeof(string) _calendar calendar);  

  它就是將我們已經寫好的一段字符串以快的形式注冊到客戶端（當然還有更多的注冊方式可以在MSDN看看ClientScript類）
  好了基本上就可以使用了編譯一下呢？

　　下載 >源碼下載

From:http://tw.wingwit.com/Article/program/net/201311/13968.html