RadAjax for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

At client-side you can execute your own JavaScript functions at certain stages of the AJAX request. Additionally you can use a generic JavaScript function to make explicit AJAX requests to the server from the client.

Note

You can construct the javascript function calls manually or alternatively use the server-side method GetAjaxEventReference and have Telerik RadAjax generate the necessary code for you.

Client-side API

Note

The new RadAjax for ASP.NET AJAX requires enclosing the server code blocks inside RadCodeBlock control. See Changes and backwards compatibility article as well as RadCodeBlock description for more info.

ajaxRequest(arguments)

The ajaxRequest(arguments) function, is used to initiate a generic AJAX request. When using this function the event target defaults to the RadAjaxPanel or RadAjaxManager instance.

 

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

arguments

The parameters, which the control had used when it raised the request

AjaxRequest event

When it is called on the client it can be handled in the ajaxRequest event handler on the server:

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

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

And in the code-behind:

When an AJAX request is triggered using AjaxRequest function from the client, the AJAX Manager itself should be set as the AJAX initiator updating the corresponding control like this:

CopyASPX
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="TextBox1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

ajaxRequestWithTarget(eventTarget, eventArgument)

The ajaxRequestWithTarget(eventTarget, eventArgument) function can be called to simulate a postback/AJAX request send by other control (besides AjaxManager or AjaxPanel) with the specified UniqueID and specified arguments. Its execution can be handled by the correspondent event (i.e. Button_Click) on the server.

 

__doPostBack(eventTarget, eventArgument)

or

$find("<%=AjaxPanel1.ClientID%>").ajaxRequestWithTarget(eventTarget, eventArgument)

eventTarget

The control which should raise postback event. You should always use the control's UniqueID.

eventArgument

This is optional argument for the event

Note: ajaxRequestWithTarget is designed as a substitute of the standard __doPostBack function. Thus, you need to override RaisePostBackEvent

of the page in order to get its argument server-side.

Here is an example how to use AjaxRequestWithTarget:

CopyASPX
<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>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Button1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="TextBox1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
CopyJavaScript
<telerik:RadCodeBlock ID="cb1" runat="server">
    <script type="text/javascript">
        function AjaxRequestButton(arguments) {
            var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
            ajaxManager.ajaxRequestWithTarget('<%= Button1.UniqueID %>', '');
        }
    </script>
</telerik:RadCodeBlock>

And in the code-behind:

You can see the working example by following this link:

http://demos.telerik.com/aspnet-ajax/Ajax/Examples/Manager/ClientSideAPI/DefaultCS.aspx

See Also