New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Load User Controls

Environment

Product Progress® Telerik® UI for ASP.NET AJAX

Description

How can I load user controls with Telerik UI for ASP.NET AJAX?

Solution

The dynamic loading of user controls follows the same logic as in normal postback applications. You can load customUserControls with AJAX requests in the demonstrated way below. For an online demo, refer to the Loading User Controls page.

  1. Provide an appropriate container for the control, for example, asp:Panel.

  2. Instantiate your user control in the Page_Init or Page_Load event and always re-create the last loaded user control.

    UserControl MyControl = (UserControl)LoadControl(controlName);
    LoadMyUserControl(CurrentControl, Panel1);
    ````
    
    Dim MyControl As UserControl = Me.LoadControl(controlName)
    Me.LoadMyUserControl(Me.CurrentControl, Panel1)
    ````
    
  3. Assign a unique ID to the dynamically loaded user control.

    string userControlID = controlName.Split('.')[0];
    MyControl.ID = userControlID.Replace("/", "").Replace("~", "");
    ````
    
    Dim userControlID As String = controlName.Split(".")(0)
    MyControl.ID = userControlID.Replace("/", "").Replace("~", "")
    
    ````
    
  4. Place the instance inside the controls collection of the container:

    Parent.Controls.Add(MyControl)
    
    ````
    

    The following example demonstrates how to implement the previous steps in a simple scenario.

    <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>
    

    The following is the implementation in the code-behind:

    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;
    }
    
    
    
    Protected Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Me.Load
            If (Not Me.CurrentControl Is String.Empty) Then
                Me.LoadMyUserControl(Me.CurrentControl, Panel1)
            End If
    End Sub
    
    Protected Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
            Me.LoadMyUserControl("~/WebUserControl1.ascx", Panel1)
    End Sub
    
    Protected Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
            Me.LoadMyUserControl("~/WebUserControl2.ascx", Panel1)
    End Sub
    
    Private Property CurrentControl() As String
            Get
                Return IIf(Me.ViewState("CurrentControl") Is Nothing, String.Empty, Me.ViewState("CurrentControl"))
            End Get
            Set(ByVal Value As String)
                Me.ViewState("CurrentControl") = Value
            End Set
    End Property
    
    Private Sub LoadMyUserControl(ByVal controlName As String, ByVal parent As Control)
            parent.Controls.Clear()
            Dim MyControl As UserControl = Me.LoadControl(controlName)
            Dim userControlID As String = controlName.Split(".")(0)
            MyControl.ID = userControlID.Replace("/", "").Replace("~", "")
            parent.Controls.Add(MyControl)
            Me.CurrentControl = controlName
    End Sub
    

    See Also

In this article