Ajax加载面板（怎么做）

复制粘贴机QAQ

已于 2022-08-16 11:19:48 修改

阅读量208

点赞数

分类专栏： Ajax加载面板文章标签： ajax javascript 前端

于 2022-08-15 18:00:49 首次发布

原文链接：https://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxloadingpanel/how-to/show-ajaxloadingpanel-on-initial-page-load

版权

Ajax加载面板专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.显式显示和隐藏 AjaxLoadingPanel

要在元素上显示加载面板，只需在客户端调用Show方法。这允许您有条件地在更新的控件上显示加载面板（在OnRequestStart中显示面板，并在调用Hide客户端方法的OnResponseEnd中隐藏它）。

<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="RadAjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
    </telerik:RadAjaxManager>

<%--页面，一个按钮，两个panel面板 panel：表示作为其他控件的容器的控件。--%>
<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" Height="200px">
    <%--一个标签，可自定义显示内容--%>
            <asp:Label ID="Label1" runat="server" />
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" Width="200px" Height="200px">
            Panel 2
</asp:Panel>

<%--用法一--%>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var currentLoadingPanel = null;
        var currentUpdatedControl = null;

        function ResponseEnd() {
            ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
            /*隐藏加载面板而不知道更新的控件*/
            if (currentLoadingPanel != null)
                ajaxManager.hideLoadingPanels();
        }
    </script>
</telerik:RadCodeBlock>

<%--用法二--%>
<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 %>";
            }
            //在更新的控件上显示加载面板，转圈界面显示
            currentLoadingPanel.show(currentUpdatedControl);
        }
        function ResponseEnd() {
            //隐藏加载面板并清理全局变量，转圈界面消失
            if (currentLoadingPanel != null)
                currentLoadingPanel.hide(currentUpdatedControl);
            currentUpdatedControl = null;
            currentLoadingPanel = null;
        }
    </script>
</telerik:RadCodeBlock>

2.在初始页面加载时显示 AjaxLoadingPanel

这个例子展示了如何使用pageLoad函数，它从客户端发起一个AJAX 请求。为了更实用，此示例包括一个 asp: Panel 的更新。因此，您需要一个AjaxSetting，其中RadAjaxManager通过显示最初不可见的内部面板来“更新”面板。示例 1中的 JavaScript显示了如何仅在初始页面加载时执行 ajaxRequest，示例 2中的标记显示页面上的 ajax 配置。示例 3中的代码显示了如何在初始加载时显示面板两秒钟。

//.net
<%--页面 示例2--%>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<%-- 一个Panel容器 --%>
<asp:Panel ID="Panel1" runat="server">
    <asp:Panel ID="Panel2" Visible="false" runat="server">
                My content:
    </asp:Panel>
</asp:Panel>
<%-- 页面加载的效果 --%>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
Width="75px" Transparency="50">
<img alt="Loading..." src="~/loading.gif" style="border: 0;" />
</telerik:RadAjaxLoadingPanel>

<%-- 代码块，初始界面加载请求 示例1--%>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function pageLoad(sender, eventArgs) {
            if (!eventArgs.get_isPartialLoad()) {
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad");
            }
        }      
    </script>
</telerik:RadCodeBlock>

//c#
protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
        {
            if (e.Argument == "InitialPageLoad")
            {
                //页面加载时间2秒     
                System.Threading.Thread.Sleep(2000);
                //显示Panel2
                Panel2.Visible = true;
            }
        }

3.在 AJAX Initiator 旁边显示加载面板

使用粘性加载面板（将 RadAjaxLoadingPanel IsSticky属性设置为 true）并使用事件参数的EventTargetElement属性在OnRequestStart客户端事件上设置加载面板位置。

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <%-- 一个客户端事件，请求 --%>
    <ClientEvents OnRequestStart="RequestStart"></ClientEvents>
    <%-- 一些Ajax控制设置，按钮，选择框，标签 --%>
    <AjaxSettings>
         <telerik:AjaxSetting AjaxControlID="Button1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Label1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="Button2">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Label1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="CheckBox1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Label1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<%-- RadAjaxLoadingPanel配置 --%>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="1000"
    Skin="" IsSticky="true">
    <asp:Image ID="Image1" runat="server" ImageUrl="~/loading.gif" AlternateText="Loading.." />
