Hello World
Spiga

ModalUpdateProgress控件

2007-03-26 02:33 by 老赵, 7285 visits

在之前的一篇文章中,我谈了如何在页面中“轻量级地”实现了模态的UpdateProgress。这次,我带来了一个“重量级”的实现:ModalUpdateProgress控件。

开发这样一个控件并不难,需要做的只是分析UpdateProgress在服务器端和客户端的实现方式,并且了解ScriptControl的编写方式即可。我写的ModalUpdateProgress控件继承了ASP.NET AJAX中的UpdateProgress控件,重写的客户端Jeffz.Web.ModalUpdateProgress类也基础了客户端的Sys.UI._UpdateProgress类。

在这里,有技巧的实现不多,感兴趣的朋友们看了代码应该能够完全了解ModalUpdateProgress的实现方式。不过其中的某一点可能使用了一个小技巧。由于使用了AjaxControlToolkit中的ModalPopupBehavior,客户端Jeffz.Web.ModalUpdateProgress类也需要放出一些与ModalPopupBehvaior对应的属性。不过在这里,我是这样写的:

Jeffz.Web.ModalUpdateProgress = function(element)
{
    Jeffz.Web.ModalUpdateProgress.initializeBase(this, [element]);
    
    var fakeElement = document.createElement("div");
    this._modalPopupBehavior = new AjaxControlToolkit.ModalPopupBehavior(fakeElement);
    this._modalPopupBehavior.set_PopupControlID(this.get_element().id);
}
Jeffz.Web.ModalUpdateProgress.prototype = 
{
    initialize : function()
    {
        Jeffz.Web.ModalUpdateProgress.callBaseMethod(this, 'initialize');
        
        this._modalPopupBehavior.initialize();
    },
    
    get_backgroundCssClass : function()
    {
        return this._modalPopupBehavior.get_BackgroundCssClass();
    },
    set_backgroundCssClass : function(value)
    {
        this._modalPopupBehavior.set_BackgroundCssClass(value);
    },

    ...
}

 

我在这里没有使用传统的编写属性的方式,并不是将属性的值保存在“私有变量”中。在这里,我直接将这些属性的操作委托给了ModalPopupBehavior对象,这样做同时也保证了ModalUpdateProgress的属性与ModalPopupBehavior中属性的同步。这么做会有什么问题吗?不会的,因为使用$create来构造一个对象时,它调用目标对象成员顺序是:

  1. 构造函数
  2. 设置属性
  3. initialize方法

我们的控件完全能够符合这样的调用顺序。

现在,我们只需要像使用UpdatePanel控件般使用ModalUpdatePanel就能得到模态的动画了。例如,我们可以如下使用ModalUpdatePanel控件:

.modalBackground
{
	background-color : gray;
	filter : alpha(opacity=70);
	opacity : 0.7;
}
#updateAnimation
{
	color : Black;
	background-color : #ffffae;
	font-family : Arial;
	font-size : 8pt;
	font-weight : bold;
	line-height : 30px;
	height : 30px;
	padding-left : 5px;
	padding-right : 5px;
}
<jeffz:ModalUpdateProgess ID="ModalUpdateProgess1" runat="server"
    BackgroundCssClass="modalBackground" DropShadow="true">
    <ProgressTemplate>
        <div id="updateAnimation">
            <img src="animated_loading.gif" alt="Loading" />
            Working on your request...
        </div>
    </ProgressTemplate>
</jeffz:ModalUpdateProgess>

 

在上面的例子中我们使用了额外的BackgroundCssClass和DropShadow属性,为模态背景制定了CSS类,并且为动画元素添加了阴影。其他诸于X、Y、Drag等ModalPopupExtender的属性几乎一应俱全,使用起来非常方便。

这个控件与“轻量级”的ModalUpdateProgress实现相比,有什么缺点呢?最大的缺点就是需要下载太多的脚本文件,孰优孰劣,可能就需要您自己判断了……

 

点击这里下载源代码(您需要自行修改它的AjaxControlTookit.dll的引用位置)。

点击这里浏览使用效果。

使用效果:

ModalUpdateProgress

Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

