请选择 进入手机版 | 继续访问电脑版

马上加入IBC程序猿 各种源码随意下,各种教程随便看! 注册 每日签到 加入编程讨论群

C#教程 ASP.NET教程 C#视频教程程序源码享受不尽 C#问题入口 ASP.NET问题入口

【C#问题提交】 社群合作 申请版主 程序开发 【远程协助】 每天乐一乐 每日签到 【承接毕业设计】 面试-葵花宝典下载

官方一群:

官方二群:

查看: 7890|回复: 4

ASP.NET自定义控件实例

  [复制链接]
  • TA的每日心情
    开心
    14 小时前
  • 签到天数: 1742 天

    [LV.Master]伴坛终老

    4251

    主题

    6183

    帖子

    11万

    积分

    管理员

    IBC编程社区-原道楠

    Rank: 9Rank: 9Rank: 9

    积分
    118707

    推广达人突出贡献优秀版主荣誉管理论坛元老

    发表于 2012-12-23 14:21:27 | 显示全部楼层 |阅读模式

    马上加入IBC,查看更多教程

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x

    本文通过实现一个服务端控件来讲解一下控件开发,该控件的功能如下:
    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(){ }


    [C#] 纯文本查看 复制代码
     //停止事件冒泡
        HampWebControl.prototype.StopBubble = function(e) {
            if (e && e.stopPropagation) {
                e.stopPropagation();
            } else {
                window.event.cancelBubble = true;
            }
        }


    这样可以减少全局变量,尽可能避免与其它js代码的变量重名。我将每个控件作为HampWebControl方法的一个扩展方法存在,同时每个控件对
    应一个数组,用以存储页面上所有该控件的js对象。每个控件对应一个Refresh方法,用以