ASP.NET自定义控件开发示例(一)
本文通过实现一个服务端控件来讲解一下控件开发,该控件的功能如下:
1.显示服务端时间,并不停更新
2.通过手动点击刷新按钮以AJAX获取服务端最新时间
3.能拖动
4.能记住在页面上的位置,页面回传后位置不变
5.能配置一个定时时间,一到这个时间,自动回传触发用户自定义的事件首先新建一个类库项目HampWebControl,再新建一个类叫TipTime1,继承WebControl类。如果不是从已有控件中继承,一般就继承WebControl类,
它是所有ASP.NET服务端控件的基类。我们编译这个项目,再新建一个网站项目,引用HampWebControl项目,新建页面,在工具箱中拖一个TipTime1控件到页面上。
我们运行该页面,就会发现HTML代码如下:
就是说默认是呈现成一个span标签,可以通过重载WebControl基类的TagKey属性来改变。
这样呈现在页面上就是个DIV。 HtmlTextWriterTag是个枚举,包含了很多HTML标签。
WebControl基类的Render用来呈现内容,重载它便可以往页面上呈现任何自定义的标签。
这样在页面上就显示了一个a标签,如下图所示:
注意看,这时a标签是在DIV外面,如何将它放到DIV里面呢?这就要重载WebControl基类的RenderContents方法
这样这个a标签就在div里面了,如下图所示:
接下来为最外围的DIV加一些样式,重载基类的AddAttributesToRender方法
这里有两种写法,利用HtmlTextWriterStyle枚举或者直接写CSS属性名。
到这里大家了解了自定义控件如何呈现在页面上。我们再新建一个类TipTime2,把依旧重载TagKey为DIV,然后重载RenderContents,
显示一个span标签与一个input标签。
这样页面上显示了当前服务端的时间与一个按钮,如图所示:
接下来我们来让用户可以配置按钮上的文字,为类TipTime2增加一个Text属性:同时将呈现按钮的代码改成:
这样Text属性便出现在设计视图的属性窗口。
修改Text的值,页面上按钮上的文本也跟着变了。注意Text属性是存储在ViewState中,这样保证了回发后值不会丢失。
现在的问题是时间不会变,我们得用javascript来改变它的值。新建一个JS文件TipTime2.js。
这里先要说明的是,项目中已有一个JS文件__WebControlBase.js,里面是一些公用的JS方法,比如绑定事件、获取控件坐标等,所有的方法都是
该方法的扩展方法:var HampWebControl=function(){ }//停止事件冒泡
HampWebControl.prototype.StopBubble = function(e) {
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}这样可以减少全局变量,尽可能避免与其它js代码的变量重名。我将每个控件作为HampWebControl方法的一个扩展方法存在,同时每个控件对
应一个数组,用以存储页面上所有该控件的js对象。每个控件对应一个Refresh方法,用以重新绑定事件,这是为了解决回传后的问题。
现在控件呈现成HTML的结构是<div><span/><input/></div>,有3个标签,我们需要用3个变量来分别存储它们的DOM对象,方便以后操作。后台对HTML标签命名时以当前控件的ClientID开头,后面根据需要加后缀,这样可以一定程度上防止标签重名。由后台将控件的ClientID传过来,
这样便可以获取所有DOM对象。拖动效果利用的是现成js方法,属于纯javascript效果,这里就不展开讨论了,有兴趣的童鞋可以查看示例项目源码。该方法是由后台注册脚本来调用的,如果在数组中已存在就取该对象,否则重新new一个。并调用初始化与绑定事件方法。
这时需要在后台注册该js文件才行。关键的操作时将该文件的“生成操作”属性设置为“嵌入的资源”,使得编译的时候该js文件会作为DLL文件的一部分。接下来需要声明所需的资源文件,严格按文件夹的结构来命名。这里注册了2个JS文件:公用JS文件__WebControlBase.js与控件专用的JS文件TipTime2.js。
然后在代码中注册脚本即可。
在《道不远人 深入解析ASP.NET2.0控件开发》这本书中,注册脚本文件的代码是放在OnPreRender方法中,但是实际应用中我发现,如果将自定义
控件放在UpdatePanel控件中,就会引发一些问题,所以我都放在OnLoad方法中去注册脚本文件。
注意注册脚本文件这里用了2种不同的方法。
第1种是循环Head标签里面是否存在了脚本,如果不存在,就插入一个<script>标签。
第2种直接调用.NET的注册方法。/// <summary>
/// 向页面注册公共jacascript文件
/// </summary>
/// <param name="control">控件对象</param>
internal static补充:Web开发 , ASP.Net ,
- 更多asp疑问解答:
- asp正则过滤重复字符串的代码
- 用asp过滤全部html但保留br类似的符号
- 会asp,但感觉asp要过点,想学php。但我一般做的都是小公司的站,用access数
- PHP的空间可以用ASP的源代码吗?
- 以前做asp程序,现在应该怎样发展?是学.net还是php
- 以前做asp程序,现在应该怎样发展?是学.net还是php
- 想做一个市级的人才网acess,sql数据库,语言asp,jsp,php分别用哪种好
- jsp,asp,php 区别
- 我想找一个有比较多漏洞的网站的源码,比如可以asp,php注入等都可以。供学习研究用。请提供下载地址。。
- 现在候找人做个网站,用ASP,还是PHP语言去做好
- asp,php ,jsp,.net 对于做网站前台的重要吗?
- asp和php的区别是什么?
- 我是新手SEO菜鸟 请问wp dw php asp cms myspl dede 这些软件应该如何区分呀?
- 网页制作相关的三种语言:ASP JSP PHP那个好点,简单点?
- 网页制作相关的三种语言:ASP JSP PHP那个好点,简单点?