45 条回复

  1. topman[未注册用户]
    *.*.*.*
    链接

    topman[未注册用户] 2007-03-26 07:34:00

    居然放出localhost的地址来做浏览效果...太搞笑了吧

  2. JesseZhao
    *.*.*.*
    链接

    JesseZhao 2007-03-26 08:04:00

    @topman
    他两点多发的文章,估计是有点迷糊了。可以体谅,嘿嘿

  3. 魏晋遗疯
    *.*.*.*
    链接

    魏晋遗疯 2007-03-26 08:12:00

    对老赵来说2点钟正是创作的高峰期,这次难道是别有深意?容我再三思之......

  4. 高海东
    *.*.*.*
    链接

    高海东 2007-03-26 08:20:00

    没有办法看效果

  5. Dflying Chen
    *.*.*.*
    链接

    Dflying Chen 2007-03-26 08:41:00

    效果截个图吧,呵呵

  6. aspnetx
    *.*.*.*
    链接

    aspnetx 2007-03-26 08:48:00

    昨天睡前还见老赵在线,已经是很晚了都,果然是在酝酿一个大做啊,呵呵

  7. .net开发资源精华收集[未注册用户]
    *.*.*.*
    链接

    .net开发资源精华收集[未注册用户] 2007-03-26 09:00:00

    还没起床?:)

  8. duhaha[未注册用户]
    *.*.*.*
    链接

    duhaha[未注册用户] 2007-03-26 09:57:00

    老赵的文章帮了俺大忙,学习


    ====
    让你创意极限
    http://***

  9. 魏晋遗疯
    *.*.*.*
    链接

    魏晋遗疯 2007-03-26 10:01:00

    楼上就是发广告那位吧?今天不错收敛不少....呵呵。出来混迟早要还滴

  10. Clark Zheng
    *.*.*.*
    链接

    Clark Zheng 2007-03-26 10:55:00

    收藏先,慢慢看

  11. firefox[未注册用户]
    *.*.*.*
    链接

    firefox[未注册用户] 2007-03-26 11:34:00

    好文章,学习中.

  12. 老赵
    admin
    链接

    老赵 2007-03-26 12:34:00

    @Dflying Chen
    截好了,赫赫,本想大家可以自己访问看一下的,赫赫。

  13. 老赵
    admin
    链接

    老赵 2007-03-26 12:34:00

    我错了,居然给错了地址。
    不过还好我没给正确的,我发现我刚申请的那个空间怎么访问不了了?
    怒。

  14. 老赵
    admin
    链接

    老赵 2007-03-26 12:34:00

    @魏晋遗疯
    我也不知道,赫赫。

  15. 老赵
    admin
    链接

    老赵 2007-03-26 19:36:00

    链接修改完毕

  16. Clark Zheng
    *.*.*.*
    链接

    Clark Zheng 2007-03-26 20:31:00

    @Jeffrey Zhao
    空间真不错,在哪申请的?收费吗?完整支持.NET2.0吗?可以使用什么数据库?
    呵呵,好象问题多了点

  17. 老赵
    admin
    链接

    老赵 2007-03-26 20:33:00

    @Clark Zheng
    www.ebiz8.com申请的,支持2.0和ASP.NET AJAX。
    100M空间一年198元,域名55元一年。我没有买数据库,它支持sql server 2000和2005。

  18. David[未注册用户]
    *.*.*.*
    链接

    David[未注册用户] 2007-04-11 18:42:00

    下载不了....
    我想要个进度条,提交一个长时操作的时候,比如群发email,在每发一封后就在前台页面一个容器中写出此项成功还是失败。这个要如何实现,感觉象是要将长时任务提交给一个WebService,在页面中引入一个Timer去读执行的状态来模拟进度和写过程log.有没有更好的方法?总觉得这样去刷数据库很耗服务器资源

  19. xwghf
    *.*.*.*
    链接

    xwghf 2007-04-26 15:56:00

    extenderReferences = (new ModalPopupExtender() as IExtenderControl).GetScriptReferences();

    这段代码调试出错,错误信息是:
    值不能为空。
    参数名: page

    请赵哥帮忙解决一下喽!!!

  20. 老赵
    admin
    链接

    老赵 2007-04-26 16:59:00

    @xwghf
    事实看这样:把它先添加到页面中,再获取ScriptReferences,再把它从页面中移除。

  21. xwghf
    *.*.*.*
    链接

    xwghf 2007-04-27 14:23:00

    to:Jeffrey Zhao

    你不理解你的意思啊...可不可以告诉我该如何做啊...可以将源程序发到我的邮箱里去啊~

    donet2005@sina.com Thanks!

  22. 脚印[未注册用户]
    *.*.*.*
    链接

    脚印[未注册用户] 2007-04-27 17:45:00

    <xhtmlConformance mode="Legacy"/> 如果在web.config 里面有这个属性的话就会出问题,今天将老赵的这个下载下来编译了一下,生成的dll用到我的项目里面了,效果不错。

    不过<xhtmlConformance mode="Legacy"/> 这个问题我一点一点的从我的web.config里面排除出来的

    由于直接的javascript不行,老赵讲的updatepanle第二讲基本没听懂:(

  23. 脚印[未注册用户]
    *.*.*.*
    链接

    脚印[未注册用户] 2007-04-27 18:05:00

    由于自己的javascript不行,老赵讲的updatepanle第二讲基本没听懂:(

  24. 老赵
    admin
    链接

    老赵 2007-04-28 00:53:00

    @脚印
    先了解JavaScript再回头看。:)

  25. Psoft[未注册用户]
    *.*.*.*
    链接

    Psoft[未注册用户] 2007-06-06 20:43:00

    能不能实现在提示窗口中提示完成的步骤呢?
    比如
    ....Done
    ....Done

  26. 老赵
    admin
    链接

    老赵 2007-06-07 03:16:00

    @Psoft
    除非拆成多个请求,否则做不到唉。

  27. 千里马[未注册用户]
    *.*.*.*
    链接

    千里马[未注册用户] 2007-08-16 11:37:00

    不错

  28. 黑色幽默[未注册用户]
    *.*.*.*
    链接

    黑色幽默[未注册用户] 2007-11-17 11:06:00

    呵呵,很好用,我用到了项目里去了,就用户申请提交而已,页面小所以应该没有什么影响!

  29. Ceiba
    *.*.*.*
    链接

    Ceiba 2007-11-27 18:35:00

    必须要引用那个旧版本的AjaxControlToolkit.dll吗?

  30. Ceiba
    *.*.*.*
    链接

    Ceiba 2007-11-27 18:35:00

    您好:
    我在项目里引用了您的这个控件,然后引用最新的AjaxControlToolkit.dll,为什么这个控件就不能用了,希望您在有空之余帮忙解决一下,谢谢!

  31. 老赵
    admin
    链接

    老赵 2007-11-27 22:23:00

    @Ceiba
    很有可能

  32. greatsft-ken[未注册用户]
    *.*.*.*
    链接

    greatsft-ken[未注册用户] 2008-01-27 20:28:00

    你好,你这东西不错,我是菜鸟,请问具体如何使用您这个控件?好像脚本挺多的。

  33. 老赵
    admin
    链接

    老赵 2008-01-27 21:07:00

    @greatsft-ken
    我提供了源代码下载啊

  34. greatsft-ken[未注册用户]
    *.*.*.*
    链接

    greatsft-ken[未注册用户] 2008-01-28 00:42:00

    下载了,能不能step by step 教下,关键不会用到项目中,而且js也不懂。

  35. 老赵
    admin
    链接

    老赵 2008-01-28 02:25:00

    @greatsft-ken
    如果是这样的话,我觉得最好还是先学习一下相关内容再使用一些组件。:)

  36. shi[未注册用户]
    *.*.*.*
    链接

    shi[未注册用户] 2008-02-25 23:04:00

    赵老师,我想请问:在使用ajaxToolkit:ConfirmButtonExtender控件的过程中,如果他的targetcontrolid 是我之前repeater绑定的一个控件名,这时怎么办?

  37. shi[未注册用户]
    *.*.*.*
    链接

    shi[未注册用户] 2008-02-25 23:20:00

    已经解决了,打扰了。

  38. 叮当梦[未注册用户]
    *.*.*.*
    链接

    叮当梦[未注册用户] 2008-03-11 16:48:00

    @Ceiba
    我也有这问题耶,可以教教我该怎么做吗?

  39. seaer[未注册用户]
    *.*.*.*
    链接

    seaer[未注册用户] 2008-03-19 22:30:00

    Thanks,
    It's just the guds i want.

  40. zkc[未注册用户]
    *.*.*.*
    链接

    zkc[未注册用户] 2008-04-11 18:27:00

    请问赵老师,我引用了您的这个代码.
    在IE7.0版本中可以正常使用,
    在IE6.0版本中就有脚本错误提示.
    但还是可以运行,只是进度条的长度和样式变乱了.
    在VS脚本调试中的出错提示为:
    在文件ScriptResource.axd文件中的一句:
    var screenRects = element.getClientRects()
    脚本错误.

    因为本人对js不熟悉,不知道赵老师能否抽空帮忙看看?
    万分感谢您提供的这个代码.

  41. 阿滨
    *.*.*.*
    链接

    阿滨 2008-04-18 15:41:00

    非常帅!好用的很哦

  42. zhangxiaoqing[未注册用户]
    *.*.*.*
    链接

    zhangxiaoqing[未注册用户] 2008-07-24 11:56:00

    extenderReferences = (new ModalPopupExtender() as IExtenderControl).GetScriptReferences();

    这段代码调试出错,错误信息是:
    值不能为空。
    参数名: page

    上面的回答没有看懂,如果原来的源代码中增加一个显示的页面就好了

  43. Semin[未注册用户]
    *.*.*.*
    链接

    Semin[未注册用户] 2008-08-27 23:39:00

    你好,请问一下,为什么我引用你的这个控件,没有效果,效果跟普通的UpdateProgress一样,没那个遮罩的?

  44. Vista@C#.Net
    183.16.205.*
    链接

    Vista@C#.Net 2010-10-02 12:57:36

    您好:

    我在VS08的项目里面引用了这个控件,然后引用3.5版的AjaxControlToolkit.dll,然后运行的时候就报错,

    this._modalPopupBehavior = new AjaxControlToolkit.ModalPopupBehavior(fakeElement);

    错误是:AjaxControlToolkit 未定义,

    希望能得到您的帮助,谢谢!

  45. dr.sniper
    180.124.5.*
    链接

    dr.sniper 2011-05-14 02:37:11

    同楼上问,这个AjaxControlToolkit未定义的错误如何解决?

    我下载了源码后,重新引入了AjaxControlToolkit -Framework4.0的,用的是VS2010。请赵姐夫指点迷津~

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我