How To- Load ASP.Net User Control Dynamically Using jQuery and Ajax

Here in this post, I am going to explain how to dynamically load the Asp.Net user control using jQuery and Ajax. For loading the user control we will use the Web Method on server side and call that web method through Ajax call using jQuery.

You can also find my other articles related to C#, ASP.Net,  jQuery, Java Script and SQL Server.

So, lets start the example. In this example I have used one aspx page name Demo.aspx and one user control to load on the aspx page DemoUserControl.ascx.
ASPX Page

---

<div style="width:350px">
        <table width="100%">
            <tr>
                <td>
                    <asp:Label ID="lblName" runat="server" Font-Bold="true" Text="Name"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblAge" runat="server" Font-Bold="true" Text="Age"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Button ID="btnLoadUserControl" runat="server" Text="LoadControl" />
                </td>
            </tr>
        </table>
    </div>
    <fieldset style="width:350px">
        <legend>User Control Content</legend>
        <div id="userControlContent">
        </div>
    </fieldset>

In the above aspx page, there are two TextBoxes for capturing the input and one Button to load the user control and show the enterd value.

User Control Mark Up

---

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DemoUserControl.ascx.cs" Inherits="LoadUserControlByjQuery.DemoUserControl" %>
<table width="100%">
    <tr>
        <td>
            <asp:Label ID="lblName" runat="server" Font-Bold="true" Text="Name"></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblNameValue" runat="server"></asp:Label>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="lblAge" runat="server" Font-Bold="true" Text="Age"></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblAgeValue" runat="server"></asp:Label>
        </td>
    </tr>
</table>

In the above mark up there are two Label with id lblNameValue and lblAgeValue. These label will be used to show the enterd value after loading the user control on aspx page.
C# Code on ASPX Page

---

Write the following web method into ASPX page code behind file.

[WebMethod]
public static string LoadUserControl(string name, int age)
{
  using (Page _page = new Page())
  {
    //Load the user control
    UserControl usrControl = (UserControl)_page.LoadControl("DemoUserControl.ascx");
    //Set the name and age parameter values to User Control's respective labels
    (usrControl.FindControl("lblNameValue") as Label).Text = name;
    (usrControl.FindControl("lblAgeValue") as Label).Text = age.ToString();
     _page.Controls.Add(usrControl);
    using (StringWriter writer = new StringWriter())
    {
      _page.Controls.Add(usrControl);
      HttpContext.Current.Server.Execute(_page, writer, false);
      return writer.ToString();
    }
  }
}

Now add the following java script code into head section of ASPX page.
Script Code

---

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("#btnLoadUserControl").live("click", function (e) {
            $.ajax({
                type: "POST",
                url: "Demo.aspx/LoadUserControl",
                data: "{name: '" + $("#txtName").val() + "',age:" + $("#txtAge").val() + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    $("#userControlContent").append(r.d);
                }
            });
            e.preventDefault();
        });
</script>

In the above code, I have made a Ajax call on the click event of button which calls the Web method of ASPX page and append the result with in a div with id userControlContent of ASPX page.
Output

---

On Page Load

After Enter the values and Click on Button

I hope this article will be helpful for you. I would like to have any feedback from you. Your valuable feedback, question, or comments about this article are always welcome.