如何封装JS和CSS文件为服务器端控件---ASP.NET2.0资源-CSDN文库

共28个文件

cs：5个

dll：5个

scc：4个

5星 · 超过95%的资源需积分: 13 87 浏览量 2007-07-29 19:24:30 上传评论 2 收藏 262KB RAR 举报

如何封装JS和CSS文件为服务器端控件---ASP.NET 2.0 我们以封装一个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类）。好了，基本上就可以使用了。编译一下呢？

资源推荐

资源详情

资源评论

收起资源包目录

Calendar.rar （28个子文件）

Calendar

web.sln 3KB

datalist

bin

Debug

Wisesoft.Web.Control.pdb 18KB

Wisesoft.Calendar

Microsoft.Practices.EnterpriseLibrary.Common.dll 92KB

Microsoft.Practices.EnterpriseLibrary.Data.dll 68KB

vssver2.scc 142B

Microsoft.Practices.ObjectBuilder.dll 60KB

Wisesoft.Web.Control.dll 176KB

WiseSoft.TextBox

WiseSoft.ChineseBox

WiseSoft.SixNumBox

WiseSoft.PhoneNumBox

WiseSoft.EmailBox

WiseSoft.NumAndChaBox

WiseSoft.NumberBox

WiseSoft.IDCardBox

Wisesoft.Calendar

CalendarBox.ico 62KB

vssver2.scc 236B

CalendarBox.cs 3KB

Thumbs.db 8KB

CalendarCSS.cs 458B

calendar.js 28KB

Wisesoft.Web.Control.csproj.vspscc 285B

Wisesoft.Web.Control.csproj.user 168B

obj

Wisesoft.Web.Control.csproj 3KB

mssccprj.scc 383B

Properties

Resources.resx 6KB

vssver2.scc 208B

AssemblyInfo.cs 1KB

Resources.Designer.cs 3KB

Web

Default.aspx 824B

imagin

date.gif 342B

App_Code

App_Data

Bin

Wisesoft.Web.Control.pdb 18KB

Wisesoft.Web.Control.dll.refresh 94B

Wisesoft.Web.Control.dll 176KB

Web.Config 2KB

Default.aspx.cs 420B

