telerik学习记录-RadAjaxPanel

李知恩男友

已于 2022-08-27 13:58:53 修改

阅读量907

点赞数 1

分类专栏： telerik 文章标签：学习 ajax javascript

于 2022-08-19 16:20:00 首次发布

本文链接：https://blog.csdn.net/qq_43561770/article/details/126405512

版权

telerik 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Telerik的RadAjaxPanel组件的使用，包括如何启用Ajax，使用ajaxRequestWithTarget和ajaxRequest方法，调整控件属性，处理服务器端和客户端事件，以及在Ajax更新后执行自定义JavaScript代码等。此外，还涵盖了如何在多个RadAjaxPanel之间交互，处理回发和重定向，以及排除控件进行Ajaxifying。

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

RadAjaxPanel 用法

ajaxRequestWithTarget() 参考

ajaxRequest(arguments)

AjaxRequest事件

ajaxRequestWithTarget(eventTarget,eventArgument)

RadAjaxPanel对象

EVENT事件

RadAjaxManager/RadAjaxPanel的客户端事件

使用 RadScriptManager 的 RegisterPostBackControl 方法

通过 OnRequestStart 事件禁用 AJAX（RadAjaxPanel、RadAjaxManager）

在 InitializeRequest 事件上取消 AJAX 请求

手动添加回发功能

排除动态加载的控件

AJAX 更新后执行自定义 Javascript 代码

RadAjaxPanel 用法

如果要在页面上启用 Ajax 的 Web 控件，只需将RadAjaxPanel添加到页面，然后将要进行回调的控件拖到RadAjaxPanel中。这些控件将开始执行回调而不是回发。

当其中一个控件发出 AJAX 请求时，整个RadAjaxPanel（内部包含所有控件）都会更新。因此，如果将整个页面放入RadAjaxPanel中，这可能会导致性能降低，因为面板中的所有控件都将被更新，而不仅仅是 AJAX 启动器。将整个页面放入RadAjaxPanel在以下情况下可用页面上的控件数量相对较少。

ajaxRequestWithTarget() 参考

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

