In this article I will explain how to dynamically load ASP.Net UserControl using jQuery AJAX and add it to the ASP.Net page. I will also explain how to dynamically pass parameters to ASP.Net UserControl using jQuery AJAX
 
UserControl
I have a simple UserControl with one ASP.Net Label control to display the message on the screen. We will load this UserControl using jQuery AJAX and also set its Label text.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Message.ascx.cs" Inherits="Message" %>
<asp:Label ID="lblMessage" runat="server" Text="lblMessage"></asp:Label>
 
 
Namespaces
You will need to import the following namespaces
C#
using System.IO;
using System.Web.Services;
 
VB.Net
Imports System.Web.Services
Imports System.IO
 
 
WebMethod
Below is the WebMethod that will accept the jQuery AJAX call and load the UserControl dynamically. The WebMethod accepts string parameter message which I use to set the Label Control inside the UserControl. Finally the UserControl returned as HTML string back to the page.
C#
[WebMethod]
public static string LoadUserControl(string message)
{
    using (Page page = new Page())
    {
        UserControl userControl = (UserControl)page.LoadControl("Message.ascx");
        (userControl.FindControl("lblMessage") as Label).Text = message;
        page.Controls.Add(userControl);
        using (StringWriter writer = new StringWriter())
        {
            page.Controls.Add(userControl);
            HttpContext.Current.Server.Execute(page, writer, false);
            return writer.ToString();
        }
    }
}
 
VB.Net
<WebMethod()> _
Public Shared Function LoadUserControl(message As String) As String
    Using page As New Page()
        Dim userControl As UserControl = DirectCast(page.LoadControl("Message.ascx"), UserControl)
        TryCast(userControl.FindControl("lblMessage"), Label).Text = message
        page.Controls.Add(userControl)
        Using writer As New StringWriter()
            page.Controls.Add(userControl)
            HttpContext.Current.Server.Execute(page, writer, False)
            Return writer.ToString()
        End Using
    End Using
End Function
 
 
Client Side Implementation
Below we are making an AJAX call to the server WebMethod and passing the message parameter which is the content of the HTML TextBox with ID message. On click of the HTML Button with ID demo jQuery AJAX loads the UserControl and appends it to the DIV with ID Content.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type = "text/javascript">
        $("#demo").live("click", function () {
            $.ajax({
                type: "POST",
                url: "MyPage.aspx/LoadUserControl",
                data: "{message: '" + $("#message").val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    $("#Content").append(r.d);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type = "text" id = "message" />
    <input type = "button" id = "demo" value = "Load" />
    <div id = "Content">
   
    </div>
    </form>
</body>
</html>
 
 
Screenshots
How to load ASP.Net UserControl Dynamically using jQuery AJAX

Fetch and Display ASP.Net UserControl Dynamically using jQuery AJAX


Downloads
Download Code