老赵点滴


  先做人,再做技术人员,最后做程序员。
  我的理想:“让外国人看中国人写的技术书籍和文章”。Try as I might
posts - 290, comments - 10751, trackbacks - 146, articles - 6
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

ModalUpdateProgress控件

Posted on 2007-03-26 02:33 Jeffrey Zhao 阅读(5511) 评论(43)  编辑 收藏 所属分类: Ajax & Atlas相关Control ToolkitASP.NET AJAX

  在之前的一篇文章中,我谈了如何在页面中“轻量级地”实现了模态的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部分实现
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控件:

CSS定义
.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;
}
ModalUpdateProgress定义
<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

Feedback

#1楼    回复  引用    

2007-03-26 07:34 by topman [未注册用户]
居然放出localhost的地址来做浏览效果...太搞笑了吧

#2楼    回复  引用  查看    

2007-03-26 08:04 by JesseZhao      
@topman
他两点多发的文章,估计是有点迷糊了。可以体谅,嘿嘿

#3楼    回复  引用  查看    

2007-03-26 08:12 by 魏晋遗疯      
对老赵来说2点钟正是创作的高峰期,这次难道是别有深意?容我再三思之......

#4楼    回复  引用  查看    

2007-03-26 08:20 by 高海东      
没有办法看效果

#5楼    回复  引用  查看    

2007-03-26 08:41 by Dflying Chen      
效果截个图吧,呵呵

#6楼    回复  引用  查看    

2007-03-26 08:48 by aspnetx      
昨天睡前还见老赵在线,已经是很晚了都,果然是在酝酿一个大做啊,呵呵

#7楼    回复  引用    

2007-03-26 09:00 by .net开发资源精华收集 [未注册用户]
还没起床?:)

#8楼    回复  引用    

2007-03-26 09:57 by duhaha [未注册用户]
老赵的文章帮了俺大忙,学习


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

#9楼    回复  引用  查看    

2007-03-26 10:01 by 魏晋遗疯      
楼上就是发广告那位吧?今天不错收敛不少....呵呵。出来混迟早要还滴

#10楼    回复  引用  查看    

2007-03-26 10:55 by Clark Zheng      
收藏先,慢慢看

#11楼    回复  引用    

2007-03-26 11:34 by firefox [未注册用户]
好文章,学习中.

#12楼 [楼主]   回复  引用  查看    

2007-03-26 12:34 by Jeffrey Zhao      
我错了,居然给错了地址。
不过还好我没给正确的,我发现我刚申请的那个空间怎么访问不了了?
怒。

#13楼 [楼主]   回复  引用  查看    

2007-03-26 12:34 by Jeffrey Zhao      
@魏晋遗疯
我也不知道,赫赫。

#14楼 [楼主]   回复  引用  查看    

2007-03-26 12:34 by Jeffrey Zhao      
@Dflying Chen
截好了,赫赫,本想大家可以自己访问看一下的,赫赫。

#15楼 [楼主]   回复  引用  查看    

2007-03-26 19:36 by Jeffrey Zhao      
链接修改完毕

#16楼    回复  引用  查看    

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

#17楼 [楼主]   回复  引用  查看    

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

#18楼    回复  引用    

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

#19楼    回复  引用  查看    

2007-04-26 15:56 by xwghf      
extenderReferences = (new ModalPopupExtender() as IExtenderControl).GetScriptReferences();

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

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

#20楼 [楼主]   回复  引用  查看    

2007-04-26 16:59 by Jeffrey Zhao      
@xwghf
事实看这样:把它先添加到页面中,再获取ScriptReferences,再把它从页面中移除。

#21楼    回复  引用  查看    

2007-04-27 14:23 by xwghf      
to:Jeffrey Zhao

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

donet2005@sina.com Thanks!

#22楼    回复  引用    

2007-04-27 17:45 by 脚印 [未注册用户]
<xhtmlConformance mode="Legacy"/> 如果在web.config 里面有这个属性的话就会出问题,今天将老赵的这个下载下来编译了一下,生成的dll用到我的项目里面了,效果不错。

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

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

#23楼    回复  引用    

2007-04-27 18:05 by 脚印 [未注册用户]
由于自己的javascript不行,老赵讲的updatepanle第二讲基本没听懂:(

#24楼 [楼主]   回复  引用  查看    

2007-04-28 00:53 by Jeffrey Zhao      
@脚印
先了解JavaScript再回头看。:)

#25楼    回复  引用    

2007-06-06 20:43 by Psoft [未注册用户]
能不能实现在提示窗口中提示完成的步骤呢?
比如
....Done
....Done

#26楼 [楼主]   回复  引用  查看    

2007-06-07 03:16 by Jeffrey Zhao      
@Psoft
除非拆成多个请求,否则做不到唉。

#27楼    回复  引用    

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

#28楼    回复  引用    

2007-11-17 11:06 by 黑色幽默 [未注册用户]
呵呵,很好用,我用到了项目里去了,就用户申请提交而已,页面小所以应该没有什么影响!

#29楼    回复  引用  查看    

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

#30楼    回复  引用  查看    

2007-11-27 18:35 by Ceiba      
必须要引用那个旧版本的AjaxControlToolkit.dll吗?

#31楼 [楼主]   回复  引用  查看    

2007-11-27 22:23 by Jeffrey Zhao      
@Ceiba
很有可能

#32楼    回复  引用    

2008-01-27 20:28 by greatsft-ken [未注册用户]
你好,你这东西不错,我是菜鸟,请问具体如何使用您这个控件?好像脚本挺多的。

#33楼 [楼主]   回复  引用  查看    

2008-01-27 21:07 by Jeffrey Zhao      
@greatsft-ken
我提供了源代码下载啊

#34楼    回复  引用    

2008-01-28 00:42 by greatsft-ken [未注册用户]
下载了,能不能step by step 教下,关键不会用到项目中,而且js也不懂。

#35楼 [楼主]   回复  引用  查看    

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

#36楼    回复  引用    

2008-02-25 23:04 by shi [未注册用户]
赵老师,我想请问:在使用ajaxToolkit:ConfirmButtonExtender控件的过程中,如果他的targetcontrolid 是我之前repeater绑定的一个控件名,这时怎么办?

#37楼    回复  引用    

2008-02-25 23:20 by shi [未注册用户]
已经解决了,打扰了。

#38楼    回复  引用    

2008-03-11 16:48 by 叮当梦 [未注册用户]
@Ceiba
我也有这问题耶,可以教教我该怎么做吗?

#39楼    回复  引用    

2008-03-19 22:30 by seaer [未注册用户]
Thanks,
It's just the guds i want.

#40楼    回复  引用    

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

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

#41楼    回复  引用  查看    

2008-04-18 15:41 by 阿滨       
非常帅!好用的很哦

#42楼    回复  引用    

2008-07-24 11:56 by zhangxiaoqing [未注册用户]
extenderReferences = (new ModalPopupExtender() as IExtenderControl).GetScriptReferences();

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

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

#43楼    回复  引用    

2008-08-27 23:39 by Semin [未注册用户]
你好,请问一下,为什么我引用你的这个控件,没有效果,效果跟普通的UpdateProgress一样,没那个遮罩的?

标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2007-03-28 05:38 编辑过


相关链接: