Show/Hide RadAjaxLoadingPanel explicitly

最新推荐文章于 2024-06-04 10:25:07 发布

riverlau

最新推荐文章于 2024-06-04 10:25:07 发布

阅读量1.2k

点赞数

分类专栏： Telerik 文章标签： button server postback null variables function

Telerik 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用Telerik控件实现的Ajax加载面板显示和隐藏的方法。通过JavaScript代码和服务器控件结合，可以在页面局部更新时显示加载提示，并在更新完成后隐藏。此方案适用于需要改善用户体验的Web应用程序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.telerik.com/help/aspnet-ajax/ajax-show-hide-loadingpanel.html

JavaScript

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var currentLoadingPanel = null;
        var currentUpdatedControl = null;
        function RequestStart(sender, args) {
            currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");

            if (args.get_eventTarget() == "<%= Button1.UniqueID %>") {
                currentUpdatedControl = "<%= Panel1.ClientID %>";
            }
            else {
                currentUpdatedControl = "<%= Panel2.ClientID %>";
            }
            //show the loading panel over the updated control
            currentLoadingPanel.show(currentUpdatedControl);
        }
        function ResponseEnd() {
            //hide the loading panel and clean up the global variables
            if (currentLoadingPanel != null)
                currentLoadingPanel.hide(currentUpdatedControl);
            currentUpdatedControl = null;
            currentLoadingPanel = null;
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Button1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="LoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="LoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<asp:Button ID="Button1" runat="server" Text="Postback" OnClick="Button1_Click" />
<asp:Panel ID="Panel1" runat="server" Width="200px">
    Panel 1
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" Width="200px">
    Panel 2
</asp:Panel>

ASPX

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Button1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="LoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="LoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<asp:Button ID="Button1" runat="server" Text="Postback" OnClick="Button1_Click" />
<asp:Panel ID="Panel1" runat="server" Width="200px">
    Panel 1
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" Width="200px">
    Panel 2
</asp:Panel>