Telerik ajax 控件学习笔记 - Ajax

前端之家收集整理的这篇文章主要介绍了Telerik ajax 控件学习笔记 - Ajax前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

产品版本: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" /> </ 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);

例子:

telerik:RadCodeBlock ="RadCodeBlock1" 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 来阻止其换行,破坏布局。代码如下:

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

ASPX:

asp:ScriptManager ="ScriptManager" h3 Panel1 telerik:RadAjaxPanel ="RadAjaxPanel1" asp:Button ="btnIncrease" OnClick ="btnIncrease_Click" Text ="Increase" asp:Button asp:Label 0 asp:Label asp:TextBox ="TextBox1" ="0" ></ asp:TextBox telerik:RadAjaxPanel Panel2 ="RadAjaxPanel2" ="btnDecrease" ="btnDecrease_Click" ="Decrease" ="TextBox2" Code behind:

protected void Page_PreRender( object sender,EventArgse)
{
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 的事件(客户端事件、服务端事件都能订阅)的例子:

Page_Load( RadAjaxManager.GetCurrent(Page);
manager.ClientEvents.OnRequestStart
onRequestStart ;
manager.ClientEvents.OnResponseEnd
onResponseEnd ;
manager.AjaxRequest
+= new RadAjaxControl.AjaxRequestDelegate(manager_AjaxRequest);
}
manager_AjaxRequest( // handlethemanagerAjaxRequesteventhere }

猜你在找的Ajax相关文章