Ajax面板(简述与编程)

复制粘贴机QAQ

已于 2022-08-20 08:11:01 修改

阅读量80

点赞数

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

于 2022-08-19 17:09:13 首次发布

原文链接：https://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxpanel/client-side-programming/how-to/cancel-ajax--request

版权

Ajax面板专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.RadAjaxPanel 用法

面板外更新

在某些情况下，您可能希望通过从页面上的其他控件外部触发回调来更新RadAjaxPanel内的控件。不推荐使用以下方法，因为RadAjaxManager可以处理任何复杂的场景。您可以使用 asp:Panel 控件并通过RadAjaxManager的设置链接它们。同一个 Panel 可以同时设置为 AJAX 启动器和更新控件，这将导致类似于RadAjaxPanel的功能。

您需要调用$find(<%RadAjaxPanel1.ClientID%>).ajaxRequest()方法（将必要的信息作为参数传递给它），然后覆盖RaisePostBackEvent方法或处理 RadAjaxPanel AjaxRequest服务器端事件以应用更改。示例 1显示了一个示例实现，它改变了面板的背景颜色。

外部控件更新RadAjaxPanel：

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" OnAjaxRequest="RadAjaxPanel1_AjaxRequest">
</telerik:RadAjaxPanel>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
         function invokeAjaxRequest() {
            $find("<%= RadAjaxPanel1.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel1.UniqueID %>", "ChangeColor");
         }
    </script>
</telerik:RadCodeBlock>
<input type="button" value="Change color" onclick="invokeAjaxRequest();" />

protected void RadAjaxPanel1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
            switch (e.Argument)
            {
                case "ChangeColor":
                    RadAjaxPanel1.BackColor = System.Drawing.Color.Maroon;
                    break;
                default:
                    break;
            }
}

2.ajaxRequestWithTarget() 参考

您可以使用任何外部控件通过调用此客户端函数来强制RadAjaxPanel执行 AJAX 请求。使用此函数时，事件目标默认为RadAjaxPanel实例。

3.什么是AJAX

AJAX 背后的核心思想是使与服务器的通信异步，以便在后台传输和处理数据。因此，用户可以继续处理页面的其他部分而不会中断。在启用 AJAX 的应用程序中，仅在必要时更新相关的页面元素。相比之下，传统的同步（基于回发）通信需要在每次将数据传输到服务器或从服务器传输数据时重新加载整个页面。

4.RadAjax面板

一般特征

Enable AJAX：选中此项时，RadAjaxPanel 中的所有控件请求都通过 AJAX 处理。如果未选中，则以传统回发方式处理请求。
启用 AJAX 历史记录：选中后，即使使用 AJAX 也会启用浏览器历史记录。浏览器的前进和后退按钮在标准回发网站中按预期工作。
启用页面<head>元素更新：如果选中此选项，则<Head>可以在 AJAX 更新期间修改页面元素。
选择 LoadingPanelID ：从下拉列表中选择一个LoadingPanel实例以在 AJAX 更新期间显示。

5.活动

RadAjaxManager/RadAjaxPanel 的客户端事件，RadAjaxManager和RadAjaxPanel都来自RadAjaxControl。RadAjaxControl引入了包含以下事件的AjaxClientEvents属性：

         类型描述
OnRequestStart   当启动对服务器的请求时触发。
OnResponseEnd   在处理来自服务器的响应时触发。

            <script type="text/javascript">
                //请求开始
                function requestStart(sender, eventArgs) {
                    alert('Request start');
                }
                //请求结束
                function responseEnd(sender, eventArgs) {
                    alert('Response complete');
                }
            </script>
<%-- Ajax面板包括一个启动请求，一个处理响应 --%>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnRequestStart="requestStart" ClientEvents-OnResponseEnd="responseEnd" >
    <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Click me!"></telerik:RadButton>
</telerik:RadAjaxPanel>

1）OnRequestStart

OnRequestStart客户端事件处理程序在启动对服务器的请求时调用。该事件最初可以由RadAjaxManager设置中配置的启动控件、 RadAjaxPanel中的控件或客户端ajaxRequest()调用触发。活动可以取消。

使用以下方法将两个参数传递给事件处理程序：

sender - 客户端RadAjaxManager / RadAjaxPanel对象的实例。
eventArgs，它有以下方法：
set_cancel() - 允许或阻止 AJAX 请求继续。调用set_cancel(true)会阻止请求继续。
get_eventTarget() - 获取提出请求的元素的UniqueID 。
get_eventArgument() - 获取初始 AJAX 请求中传递的字符串。
get_eventTargetElement() - 获取引发 AJAX 请求的客户端对象的实例。您可以迭代每个设置并检索初始控件 ID 和另一个表示更新控件的对象数组。
get_enableAjax() , set_enableAjax() - 获取或设置是否执行 AJAX 请求。set_enableAjax(false)使请求通过标准回发来执行。

2）OnResponseEnd

当从服务器接收到请求时，将调用OnResponseEnd客户端事件处理程序。活动不能取消。

使用以下方法将两个参数传递给事件处理程序：

sender - 客户端RadAjaxManager / RadAjaxPanel对象的实例。
eventArgs，它有以下方法：
get_eventTarget() - 获取提出请求的元素的UniqueID 。
get_eventArgument() - 获取初始 AJAX 请求中传递的字符串。
get_eventTargetElement() - 获取引发 AJAX 请求的客户端对象的实例。

6.如何做

1）取消ajax请求

