RadAjax for ASP.NET

Ajaxify user controls Send comments on this topic.
See Also
AJAX Manager > How-To > Ajaxify user controls

Glossary Item Box

In case you have an application that contains WebUserControls and want to ajaxify/update these controls with RadAjaxManager, you may do the following:

  1. Wrap the control in an ASP Panel:
    ASPX/ASCX Copy Code
    <asp:Panel id="Panel1" runat="server" height="200px" width="300px">
    <uc1:WebUserControl1 id="WebUserControl11" runat="server"></uc1:WebUserControl1>

    And ajaxify/update the panel using AJAX Manager designer. This way the UserControl will be updated with AJAX request on any action of its containing controls.

  2. Put Ajax Manager in the user control and specify the necessary AjaxSettings there. However, this may not be feasible when you want to ajaxify multiple user controls - you will need an instance of RadAjaxManager in each control.
  3. Use single Ajax Manager instance in your main page.

    In this case you may add necessary AjaxSettings dynamically. You should access all the involved controls in both main page's and user controls code-behind.

In complex scenarios (many user controls interacting with each other) we highly recommend choosing the third option.

In case of WebUserControl containing a second RadAjaxManager, if you have ajaxified a panel for instance, which contains the user control, those controls inside it are already ajaxified. The second AJAX Manager will find them already ajaxified and won't do the expected updates.

Both managers will work correctly as long as they don't mess each other. Of course, one could also use a single RadAjaxManager for ajaxifying and updating controls both in the main page as well as in the user control.

A sample following this approach is posted from Telerik, attached in this forum thread 


Here is a simple example demonstrating how this could be achieved:

ASPX - Main Page Copy Code
<form id="Form1" method="post" runat="server">
<uc1:WebUserControl1 id="WebUserControl1" runat="server"></uc1:WebUserControl1>   
<rad:RadAjaxManager id="RadAjaxManager1" runat="server"></rad:RadAjaxManager>
ASPX - User Control Copy Code
<asp:Button id="Button1" Text="Button" runat="server"></asp:Button>
<asp:Label id="Label1" runat="server">Label</asp:Label>  

And in the code-behind:

C# - Main Page Copy Code
protected void Page_Load(object sender, EventArgs e)
//Get the WebUserControl
UserControl MyControl = (UserControl)Page.FindControl("WebUserControl1");
//Get user control's button and label
Button MyButton = (Button)MyControl.FindControl("Button1");
Label MyLabel = (Label)MyControl.FindControl(
//Add the necessary AJAX setting programmatically
RadAjaxManager1.AjaxSettings.AddAjaxSetting(MyButton, MyLabel, null);
VB.NET - Main Page Copy Code
Protected Sub Page_Load(sender As Object, e As EventArgs)
   'Get the WebUserControl
   Dim MyControl As UserControl = CType(Page.FindControl("WebUserControl1"), UserControl)
   'Get user control's button and label
   Dim MyButton As Button = CType(MyControl.FindControl("Button1"), Button)
   Dim MyLabel As Label = CType(MyControl.FindControl("Label1"), Label)
   'Add the necessary AJAX setting programmatically
   RadAjaxManager1.AjaxSettings.AddAjaxSetting(MyButton, MyLabel, Nothing)
End Sub 'Page_Load


C# - User Control Copy Code
protected void Button1_Click(object sender, System.EventArgs e)
  Label1.Text = DateTime.Now.ToLongTimeString();
VB.NET - User Control Copy Code
Protected Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
 Label1.Text = DateTime.Now
End Sub

See Also