产品版本:RadControls for ASP.NET Ajax Q1 2009
Telerik 的控件实现 Ajax 的方式比 asp.net ajax 要简单些。有如下特点:
1. 不需要拖放很多 Update Panel,triggers.
只要在现有 webform 的底部加一个 RadAjaxManager,然后点 "Configure Ajax Manager",在其中配置更新关系即可。其中可以配置多个更新的设置,每一个设置是如下结构:
发起控件(一个)—— 被更新的控件(多个)
2. 配置 ajax callback 的方式很简单,容易理清页面上控件的触发-更新关系。
AjaxSettings telerik:AjaxSetting AjaxControlID ="Button1" UpdatedControls telerik:AjaxUpdatedControl ControlID ="Label1" /> </ telerik:AjaxSetting telerik:RadAjaxManager >
当然,要记得在页面首部放一个 <asp:ScriptManager />
和 asp.net ajax 类似的,它也有一个 RadAjaxManagerProxy 控件,用于在 User Control 或Content Page (master page 的使用场景)中使用。
RadAjax 的实现原理是通过将 PostBack 截获,转换为 ajaxcallback 来实现,在得到结果后,仅更新在上述配置中需要更新的那些目标控件。
因此对于一些默认不自动 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);
例子:
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 来阻止其换行,破坏布局。代码如下:
ASPX:
{
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 :( ) ];
}
set value;
}
}
btnIncrease_Click( ++ ;
RadAjaxPanel1.ResponseScripts.Add(String.Format( $find('{0}').ajaxRequest(); ,RadAjaxPanel2.ClientID));
}
btnDecrease_Click( -- ;
RadAjaxPanel2.ResponseScripts.Add(String.Format( 在 UserControl / Content page 里处理主页面的 RadAjaxManager 的事件(客户端事件、服务端事件都能订阅)的例子:
manager.ClientEvents.OnRequestStart onRequestStart ;
manager.ClientEvents.OnResponseEnd onResponseEnd ;
manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(manager_AjaxRequest);
}
manager_AjaxRequest( // handlethemanagerAjaxRequesteventhere }