Telerik ajax 控件学习笔记 - Ajax_csdn telerik ajax-CSDN博客

产品版本：RadControls for ASP.NET Ajax Q1 2009

Telerik 的控件实现 Ajax 的方式比 asp.net ajax 要简单些。有如下特点：

1. 不需要拖放很多 Update Panel, triggers.

只要在现有 webform 的底部加一个 RadAjaxManager, 然后点 "Configure Ajax Manager", 在其中配置更新关系即可。其中可以配置多个更新的设置，每一个设置是如下结构：

发起控件（一个）—— 被更新的控件（多个）

2. 配置 ajax callback 的方式很简单，容易理清页面上控件的触发-更新关系。

如1所说，生成的控件代码如下：

< telerik:RadAjaxManager ID ="RadAjaxManager1" runat ="server" >
< AjaxSettings >
   < telerik:AjaxSetting AjaxControlID ="Button1" >
    < UpdatedControls >
     < telerik:AjaxUpdatedControl ControlID ="Label1" />
    </ UpdatedControls >
   </ telerik:AjaxSetting >
</ AjaxSettings >
</ telerik:RadAjaxManager >

当然，要记得在页面首部放一个 <asp:ScriptManager />

和 asp.net ajax 类似的，它也有一个 RadAjaxManagerProxy 控件，用于在 User Control 或 Content Page (master page 的使用场景）中使用。

RadAjax 的实现原理是通过将 PostBack 截获，转换为 ajax callback 来实现，在得到结果后，仅更新在上述配置中需要更新的那些目标控件。

因此对于一些默认不自动 PostBack 的控件，如果要让其能够触发 ajax callback, 必须设置 AutoPostBack="True"，才能作为触发控件使用。比如 CheckBox, TextBox 等。

常用的调试手段：如果 ajax callback 出错，首先想到的是将这个触发控件的 EnableAjax 属性设为 false, 这样就恢复了一般的 PostBack 模式，可以查看到详细的错误信息。

另外还有两个 ajax 相关的控件：

1. RadAjaxPanel: 这个是 asp.net ajax UpdatePanel 控件的代替品，自动捕获其中的 PostBack 并转化为 ajax callback.

2. RadAjaxLoadingPanel: 用来显示一些 loading 的等待信息。

在服务器端添加控件更新设置：

RadAjaxManager1.AjaxSettings.AddAjaxSetting(<ajaxified control>, <updated control>);
RadAjaxManager1.AjaxSettings.AddAjaxSetting(<ajaxified control>, <updated control>, <LoadingPanel> or null if none);

注意：此方法可以在 Page_Load 或 Page_PreRender 中调用。不能在 Page_Init 中调用，因为此时 AjaxManager 还没被创建。

客户端用 js 代码控制 RadAjaxManager 更新：

$find("<%= ajaxManager1.ClientID %>").ajaxRequest(arguments);

该函数在服务器端会触发 AjaxRequest 事件，可以通过订阅该事件来处理请求。

ajaxRequestWithTarget(eventTarget, eventArguments) 函数可用来模拟其他控件发送 PostBack 或 ajax callback.

__doPostBack(eventTarget, eventArguments)

或

$find("<%= ajaxManager1.ClientID %>").ajaxRequestWithTarget(eventTarget, eventArguments);

该函数在服务器端可通过对应的 event handler 来处理，如 Button1_Click.

在 UserControl 中，应该使用 RadAjaxManagerProxy 而不是 RadAjaxManager 控件。

但如果需要获得当前页面所包含的 RadAjaxManager, 则也可以用 RadAjaxManager.GetCurrent() 来取得。如果不存在则返回 null.

RadAjaxManager.GetCurrent(Page);

例子：

< telerik:RadCodeBlock ID ="RadCodeBlock1" runat ="server" >
    < script type ="text/javascript" >
        function myUserControlClickHandler()
       {
           $find( " <%= RadAjaxManager.GetCurrent(Page).ClientID %> " ).ajaxRequest( " content " );
       }
    </ script >
</ telerik:RadCodeBlock >

复杂些的应用场景：

GridView 中的某些按钮要求能触发 ajax callback, 而另一些则保持原有的 PostBack 行为。

解决办法：

在 GridView 的 RowCreated 事件中，处理 DataRow 的 PreRender 事件，在 PreRender 事件处理函数中找到需要触发 ajax callback 的按钮，用 RadAjaxManager.AddAjaxSetting() 方法动态注册之。

注意：不要混用 RadAjaxPanel 和 RadAjaxManager. 如果一个控件被包含在 RadAjaxPanel 中，同时又是 RadAjaxManager 里注册的一个触发控件，则 Manager 中的设置不会起作用。

Q: 设置要被更新的控件被换行显示了？

A: RadAjaxManager 对设置的更新目标控件自动添加 UpdatePanel, 而该 panel 的默认布局方式是 block. 可以设置成 inline 来阻止其换行，破坏布局。代码如下：

< telerik:RadAjaxManager ID ="RadAjaxManager1" runat ="server" UpdatePanelsRenderMode="Inline" >
    < AjaxSettings >
        < telerik:AjaxSetting AjaxControlID ="RadGrid1" >
            < UpdatedControls >
                < telerik:AjaxUpdatedControl ControlID ="RadGrid1" />
                < telerik:AjaxUpdatedControl ControlID ="Label1" />
                < telerik:AjaxUpdatedControl ControlID ="Label2" />
            </ UpdatedControls >
        </ telerik:AjaxSetting >
    </ AjaxSettings >
</ telerik:RadAjaxManager >

RadAjaxPanel 的目的是为了更新其中的内容，如果要触发其外部某些控件的更新，一般最好用 RadAjaxManager 来实现。但不用 RadAjaxManager 也是可以的。办法是通过 ResponseScripts 方法添加客户端的脚本去触发其他控件的更新。例子如下：

ASPX:

< asp:ScriptManager ID ="ScriptManager" runat ="server" />
< 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 >

Code behind:

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));
   }

在 UserControl / Content page 里处理主页面的 RadAjaxManager 的事件（客户端事件、服务端事件都能订阅）的例子：

protected void Page_Load( object sender, EventArgs e)
{
   RadAjaxManager manager = RadAjaxManager.GetCurrent(Page);
   manager.ClientEvents.OnRequestStart = " onRequestStart " ;
   manager.ClientEvents.OnResponseEnd = " onResponseEnd " ;
   manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(manager_AjaxRequest);
}
protected void manager_AjaxRequest( object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    // handle the manager AjaxRequest event here
}