_DOPOSTBACK(EVENTTARGET,EVENTARGUMEN

或$FIND("<%=RADAJAXPANEL1.CLIENTID%>").AJAXREQUESTWITHTARGET(EVENTTARGET, EVENTARGUMENT)

eventTarget 应该引发回发事件的控件。应该使用控件的UniqueID。

eventArgument 事件的可选参数

ajaxRequest() 参考

$FIND("<%=RADAJAXPANEL1.CLIENTID%>").AJAXREQUEST(参数)

arguments 控件在提出请求时使用的参数。

当在客户端调用ajaxRequestWithTarget、ajaxRequest函数中的任何一个时，它可以在服务器上的 AjaxRequest 事件处理程序中进行处理。

常用的RadAjaxControl属性

EnableAJAX - 当EnableAJAX属性设置为true（默认值）时，所有请求（在RadAjaxPanel模板内或由RadAjaxManager管理的控件）都通过 AJAX 处理。如果此属性为false，则以传统回发方式处理请求。

EnableHistory - 当EnableHistory属性设置为true（默认为false）时，即使使用 AJAX 也会启用浏览器历史记录。浏览器的前进和后退按钮按预期工作（仅限 IE 浏览器）。

EnablePageHeadUpdate - 当您将EnablePageHeadUpdate属性设置为true（默认值）时，<Head>可以在 AJAX 更新期间修改 Page 元素。当控件初始化为不可见或根据 AJAX 请求动态加载控件时，会发现此功能特别有用。

IsAjaxRequest -当前请求通过 AJAX 时设置此属性为true ，如果请求是标准回发，则设置此属性为false 。

DefaultLoadingPanelID - 此属性允许指定在更新启用 AJAX 的控件时将显示的默认LoadingPanel

UpdatePanelsRenderMode - 此属性确定呈现 ajax 面板的方式。当选择Block选项时，面板将呈现为div元素，而如果选择Inline选项，它们将呈现为span元素。

UpdateInitiatorPanelsOnly - 通过将此属性设置为true（其默认值为false），只有为特定启动器添加为UpdatedControls的容器将有条件地更新。

ResponseScripts - 此字符串集合包含您希望在响应返回到浏览器时执行的 JavaScript。

方法

RadAjaxManager和RadAjaxPanel都是从RadAjaxControl 继承而来的，它引入了以下方法：

Alert()-此方法在客户端上执行 JavaScript alert()。Alert()为要在警报中显示的文本采用单个字符串参数。

FocusControl - 此方法将焦点放在指定的控件上。FocusControl()采用单个参数，该参数可以是要关注的控件的 ID，也可以是要关注的控件的对象引用。

GetAjaxEventReference - 此方法生成调用ajaxRequest()方法的客户端代码

RaisePostBackEvent - 此方法触发服务器端AjaxRequest事件并允许您将单个字符串参数传递给事件。

Redirect-此方法将浏览器导航到另一个网页。该方法传递一个字符串参数，即要导航到的 URL。

服务器端编程

OnAjaxRequest

AjaxRequest事件在由客户端ajaxRequest()函数或服务器端RaisePostBackEvent()方法触发时发生。活动不能取消。AjaxRequest事件处理程序接收单个字符串参数。

下面的示例演示了从客户端和服务器触发的 AjaxRequest。示例中定义了一个 HTML 输入按钮和一个标准 ASP.NET 按钮。HTML 输入按钮触发一个调用客户端ajaxRequest()的函数。ASP.NET 按钮触发服务器端 OnClick 事件，该事件又调用RaisePostBackEvent()方法。

<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" OnAjaxRequest="RadAjaxPanel_AjaxRequest">
</telerik:RadAjaxPanel>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function clientClick() {
            var ajaxManager = $find("<%= RadAjaxPanel1.ClientID %>");
            ajaxManager.ajaxRequest("client");
        }
    </script>
</telerik:RadCodeBlock>
<div>
    <asp:Button ID="btnServer" runat="server" Text="Make server AjaxRequest" OnClick="btnServer_Click" />
    <input id="btnClient" type="button" value="Make client AjaxRequest" onclick="clientClick();" />
</div>
</form>

protected void btnServer_Click(object sender, EventArgs e)
        {
            RadAjaxPanel1.RaisePostBackEvent("server");
        }
        protected void RadAjaxPanel1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
        {
            RadAjaxPanel1.Alert("AjaxRequest raised from the " + e.Argument);
        }

客户端编程

可以使用客户端API在Ajax请求时调用自己的JavaScript函数；也可以通过JavaScript函数从客户端想服务器端发出显示Ajax请求。

ajaxRequest(arguments)

在某些情况下，我们可能希望出发对服务器的回发/ajax请求。在这种情况下，我们可以使用ajaxRequest(arguments)函数来启动通用AJAX请求。使用该函数时，时间的目标默认为RadAjaxPanel或RadAjaxManager 实例。参数是控件在发出请求时使用的参数。

AjaxRequest事件

当在客户端调用ajaxRequest函数时，它可以在服务器上的Ajax Request事件处理程序中进行处理，如示例1。

实例1：在客户端实行ajax请求，在服务器端处理。

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">

                function InitiateAjaxRequest(arguments) {
                    var ajaxPanel = $find("<%= RadAjaxPanel1.ClientID %>");
                    ajaxPanel.ajaxRequest(arguments);
                }
            </script>
        </telerik:RadCodeBlock>

        private void RadAjaxPanel1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            //code to handle the generic AJAX request
        }

ajaxRequestWithTarget(eventTarget,eventArgument)

可以调用ajaxRequestWithTarget(eventTarget, eventArgument)函数来模拟由具有指定 UniqueID 和指定参数的另一个控件（ RadAjaxManager或RadAjaxPanel 除外）发送的回发/AJAX 请求。该函数的执行可以由服务器上的相应事件（即Button_Click）来处理。

