telerik的RadButton实现等待效果

一、需要的属性

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

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方法