</telerik:RadAjaxLoadingPanel>
<%-- 一个按钮 --%>
<asp:Button ID="Button1" runat="server" Text="Button" Width="100px" />

<%--z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 
    一个标签，放置Lable，z-index:103;与position: absolute;配合使用
    一个复选框，另外一个按钮--%>     
<asp:Label ID="Label1" runat="server" Text="Label" Style="z-index: 103; left: 137px;
            position: absolute; top: 255px"></asp:Label>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" Text="check box" />
<asp:Button ID="Button2" runat="server" Text="Button2" Width="100px" />
<%-- 前端代码块，写RequestStart功能 --%>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function RequestStart(sender, eventArgs) {
            //将加载样式设置到按钮和选择框上
            var divElementStyle = $find("<%= RadAjaxLoadingPanel1.ClientID %>").get_element().style;
            divElementStyle.position = 'absolute';
            //定位装载面板
            divElementStyle.left = eventArgs.get_eventTargetElement().offsetLeft + eventArgs.get_eventTargetElement().offsetWidth + "px";
            divElementStyle.top = eventArgs.get_eventTargetElement().offsetTop + "px";
        }
    </script>
</telerik:RadCodeBlock>

4.在屏幕上居中加载面板

下面的代码使加载面板在屏幕上居中。注意绝对定位的使用以及 RadAjaxLoadingPanel 控件的 Sticky 模式。

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
<%-- 发出请求 --%>
<ClientEvents OnRequestStart="centerLoadingPanel"></ClientEvents>
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Button1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<%-- 加载样式 --%>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" IsSticky="true" MinDisplayTime="2000">
    <img src="loading.gif" alt="loading.." />
</telerik:RadAjaxLoadingPanel>
<%-- 一个按钮以及一个Panel面板 --%>
<asp:Button ID="Button1" runat="server" Text="AJAX" OnClick="Button1_Click" />
<asp:Panel ID="Panel1" runat="server" Style="width: 800px; height: 400px; border: 1px solid red">
    asp:Panel
    <asp:Label  ID="Label1" runat="server">
         
    </asp:Label>
</asp:Panel>
<%-- 功能实现代码块，样式居中 --%>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function centerLoadingPanel() {
            centerElementOnScreen($get("<%= RadAjaxLoadingPanel1.ClientID %>"));
        }
        function centerElementOnScreen(element) {
            var scrollTop = document.body.scrollTop;
            var scrollLeft = document.body.scrollLeft;
            var viewPortHeight = document.body.clientHeight;
            var viewPortWidth = document.body.clientWidth;
            if (document.compatMode == "CSS1Compat") {
                viewPortHeight = document.documentElement.clientHeight;
                viewPortWidth = document.documentElement.clientWidth;
                if (!$telerik.isSafari) {
                    scrollTop = document.documentElement.scrollTop;
                    scrollLeft = document.documentElement.scrollLeft;
                }
            }
            var topOffset = Math.ceil(viewPortHeight / 2 - element.offsetHeight / 2);
            var leftOffset = Math.ceil(viewPortWidth / 2 - element.offsetWidth / 2);
            var top = scrollTop + topOffset - 40;
            var left = scrollLeft + leftOffset - 70;
            element.style.position = "absolute";
            element.style.top = top + "px";
            element.style.left = left + "px";
        }
    </script>
</telerik:RadCodeBlock>

当为 RadAjaxLoadingPanel 设置了 Skin 时，您可以将其置于页面中心，如下所示。

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista"
IsSticky="true" Style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;">
</telerik:RadAjaxLoadingPanel>