eventTarget	应该引发回发事件的控件。您应该始终使用控件的 UniqueID..
eventArgument	这是事件的可选参数。

ajaxRequestWithTarget被设计为标准doPostBack 函数的替代品。因此，需要覆盖页面的 **RaisePostBackEvent 以便在服务器端获取其参数。

示例 2展示了如何使用 AjaxRequestWithTarget。

示例 3：AjaxButton 强制 Button 引发回发事件。

        <asp:ScriptManager ID="ScriptManager" runat="server" />     

        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <input type="button" onclick="AjaxRequestButton(); return false;" value="AjaxButton" />
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"></asp:Button>
            <asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox>  
        </telerik:RadAjaxPanel>

        <telerik:RadCodeBlock ID="cb1" runat="server">
            <script type="text/javascript">
                function AjaxRequestButton(arguments) {
                    var ajaxPanel = $find("<%= RadAjaxPanel1.ClientID %>");
                    ajaxPanel.ajaxRequestWithTarget('<%= Button1.UniqueID %>', '');
                }
            </script>
        </telerik:RadCodeBlock>

后端代码：

        protected void Button1_Click(object sender, System.EventArgs e)
        {
            TextBox1.Text = DateTime.Now.ToLongTimeString();
        }

RadAjaxPanel对象

下表列出了RadAjaxPanel客户端对象的重要方法：

NAME	PARAMETERS	RETURN TYPE	DESCRIPTION
get_ajaxSettings	none	array of objects	返回一个设置数组，其中每个对象都具有 InitControlID 和另一个 UpdatedControls 数组的属性。
get_defaultLoadingPanelID	none	string	返回 DefaultLoadingPanelID
get_enableAJAX	none	boolean	如果启用 AJAX，则为真。
get_enableHistory	none	boolean	如果在 AJAX 请求期间启用了浏览器历史记录，则为真
set_ajaxSettings	array of objects	none	设置表示 AjaxSettings 的对象数组
set_defaultLoadingPanelID	string	none	设置 DefaultLoadingPanelID
set_enableAJAX	boolean	none	允许或阻止请求通过 AJAX 执行。传递 True 以允许 AJAX，False 以通过标准回发完成请求
set_enableHistory	boolean	none	在 AJAX 请求期间允许浏览器历史记录。传递 True 以在 AJAX 请求期间允许浏览器历史记录

示例：

        <script type="text/javascript">
            var ajaxPanel = $find("<%= RadAjaxPanel1.ClientID %>");
            var settings = ajaxPanel.get_ajaxSettings();
            var settingsList = '';
            for (setting in settings) {
                var initiatingControl = settings[setting].InitControlID;
                var controls = settings[setting].UpdatedControls;
                var controlList = '';
                for (control in controls) {
                    controlList += ' ' + controls[control].ControlID;
                }
                settingsList += '\nInitiated by: ' + initiatingControl + '\nUpdated Controls: ' + controlList;
            }
            alert(settingsList);
        </script>

EVENT事件

RadAjaxManager/RadAjaxPanel的客户端事件

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

OnRequestStart	当启动对服务器的请求时触发
OnRequestEnd	在处理来自服务器的响应时触发

要使用这些事件，只需编写一个可在事件发生时调用的 JavaScript 函数（示例 1）。然后将 JavaScript 函数的名称指定为相应属性的值。

示例 1：在请求开始和结束时显示一条消息。

<script type="text/javascript">
    function requestStart(sender, eventArgs) {
        alert('Request start');
    }
    function responseEnd(sender, eventArgs) {
        alert('Response complete');
    }
</script>
<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>

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)使请求通过标准回发来执行。

下面的示例显示了发起请求的控件。

<script type="text/javascript">
    function requestStart(sender, eventArgs) {
        alert('Request start');
    }
</script>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnRequestStart="requestStart">
    <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Click me!"></telerik:RadButton>
</telerik:RadAjaxPanel>

