telerik的RadButton实现等待效果 yz

一、需要的属性

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

1. SingleClick
2. SingleClickText

二、基于提交的等待

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

  首先页面代码如下:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">
                </asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
        <div>
            <telerik:RadButton ID="RadButton1" runat="server" Text="Submit" SingleClick="True" SingleClickText="Submiting..." OnClick="RadButton1_Click">
            </telerik:RadButton>
        </div>

服务端的代码如下:

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

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

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

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

三、基于AJAX的等待效果

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

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

    

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" RequestQueueSize="1" >
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadButton1" EventName="Click" >
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Label1" UpdatePanelRenderMode="Block" />
                        <telerik:AjaxUpdatedControl ControlID="RadButton1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

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

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

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

四、如何让等待更美观

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

 

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

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

接着我们修改RadButton的代码

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

最后的效果图如下:

 

五、结尾

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