代码改变世界

telerik的RadButton实现等待效果

2013-04-17 09:21  y-z-f  阅读(2712)  评论(1)  编辑  收藏  举报

一、需要的属性

  这个功能的重点在于两个属性:

  1. SingleClick
  2. SingleClickText

 

二、基于提交的等待

  下面我们将要首先实现的是提交页面时让RadButton等待。

  首先页面代码如下:

 

 1         <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
 2             <Scripts>
 3                 <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
 4                 </asp:ScriptReference>
 5                 <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
 6                 </asp:ScriptReference>
 7                 <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
 8                 </asp:ScriptReference>
 9             </Scripts>
10         </telerik:RadScriptManager>
11         <div>
12             <telerik:RadButton ID="RadButton1" runat="server" Text="Submit" SingleClick="True" SingleClickText="Submiting..." OnClick="RadButton1_Click">
13             </telerik:RadButton>
14         </div>


服务端的代码如下:

这里我们响应了RadButton按钮的提交事件

1         protected void RadButton1_Click(object sender, EventArgs e)
2         {
3             //Label1.Text = "ok";
4             if (IsPostBack)
5                 System.Threading.Thread.Sleep(3000);
6         }


当我们提交后 RadButton 变成如下的效果:

但是在经过三秒之后 RadButton 按钮就恢复的原状。

 

三、基于AJAX的等待效果

     如今很多页面都是AJAX的效果，所以我们这里当然也不能落后，下面就开始制作AJAX效果的等待效果。

     只需要在页面添加如下的代码:

    

 1         <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" RequestQueueSize="1" >
 2             <AjaxSettings>
 3                 <telerik:AjaxSetting AjaxControlID="RadButton1" EventName="Click" >
 4                     <UpdatedControls>
 5                         <telerik:AjaxUpdatedControl ControlID="Label1" UpdatePanelRenderMode="Block" />
 6                         <telerik:AjaxUpdatedControl ControlID="RadButton1" />
 7                     </UpdatedControls>
 8                 </telerik:AjaxSetting>
 9             </AjaxSettings>
10         </telerik:RadAjaxManager>

   
   很多的实际情况都是点击按钮后更新一块区域，所以这里为了能够模拟出那种环境，我们在页面中添加一个Label控件（ID需要与上面代码中的 ControlID="Label1" 中的一致）。

  现在我们在点击下按钮，会发现浏览器的后退和前进按钮都无法使用，这就表示我们的AJAX成功了。

 这里需要注意的是当我们点击Button后 ajax回传的时候我们不仅更新了Label1而且还更新了Button如果我们将Button去掉，大家一定会发现点击之后只有Label的文字改变了，但是Button却没有变为可用状态。

 

四、如何让等待更美观

  相信大家使用过很多的软件，在让用户等待的时刻，按钮中的前端都会有一个状态指示效果（一般就是一个GIF图片），我们也就实现这个效果，首先我们先给大家一个图片素材免的去找。

 

 其次还需要一个样式代码:

 

1     <style type="text/css">
2         .btnDisable .rbPrimaryIcon {
3             background: url(img/loading2.gif) !important;
4         }
5     </style>

接着我们修改RadButton的代码

1 <telerik:RadButton ID="RadButton1" runat="server" DisabledButtonCssClass="btnDisable" Text="Submit" SingleClick="True" SingleClickText="Submiting..." OnClick="RadButton1_Click" Skin="Metro">
2            <Icon PrimaryIconCssClass="rbDownload"></Icon>
3 </telerik:RadButton>

最后的效果图如下:

 

五、结尾

   后面将会讲述很多关于在客户端控制RadButton的JS方法