OnResponseEnd

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

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

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

以下示例显示了发起请求的控件。

<script type="text/javascript">
    function responseEnd(sender, eventArgs) {
        alert('Response complete');
    }
</script>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnResponseEnd="responseEnd" >
    <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Click me!"></telerik:RadButton>
</telerik:RadAjaxPanel>

取消 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()) {
                            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>

客户端确认和AJAX

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

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

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

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

或者，我们可以使用OnRequestStart客户端事件来实现更复杂的逻辑。示例 1显示了一个示例脚本。

示例 1：使用 OnRequestStart 客户端事件显示确认消息。

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
            function OnRequestStart(ajaxControl, eventArgs) {
                var eventTarget = eventArgs.get_eventTarget(); 
                if (eventTarget == "<%= ImageButton1.UniqueID %>") {
                    return confirm('Are you sure?');
                }
                else {
                    return false;
                }
            }
</script>
</telerik:RadCodeBlock>

传递更多参数

默认情况下，ajaxRequest和ajaxRequestWithTarget函数只接受一个参数。有时可能需要传递更多参数。可以通过加入客户端上的参数来做到这一点：

var arg3 = arg1 + "," + arg2;
ajaxPanel.ajaxRequest(arg3);

并在RadAjaxPanel1_AjaxRequest的服务器上拆分它们：

private void RadAjaxPanel1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    string argument = (e.Argument);
    String[] stringArray = argument.Split(",".ToCharArray());
}

强制回发

如果我们想执行单个回发而不是 AJAX 请求，arguments.EnableAjax应该是false。

在代码隐藏中：

if (!RadAjaxPanel1.EnableAJAX)
    {
         RadAjaxPanel1.ClientEvents.OnRequestStart = "OnRequestStart";
    }

在客户端：

function OnRequestStart(sender, args) {
    args.set_enableAjax(false); 
}

仅当要执行单个回发时，此方法才有用。如果因为浏览器不支持或支持的旧版本而想要禁用 AJAX，应执行此操作：


RadAjaxPanel1.EnableAJAX = Page.Request.Browser.SupportsXmlHttp;

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

为了将不同的客户端事件分配给不同的启用 AJAX 的控件，可以使用示例 1中所示的方法。

示例 1：可以使用 RadAjaxManager 的客户端事件来确定 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>

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

这样DropDownList和Button将具有不同的客户端事件，尽管它们使用相同的RadAjaxManager或RadAjaxPanel。

在AJAX更新上更改鼠标光标

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

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

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

RadAjaxPanel之间的交互

此处一个代码示例，展示了如何在不使用RadAjaxManager的情况下在两个RadAjaxPanel控件之间进行交互。 Telerik 建议使用RadAjaxManager，尽管可能，但不支持本文中讨论的技术。

Telerik 将RadAjaxPanel控件设计为仅更新其内容控件，因此 Telerik Support 始终建议在需要更新外部控件时使用RadAjaxManager 。

但是，可以在不使用RadAjaxManager的情况下实现面板之间的交互。下面的示例演示了一种使用ResponseScripts属性以及客户端 ajaxRequest()函数的技术。请注意Page_PreRender事件的使用以及 ViewState 中持久化的属性。

下面的示例演示如何处理来自一个RadAjaxPanel的 AJAX 请求，以及如何从我们要更新的RadAjaxPanel发起 AJAX 请求。

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<h3>Panel1</h3>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<asp:Button ID="btnIncrease" OnClick="btnIncrease_Click" Text="Increase" runat="server">
</asp:Button>
<asp:Label ID="Label1" runat="server">0</asp:Label>
<asp:TextBox ID="TextBox1" Text="0" runat="server"></asp:TextBox>
</telerik:RadAjaxPanel>
<h3>Panel2</h3>
<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">
<asp:Button ID="btnDecrease" OnClick="btnDecrease_Click" Text="Decrease" runat="server">
</asp:Button>
<asp:Label ID="Label2" runat="server">0</asp:Label>
<asp:TextBox ID="TextBox2" Text="0" runat="server"></asp:TextBox>
</telerik:RadAjaxPanel>

