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.