可以在 RadAjaxManager/RadAjaxPanel 的OnRequestStart客户端事件处理程序中取消 AJAX 请求。调用set_cancel(true)可防止请求继续。

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type='text/javascript'>
                function OnRequestStart(ajaxPanel, eventArgs) {
                    var eventTarget = eventArgs.get_eventTarget();
                    if (eventTarget == "<%= Button1.UniqueID %>") {
                        if (!CheckZipCode()) {
                            //取消ajax请求
                            eventArgs.set_enableAjax(false); // cancel the ajax request
                        }
                    }
                }

                function CheckZipCode() {
                    var zipCode = $get('<%= TextBox1.ClientID %>').value;
                    if (zipCode.length != 5) {
                        alert('Please enter a valid 5 digit postal code!');
                        return false;
                    }
                    else {
                        var fiveDigitCheckRE = /^\d{5}$/ //regular expression for checking a 5 digit number
                        if (zipCode.search(fiveDigitCheckRE) == -1) {
                            alert("Only digits are allowed!");
                            return false;
                        }
                    }
                    return true;
                }
     </script>
</telerik:RadCodeBlock>

2）客户端确认和 AJAX

向用户提供一个确认对话框，并在接受时启动 AJAX 请求。使用标准回发的确认通常如下所示：

//注意OnClientClick
<asp:ImageButton ID="ImageButton1" runat="server" OnClientClick="return confirm('Are you sure?');" />

当通过向RadAjaxManager添加必要的 AJAX 设置或将按钮放置在RadAjaxPanel控件中时，应稍微更改OnClientClick以使用 AJAX。

//注意OnClientClick
<asp:ImageButton ID="ImageButton2" runat="server" OnClientClick="if (!confirm('Are you sure?')) return false;" />

<telerik:RadButton RenderMode="Lightweight" runat="server" Text="Click me!" OnClientClicked="requestStart2"></telerik:RadButton>

            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">
                    function requestStart2() {
                        alert(1111);
                    }
                </script>
            </telerik:RadCodeBlock>
            <%-- 按钮事件两种方式注意OnClientClick --%>
            <asp:ImageButton ID="ImageButton1" runat="server"  OnClientClick="return confirm('Are you sure?');"  AlternateText="123"/>
            <asp:ImageButton ID="ImageButton2" runat="server" OnClientClick="if (!confirm('Are you sure?')) return false;" AlternateText="456"/>
            <%-- 按钮事件客户端代码，注意OnClientClicked，触发一个客户端功能 --%>
            <telerik:RadButton runat="server" OnClientClicked="requestStart2" AutoPostBack="false" Text="789"></telerik:RadButton>
            <%-- 一个弹窗事件，弹出窗口 --%>
            <telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server" EnableShadow="true">
            </telerik:RadWindowManager>
            <%-- 两个按钮，使用服务器端编程实现，点击出现弹窗 --%>
            <asp:Button runat="server" OnClick="Unnamed_Click" Text="不错"/>
            <telerik:RadButton runat="server" OnClick="Unnamed_Click" Text="可以"></telerik:RadButton>

protected void Unnamed_Click(object sender, EventArgs e)
        {
            //弹出窗口
            RadWindowManager1.RadAlert("RadAlert is called from the server", 330, 180, "Server RadAlert", null, null);
        }

7.为不同的控件分配不同的客户端事件

可以使用 RadAjaxManager 的客户端事件来确定 AJAX 请求的目标控件，DropDownList和Button将具有不同的客户端事件。

        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
            <%-- 一个Ajax面板，包含一个按钮，一个下拉框 --%>
            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" ClientEvents-OnRequestStart="Start" ClientEvents-OnResponseEnd="End">
                <%-- 按钮，在客户端写处理事件 --%>
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                    <%-- 下拉框，在客户端写处理事件 --%>
                    <asp:ListItem>111</asp:ListItem>
                    <asp:ListItem>222</asp:ListItem>
                </asp:DropDownList>
            </telerik:RadAjaxPanel>
        </div>

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                //写按钮点击显示功能和下拉列表显示功能
                function Start(sender, arguments) {
                    if (arguments.EventTarget == "<%= Button1.UniqueID %>") {
                        alert("StartButton");
                    }
                    if (arguments.EventTarget == "<%= DropDownList1.UniqueID %>") {
                        alert("StartDropdown");
                    }
                }
                //结束按钮点击显示功能和选择完下拉列表显示功能
                function End(sender, arguments) {
                    if (arguments.EventTarget == "<%= Button1.UniqueID %>") {
                        alert("EndButton");
                    } if (arguments.EventTarget == "<%= DropDownList1.UniqueID %>") {
                        alert("EndDropdown");
                    }
                }
            </script>
        </telerik:RadCodeBlock>

8.在 AJAX 更新上更改鼠标光标

使用 Telerik RadAjax 控件的客户端事件来更改 Ajax 更新时的鼠标光标。最简单的方法是使用以下事件脚本：

<script type="text/javascript">
            function OnRequestStart(sender, args) {
                document.body.style.cursor = "wait";
            }
            function OnResponseEnd(sender, args) {
                document.body.style.cursor = "default";
            }
</script>

使用附加 CSS 类的另一个解决方案：

<script type="text/javascript">
            function RequestStart(sender, args) {
                document.body.className = document.body.className.replace("Normal", "Wait");
            }
            function ResponseEnd(sender, args) {
                document.body.className = document.body.className.replace("Wait", "Normal");
</script>

//.css
<style type="text/css">
            .Wait
            {
            }
            .Normal
            {
            }
            /* override input cursors with a more specific CSS selector */.Wait INPUT
            {
                cursor: wait;
            }
            .Normal INPUT
            {
                cursor: default;
            }
            /* override grid cursors with a more specific CSS selector */.Wait TABLE
            {
                cursor: wait;
            }
            .Normal TABLE
            {
                cursor: default;
            }
</style>