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.