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

來源:互聯網
上載者:User

如何封裝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類)。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.