Loading user controls dynamically on TabClick and postback from loaded user control

HOW-TO
Load WebUserControls dynamically on TabClick of RadTabStrip with AJAX and handle postbacks from a user control.



DESCRIPTION
Assume that there are RadAjaxManager and RadTabStrip on the page. We want to load different WebUserControls dynamically on each TabClick. The TabStrip is ajaxified using the RadAjaxManager designer and it updates a panel containing the loaded user controls.

There is RadAjaxTimer (it could be any other postback control) in one of the user controls, which is dynamically ajaxified by the manager on user control's Page_Load. The timer starts once its control is loaded and updates a label in the user control (could be control in the main page as well).

SOLUTION
The key points in this scenario are:

• TabStrip and RadAjaxManager integration: each tab relates to different user control
• Proper loading of user controls:

1. Controls should always be loaded on Page_Load (or Page_Init)
2. Once a control is loaded it needs an ID to be set explicitly

Here is an useful article from the RadAjax help concerning the scenario described in this KB article:

• How-To: Load user control

 

DESCRIPTION
The scenario is the same as with the Classic RadControls, the only difference is that we are using the Timer from the MS AJAX library instead of our RadAjaxTimer. We are also taking advantage of the RadAjaxManagerProxy control to handle the ajaxification of the label updated by the timer. Here is the code:

ASPX:

<asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick">

</asp:Timer>

<asp:Label ID="Label1" runat="server" Text="Timer is ticking <br/>Ticks: "></asp:Label>

<asp:Label ID="Label2" runat="server" Text="0"></asp:Label>

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="Timer1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Label2" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

C#:

protected void Timer1_Tick(object sender, EventArgs e)

{

//Increment timer ticks and the label text

int ticks = Int32.Parse(Session["Ticks"].ToString()) + 1;

Session["Ticks"] = ticks;

Label2.Text = ticks.ToString();

}

A demo applications for both suites are attached at the bottom of this thread.