protected void Page_PreRender(object sender, EventArgs e)
{
            if (RadAjaxPanel1.IsAjaxRequest || RadAjaxPanel2.IsAjaxRequest)
            {
                TextBox1.Text = Label1.Text = TextBox2.Text = Label2.Text = Count.ToString();
            }
}
public int Count
{
            get
            {
                return this.ViewState["Count"] == null ? 0 : (int)this.ViewState["Count"];
            }
            set
            {
                this.ViewState["Count"] = value;
            }
}
protected void btnIncrease_Click(object sender, System.EventArgs e)
{
            Count++;
            RadAjaxPanel1.ResponseScripts.Add(String.Format("$find('{0}').ajaxRequest();", RadAjaxPanel2.ClientID));
}
protected void btnDecrease_Click(object sender, System.EventArgs e)
{
            Count--;
            RadAjaxPanel2.ResponseScripts.Add(String.Format("$find('{0}').ajaxRequest();", RadAjaxPanel1.ClientID));
}

重定向到另外一个页面

从服务器重定向到新页面有两种基本类型：

Response.Redirect() - 标准的 ASP.NET 重定向方法。
生成设置window.location.href的 JavaScript 。

如果 Response.Redirect() 不起作用（例如，如果在部分渲染期间调用），可以通过 RadAjaxManager 和 RadAjaxPanel 公开的 RadAjaxControl.Redirect() 服务器方法使用脚本生成方法。

此 Telerik 方法注册 JavaScript 代码，该代码使用window.location.href属性导航到新 URL，同时为您提供使用简单服务器方法的便利。

示例 1：使用RadAjaxManager Redirect()


RadAjaxManager1.Redirect("http://www.google.com/");
//or
RadAjaxManager.GetCurrent(Page).Redirect("http://www.google.com/");

示例 1：使用RadAjaxPanel Redirect()


RadAjaxPanel1.Redirect("http://www.google.com/");

在AJAX之后滚动到顶部

示例1演示了在 AJAX 面板中启用 AJAX 的控件更新后如何将页面滚动到顶部。

默认情况下，RadAjaxPanel在响应结束时保持 AJAX 化控件的焦点。例如，如果在 AJAX 面板控件中嵌入了页面底部的按钮，则更新完成后该按钮仍将获得焦点。如果此按钮位于较长页面的底部附近，您可能需要在 AJAX 更新结束后将页面滚动到顶部（可能会放置更新的控件）。您可以使用示例 1中的 JavaScript 函数来执行此操作。

示例 1：此 JavaScript 函数将强制页面滚动到顶部

<script type="text/javascript">
    function scrollTop() {
        window.document.body.scrollTop = 0;
        window.document.documentElement.scrollTop = 0;
    }
</script>

必须将示例 1中的函数添加到RadAjaxPanel控件的ResponseScripts集合中，以便在 AJAX 调用之后执行它。

示例 2：将 scrollTop() 添加到 ResposeScripts 集合。

private void Page_Load(object sender, System.EventArgs e)
{
    RadAjaxPanel1.ResponseScripts.Add("scrollTop();");
}

private void cmd1_Click(object sender, System.EventArgs e)
{
    lbl1.Text = System.DateTime.Now.ToString;
    //set no active element
    RadAjaxPanel1.ActiveElementID = null;
}

RadAjaxManager控件在异步请求后不会保持对活动控件的关注。如果需要聚焦特定控件，可以使用RadAjaxManager FocusControl方法。

加载用户控件

用户控件的动态加载遵循与普通回发应用程序相同的逻辑。可以按照以下步骤通过 AJAX 请求加载 customUserControls：

首先需要有一个合适的容器来存放它，例如 asp:Panel。
在Page_Init或Page_Load中实例化用户控件，并始终重新创建最后加载的用户控件：

