New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial
Load User Controls
The dynamic loading of user controls follows the same logic as in normal postback applications. You can load customUserControls via AJAX requests by following the steps below:
-
You need to have an appropriate container for it, for example asp:Panel.
-
Instantiate your user control in Page_Init or Page_Load and always recreate the last loaded User Control:
C#
UserControl MyControl = (UserControl)LoadControl(controlName);
LoadMyUserControl(CurrentControl, Panel1);
- Make sure you assign a unique ID to the dynamically loaded User Control:
C#
string userControlID = controlName.Split('.')[0];
MyControl.ID = userControlID.Replace("/", "").Replace("~", "");
- Place the instance inside the controls collection of the container:
VB
Parent.Controls.Add(MyControl)
Example : The following example demonstrates how to implement the above steps in simple scenario.
ASP.NET
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<asp:Button ID="Button1" runat="server" Text="Load WebUserControl1.ascx" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Load WebUserControl2.ascx" OnClick="Button2_Click" />
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="Button1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Panel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="Button2">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Panel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
And in the code-behind:
C#
protected void Page_Load(object sender, EventArgs e)
{
if (this.CurrentControl != string.Empty)
{
LoadMyUserControl(CurrentControl, Panel1);
}
}
protected void Button1_Click(object sender, EventArgs e)
{
this.LoadMyUserControl("~/WebUserControl1.ascx", Panel1);
}
protected void Button2_Click(object sender, EventArgs e)
{
this.LoadMyUserControl("~/WebUserControl2.ascx", Panel1);
}
private string CurrentControl
{
get
{
return this.ViewState["CurrentControl"] == null ? string.Empty : (string)this.ViewState["CurrentControl"];
}
set
{
this.ViewState["CurrentControl"] = value;
}
}
private void LoadMyUserControl(string controlName, Control parent)
{
parent.Controls.Clear();
UserControl MyControl = (UserControl)LoadControl(controlName);
string userControlID = controlName.Split('.')[0];
MyControl.ID = userControlID.Replace("/", "").Replace("~", "");
parent.Controls.Add(MyControl);
this.CurrentControl = controlName;
}
An online demo for loading User Controls is available at the following link:
https://demos.telerik.com/aspnet-ajax/Ajax/Examples/Common/LoadingUserControls/DefaultCS.aspx