// 主调用函数是 setday(this,[object])和setday(this)，[object]是控件输出的控件名，举两个例子： // 一、<input name=txt><input type=button value=setday onclick="setday(this,document.all.txt)"> // 二、<input onfocus="setday(this)"> var bMoveable=true; var strFrame; document.writeln('<iframe id=endDateLayer frameborder=0 width=162 height=211 style="position: absolute; z-index: 9998; display: none"></iframe>'); strFrame='<style>'; strFrame+='INPUT.button{BORDER-RIGHT: #63A3E9 1px solid;BORDER-TOP: #63A3E9 1px solid;BORDER-LEFT: #63A3E9 1px solid;'; strFrame+='BORDER-BOTTOM: #63A3E9 1px solid;BACKGROUND-COLOR: #63A3E9;font-family:宋体;}'; strFrame+='TD{FONT-SIZE: 9pt;font-family:宋体;}'; strFrame+='</style>'; strFrame+='<scr' + 'ipt>'; strFrame+='var datelayerx,datelayery;'; strFrame+='var bDrag;'; strFrame+='function document.onmousemove()'; strFrame+='{if(bDrag && window.event.button==1)'; strFrame+=' {var DateLayer=parent.document.all.endDateLayer.style;'; strFrame+=' DateLayer.posLeft += window.event.clientX-datelayerx;'; strFrame+=' DateLayer.posTop += window.event.clientY-datelayery;}}'; strFrame+='function DragStart()'; strFrame+='{var DateLayer=parent.document.all.endDateLayer.style;'; strFrame+=' datelayerx=window.event.clientX;'; strFrame+=' datelayery=window.event.clientY;'; strFrame+=' bDrag=true;}'; strFrame+='function DragEnd(){'; strFrame+=' bDrag=false;}'; strFrame+='</scr' + 'ipt>'; strFrame+='<div style="z-index:9999;position: absolute; left:0; top:0;" onselectstart="return false">'; strFrame+='<span id=tmpSelectYearLayer style="z-index: 9999;position: absolute;top: 3; left: 19;display: none"></span>'; strFrame+='<span id=tmpSelectMonthLayer style="z-index: 9999;position: absolute;top: 3; left: 78;display: none"></span>'; strFrame+='<span id=tmpSelectHourLayer style="z-index: 9999;position: absolute;top: 188; left: 35px;display: none"></span>'; strFrame+='<span id=tmpSelectMinuteLayer style="z-index:9999;position:absolute;top: 188; left: 77px;display: none"></span>'; strFrame+='<span id=tmpSelectSecondLayer style="z-index:9999;position:absolute;top: 188; left: 119px;display: none"></span>'; strFrame+='<table border=1 cellspacing=0 cellpadding=0 width=142 height=160 bordercolor=#63A3E9 bgcolor=#63A3E9 >'; strFrame+=' <tr><td width=142 height=23 bgcolor=#FFFFFF>'; strFrame+=' <table border=0 cellspacing=1 cellpadding=0 width=158 height=23>'; strFrame+=' <tr align=center >'; strFrame+=' <td width=16 align=center bgcolor=#63A3E9 style="font-size:12px;cursor: hand;color: #ffffff" '; strFrame+=' onclick="parent.meizzPrevM()" title="向前翻 1 月" ><b ><</b></td>'; strFrame+=' <td width=60 align="center" bgcolor="#63A3E9" style="font-size:12px;cursor:hand" '; strFrame+=' onmouseover="style.backgroundColor=\'#aaccf3\'"'; strFrame+=' onmouseout="style.backgroundColor=\'#63A3E9\'" '; strFrame+=' onclick="parent.tmpSelectYearInnerHTML(this.innerText.substring(0,4))" '; strFrame+=' title="点击这里选择年份"><span id=meizzYearHead></span></td>'; strFrame+=' <td width=48 align="center" style="font-size:12px;font-color: #ffffff;cursor:hand" '; strFrame+=' bgcolor="#63A3E9" onmouseover="style.backgroundColor=\'#aaccf3\'" '; strFrame+=' onmouseout="style.backgroundColor=\'#63A3E9\'" '; strFrame+=' onclick="parent.tmpSelectMonthInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"'; strFrame+=' title="点击这里选择月份"><span id=meizzMonthHead ></span></td>'; strFrame+=' <td width=16 bgcolor=#63A3E9 align=center style="font-size:12px;cursor: hand;color: #ffffff" '; strFrame+=' onclick="parent.meizzNextM()" title="向后翻 1 月" ><b >></b></td>'; strFrame+=' </tr>'; strFrame+=' </table></td></tr>'; strFrame+=' <tr><td width=142 height=18 >'; strFrame+=' <table border=0 cellspacing=0 cellpadding=2 bgcolor=#63A3E9 ' + (bMoveable? 'onmousedown="DragStart()" onmouseup="DragEnd()"':''); strFrame+=' BORDERCOLORLIGHT=#63A3E9 BORDERCOLORDARK=#FFFFFF width=140 height=20 style="cursor:' + (bMoveable ? 'move':'default') + '">'; strFrame+=' <tr><td style="font-size:12px;color:#ffffff" width=20> 日</td>'; strFrame+='<td style="font-size:12px;color:#FFFFFF" > 一</td><td style="font-size:12px;color:#FFFFFF"> 二</td>'; strFrame+='<td style="font-size:12px;color:#FFFFFF" > 三</td><td style="font-size:12px;color:#FFFFFF" > 四</td>'; strFrame+='<td style="font-size:12px;color:#FFFFFF" > 五</td><td style="font-size:12px;color:#FFFFFF" > 六</td></tr>'; strFrame+='</table></td></tr>'; strFrame+=' <tr ><td width=142 height=120 >'; strFrame+=' <table border=1 cellspacing=2 cellpadding=2 BORDERCOLORLIGHT=#63A3E9 BORDERCOLORDARK=#FFFFFF bgcolor=#fff8ec width=140 height=120 >'; var n=0; for (j=0;j<5;j++){ strFrame+= ' <tr align=center >'; for (i=0;i<7;i++){ strFrame+='<td width=20 height=20 id=meizzDay'+n+' style="font-size:12px" onclick=parent.meizzDayClick(this.innerText,0)></td>';n++;} strFrame+='</tr>';} strFrame+=' <tr align=center >'; for (i=35;i<37;i++)strFrame+='<td width=20 height=20 id=meizzDay'+i+' style="font-size:12px" onclick="parent.meizzDayClick(this.innerText,0)"></td>'; strFrame+=' <td colspan=5 align=right style="color:#1478eb"><span onclick="parent.setNull()" style="font-size:12px;cursor: hand"'; strFrame+=' onmouseover="style.color=\'#ff0000\'" onmouseout="style.color=\'#1478eb\'" title="将日期置空">置空</span>  <span onclick="parent.meizzToday()" style="font-size:12px;cursor: hand"'; strFrame+=' onmouseover="style.color=\'#ff0000\'" onmouseout="style.color=\'#1478eb\'" title="当前日期时间">当前</span>  <span style="cursor:hand" id=evaAllOK onmouseover="style.color=\'#ff0000\'" onmouseout="style.color=\'#1478eb\'" onclick="parent.closeLayer()" title="关闭日历">关闭 </span></td></tr>'; strFrame+=' </table></td></tr><tr ><td >'; strFrame+=' <table border=0 cellspacing=1 cellpadding=0 width=100% bgcolor=#FFFFFF height=22 >'; strFrame+=' <tr bgcolor="#63A3E9"><td id=bUseTimeLayer width=30 style="cursor:hand" title="点击这里启用/禁用时间"'; strFrame+=' onmouseover="style.backgroundColor=\'#aaccf3\'" align=center onmouseout="style.backgroundColor=\'#63A3E9\'"'; strFrame+=' onclick="parent.UseTime(this)">'; strFrame+=' <span></span></td>'; strFrame+=' <td style="cursor:hand" onclick="parent.tmpSelectHourInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"'; strFrame+=' onmouseover="style.backgroundColor=\'#aaccf3\'" onmouseout="style.backgroundColor=\'#63A3E9\'"'; strFrame+=' title="点击这里选择时间" align=center width=42>' ; strFrame+=' <span id=meizzHourHead></span></td>'; strFrame+=' <td style="cursor:hand" onclick="parent.tmpSelectMinuteInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"'; strFrame+=' onmouseover="style.backgroundColor=\'#aaccf3\'" onmouseout="style.backgroundColor=\'#63A3E9\'"'; strFrame+=' title="点击这里选择时间" align=center width=42>' ; strFrame+=' <span id=meizzMinuteHead></span></td>'; strFrame+=' <td style="cursor:hand" onclick="parent.tmpSelectSecondInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"'; strFrame+=' onmouseover="style.backgroundColor=\'#aaccf3\'" onmouseout="style.backgroundColor=\'#63A3E9\'"'; strFrame+=' title="点击这里选择时间" align=center width=42>' ; strFrame+=' <span id=meizzSecondHead></span></td>'; strFrame+=' </tr></table></td></tr></table></div>'; window.frames.endDateLayer.document.writeln(strF

评论收藏

内容反馈