UserControl MyControl = (UserControl)LoadControl(controlName);
LoadMyUserControl(CurrentControl, Panel1);

3.确保为动态加载的用户控件分配一个唯一的ID

string userControlID = controlName.Split('.')[0];
MyControl.ID = userControlID.Replace("/", "").Replace("~", "");

4.将实例放在容器的空间集合里

Parent.Controls.Add(MyControl)

示例：以下示例演示了如何在简单的场景中实现上述步骤。

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<asp:Button ID="Button1" runat="server" Text="Load WebUserControl1.ascx" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Load WebUserControl2.ascx" OnClick="Button2_Click" />
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Button1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="Button2">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

后端代码：

protected void Page_Load(object sender, EventArgs e)
{
    if (this.CurrentControl != string.Empty)
    {
        LoadMyUserControl(CurrentControl, Panel1);
    }
}
protected void Button1_Click(object sender, EventArgs e)
{
    this.LoadMyUserControl("~/WebUserControl1.ascx", Panel1);
}
protected void Button2_Click(object sender, EventArgs e)
{
    this.LoadMyUserControl("~/WebUserControl2.ascx", Panel1);
}

private string CurrentControl
{
    get
    {
        return this.ViewState["CurrentControl"] == null ? string.Empty : (string)this.ViewState["CurrentControl"];
    }
    set
    {
        this.ViewState["CurrentControl"] = value;
    }
}

private void LoadMyUserControl(string controlName, Control parent)
{
    parent.Controls.Clear();
    UserControl MyControl = (UserControl)LoadControl(controlName);
    string userControlID = controlName.Split('.')[0];
    MyControl.ID = userControlID.Replace("/", "").Replace("~", "");
    parent.Controls.Add(MyControl);
    this.CurrentControl = controlName;
}

加载用户控件的在线演示

从Ajaxifying中排除控件

默认情况下，RadAjaxPanel AJAX 启用所有放置在里面的控件。如果要排除某个控件启用 AJAX，可以使用以下方法之一：

使用RadScriptManager的RegisterPostBackControl方法
通过OnRequestStart事件禁用AJAX(RadAjaxPanel、RadAjaxManager)
在 InitializeRequest 事件上取消 AJAX 请求
手动添加回发功能
排除动态加载的控件

使用 RadScriptManager 的 RegisterPostBackControl 方法

可以使用RadScriptManager 的 RegisterPostBackControl方法（示例 1）。

 <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
 </telerik:RadScriptManager>
 <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
     <asp:Button runat="server" ID="Button1" Text="Ajax" OnClick="Button_Click" />
     <asp:Button runat="server" ID="Button2" Text="Postback" OnClick="Button_Click" />
     <asp:Label ID="Label1" runat="server"></asp:Label>
 </telerik:RadAjaxPanel>


protected void Page_Load(object sender, EventArgs e)
    {
         RadScriptManager1.RegisterPostBackControl(Button2);
    }
protected void Button_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToLongTimeString();
    }

当页面使用RadAjaxManager启用 AJAX 时，此方法不适用。

通过 OnRequestStart 事件禁用 AJAX（RadAjaxPanel、RadAjaxManager）

使用OnRequestStart客户端事件处理程序来确定 AJAX 发起程序并为当前请求禁用 AJAX。每个请求都会触发该事件，因此在下一个请求时，将执行相同的检查。从启用 AJAX 的网格导出时，经常使用类似的实现：

在启用 AJAX 的情况下将 RadGrid 内容导出到 Excel/Word/CSV/PDF

请注意，在RadAjaxManager AJAX 设置的UpdatedControls集合中添加的所有控件都将执行回调而不是回发。要从 ajaxifying 中排除它们，请使用上述方法。

在 InitializeRequest 事件上取消 AJAX 请求

这种方式适用于在广泛的场景中取消 AJAX 请求（示例 2））。与OnRequestStart事件不同，InitializeRequest将为 Telerik（RadAjaxManager、RadAjaxPanel）和 ASP.NET（UpdatePanel）AJAX 控件触发。

