The RadAjaxManager control in the Telerik Control Suite for ASP.net AJAX is very useful and easy for ajaxifying several controls on your asp.net web form.

Though the control is very flexible, sometimes we might need to decide on runtime whether to cause an ajax postback or a normal postback. We can do this on the client side using a few lines of Javascript.

Let us consider a scenario where we have a DropDownList named “ddlCountry” and a Label named ”lblCountry”:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="RadAjaxManagerTutorialDemo._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Selectively Enable/Disable Ajax Postback in Javascript while using Telerik RadAjaxManager.
    </h2>
        <p>
        <asp:DropDownList runat="server" ID="ddlCountry" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged"
            AutoPostBack="True">
            <asp:ListItem Text="Select Country" Value="Select" />
            <asp:ListItem Text="America" Value="USA" />
            <asp:ListItem Text="UK" Value="UK" />
            <asp:ListItem Text="India" Value="India" />
            <asp:ListItem Text="Australia" Value="Australia" />
            <asp:ListItem Text="Germany" Value="Germany" />
        </asp:DropDownList>
    </p>
    <p>
        Selected Country:
        <asp:Label runat="server" ID="lblCountry" Text="None" />
    </p>
</asp:Content>

So, as it might be clear, I have a DropDownList containing the names of a few countries and a Label that has it’s text set to “None”.

I have set the AutoPostBack property of the DropDownList to true as I want it to cause a postback and I’m handling it’s OnSelectedIndexChanged event in the code behind as:

using System;

namespace RadAjaxManagerTutorialDemo
{
    public partial class _Default : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
        {
            lblCountry.Text = ddlCountry.SelectedValue;
        }
    }
}

Till now, it’s just a simple web application that changes the text of Label to the SelectedValue of a DropDownList inside the OnSelectedIndexChanged event of the DropDownList.

Moving on, we will now do the same by implementing Ajax using Telerik’s RadAjaxManager.

To do that, first of all you’ll have to reference Telerik’s dll named: Telerik.Web.UI.dll
Now add RadScriptManager and RadAjaxManager controls, but remember to add the RadScriptManager before the RadAjaxManager and also make sure that only one instance of both is present on the page at a time.

The code must look some thing like this after that:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="RadAjaxManagerTutorialDemo._Default" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableTheming="True">
    </telerik:RadScriptManager>    <h2>
        Selectively Enable/Disable Ajax Postback in Javascript while using Telerik RadAjaxManager.
    </h2>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
    </telerik:RadAjaxManager>
    <p>
        <asp:DropDownList runat="server" ID="ddlCountry" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged"
            AutoPostBack="True">
            <asp:ListItem Text="Select Country" Value="Select" />
            <asp:ListItem Text="America" Value="USA" />
            <asp:ListItem Text="UK" Value="UK" />
            <asp:ListItem Text="India" Value="India" />
            <asp:ListItem Text="Australia" Value="Australia" />
            <asp:ListItem Text="Germany" Value="Germany" />
        </asp:DropDownList>
    </p>
    <p>
        Selected Country:
        <asp:Label runat="server" ID="lblCountry" Text="None" />
    </p>
</asp:Content>

Now, we’ll Ajaxify our controls by adding the relevant AjaxSetting to the RadAjaxManager:

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

Now our controls have been Ajaxified and will run without causing a full postback.

Now, I want that there should be no post back if the user has selected “Select Country” and if the user selects either of “India” or “Australia” the page should cause a full postback rather than an Ajaxified postback.
To do this, we handle the “OnAjaxRequestStart” Client-side event of the RadAjaxManger, and inside that event, we will check the selected value of our DropDownList and handle the request accordingly.

To store the selected value of the DropDownList I’m using a hidden field whose value is being changed in the Client-side onchange event of our DropDownList. Since, this part is not relevant to the topic, I’m not explaining it here but you can check it out in the source code provided at the end of this post.

The “eventArgs” parameter of the “OnAjaxRequestStart” event can be used for handling the particular request. This will handle the particular request only and will not be persisted on further requests. The following changes are made:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableTheming="True">
    </telerik:RadScriptManager>
    <telerik:RadScriptBlock runat="server">
        <script type="text/javascript">
            function ajaxRequestStart(sender, eventArgs) {
                var HiddenValue = document.getElementById("<%= hidCountry.ClientID %>").value;
                if (HiddenValue == "Select") {
                    eventArgs.set_cancel(true);         //this will cancel the current request
                }                                       //and will not cause a postback.
                else if (HiddenValue == "India" || HiddenValue == "Australia") {
                    eventArgs.set_enableAjax(false);    //this will cause a normal postback by
                }                                       //disabling ajax for the current request.
                else {
                    eventArgs.set_enableAjax(true);     //this will enforce an ajax postback,
                }                                       //although in this case, it is not necessary.
            }
            function onCountrySelectionChange() {
                var CountryValue = document.getElementById("<%= ddlCountry.ClientID %>").value;
                var hidCountry = document.getElementById("<%= hidCountry.ClientID %>");
                hidCountry.value = CountryValue;
            }
        </script>
    </telerik:RadScriptBlock>
    <h2>
        Selectively Enable/Disable Ajax Postback in Javascript while using Telerik RadAjaxManager.
    </h2>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ddlCountry">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblCountry" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnRequestStart="ajaxRequestStart" />      <%-- This will fire the ajaxRequestStart event
                                                 everytime the RadAjaxManager1 is being used to make a call --%>
    </telerik:RadAjaxManager>

So, this way we can use the OnRequestStart client-side event of the RadAjaxManger to handle our requests according to our need.

Note: The file Telerik.Web.UI has been excluded from the source code. Please download it’s version 2011.2.712.40 from Telerik’s website and paste it in the Assemblies folder.

RadAjaxManagerTutorialDemo.zip (142.71 kb)