我们以封装一个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类）
好了基本上就可以使用了编译一下呢？
下载 >源码下载
