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.

How To- Bind Data to Gridview using jQuery in ASP.Net

In this post, I am explaining how to bind data to Gridview using jQuery in ASP.Net through Ajax call.

In previous posts, I explained Page Scroll to Top with jQuery, Automatically Refresh Page Using Java Script , How to Create a Textarea Character Counter, Animated Sliding Recent Post Widget For Blogger, Change Input to Upper Case using Java Script, Calculate Age from Date of Birth Using Java Script, jQuery .toggleClass() example and some other articles related to C#, ASP.Net,  jQuery, Java Script and SQL Server.

ASPX Page

---

Gridview Markup

<asp:GridView ID="grdDemo" runat="server" AutoGenerateColumns="False" Font-Names="Arial"
    Font-Size="10pt" HeaderStyle-BackColor="GrayText" HeaderStyle-ForeColor="White" Width="500px">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" />
        <asp:BoundField DataField="FName" HeaderText="First Name"/>
        <asp:BoundField DataField="LName" HeaderText="Last Name"/>
        <asp:BoundField DataField="Email" HeaderText="E-mail"/>
    </Columns>
</asp:GridView>

Method Overloading in WebServices

As we know that Web Service is also a class just like other classes. In web service we can overload the web methods but it is not as straightforward as in class. Method overloading in the web service is little bit different. Here in this example, I will show you how to overload the web methods in We Service.