示例 2：您可以使用 PageRequestManager 的实例添加自定义逻辑

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(initRequest);
    function initRequest(sender, args)
    {
        if (args.get_postBackElement().id.indexOf("CONTROL_ID") != -1)
        {
            args.set_cancel(true);  //stop async request
            sender._form["**EVENTTARGET"].value = args.get_postBackElement().id.replace(/\_/g, "$");
            sender._form["**EVENTARGUMENT"].value = "";
            sender._form.submit();
            return;
        }
    }
</script>

请注意，您必须将 CONTROL_ID 字符串替换为触发 AJAX 请求的控件的实际名称。

手动添加回发功能

在 aspx/ascx 文件中实现realPostBack函数1。
将自定义OnClick属性添加到控件（在本例中为按钮）（示例 3））。

示例 3：ASPX

<telerik:RadCodeBlock ID="codeblock1" runat="server">
<script type="text/javascript">
    function realPostBack(eventTarget, eventArgument)
    {
        find("<%= RadAjaxPanel1.ClientID %>").__doPostBack(eventTarget, eventArgument);
    }
</script>
</telerik:RadCodeBlock>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
    <asp:LinkButton ID="LinkButton1" runat="server" Text="PostBack"></asp:LinkButton>
    <asp:LinkButton ID="LinkButton2" runat="server" Text="Ajax"></asp:LinkButton>
</telerik:RadAjaxPanel>

在后端代码（Page_Load事件处理程序）中：

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
                LinkButton1.Attributes.Add("onclick", string.Format("realPostBack(\"{0}\", \"\"); return false;", LinkButton1.UniqueID));
        }
    }

如果没有在页面上注册__doPostBack函数的控件，还应该在Page_Load中添加以下行：


this.Page.ClientScript.GetPostBackEventReference(this, "");

当想要单个控件为您的场景执行回发或想要从RadAjaxPanel中的控件上传文件时，这将派上用场。

排除动态加载的控件

如果正在动态加载用户控件，则示例 3中的Page_Load事件处理程序中的代码 if(!Page.IsPostBack) 永远不会执行。可以检查附加的OnClick事件而不是IsPostBack，如示例 4所示。


protected void Page_Load(object sender, EventArgs e)
    {
        bool isOnClickAttached = false;
        IEnumerator keys = this.CheckBox1.Attributes.Keys.GetEnumerator();
        while (keys.MoveNext())
        {
            if (keys.Current.Equals("onClick"))
            {
                isOnClickAttached = true;
                 break;
             }
        }
        if (!isOnClickAttached)
            this.CheckBox1.Attributes.Add("onClick", string.Format("realPostBack(\"{0}\", \"\"); return false;", this.CheckBox1.UniqueID));
    }

AJAX 更新后执行自定义 Javascript 代码

Telerik RadAjax提供了执行作为服务器响应的自定义 JavaScript 代码的能力，从而能够更灵活地在客户端上完成更具体或更复杂的任务。接下来展示了在 AJAX 更新后执行自定义 JavaScript 代码的几种方法。

最好和最直观的方法是使用RadAjaxPanel或RadAjaxManager的ResponseScripts属性。

示例 1显示了如何在单击 Button 时弹出警报。

protected void Button1_Click(object sender, System.EventArgs e)
    {
        RadAjaxPanel1.ResponseScripts.Add(string.Format("alert('Hello from the server! Server time is {0}');", DateTime.Now.ToLongTimeString()));
    }

示例 2显示了另一种方法。可以使用ScriptManager类的RegisterStartupScript静态方法：

protected void Button1_Click(object sender, EventArgs e)
    {
        string script = string.Format("alert('Hello from the server! Server time is {0}');", DateTime.Now.ToLongTimeString());
        ScriptManager.RegisterStartupScript(Page, typeof(Page), "myscript", script, true);
    }

可以使用PageRequestManager类的pageLoaded事件。