In this article I will explain with an example, how to dynamically load and display UserControl using jQuery AJAX and WebMethod in ASP.Net with C# and VB.Net.
 
 

UserControl

The UserControl consists of following control:
Label – For displaying message.
This UserControl is loaded using jQuery AJAX and sets the message.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Message.ascx.cs" Inherits="Message" %>
<br />
<b>Name:</b><asp:Label ID="lblMessage" runat="server" Text="lblMessage"></asp:Label> 
 
 

HTML Markup

The HTML Markup consists of following elements:
TextBox – For capturing the user input.
Button – For submitting the text.
DIV – For displaying entered text.
<input id="txtMessage" type="text" /> 
<input id="btnLoad" type="button" value="Load" /> 
<div id="dvContent"></div> 
 
 

Dynamically loading and displaying UserControl using jQuery AJAX

Inside the HTML Markup, the following script file is inherited.
1. jquery.min.js
 
Inside the jQuery document ready event handler, the Button has been assigned with a jQuery click event handler which when clicked the AJAX call is made to the WebMethod.
Note: For more details on how to make AJAX call, please refer my article Calling ASP.Net WebMethod using jQuery AJAX.
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnLoad").on("click", function () {
            $.ajax({
                type: "POST",
                url: "Default.aspx/LoadUserControl",
                data: "{message: '" + $("#txtMessage").val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    $("#dvContent").empty();
                    $("#dvContent").append(r.d);
                }
            });
        });
    });
</script>
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.IO;
using System.Web.Services;
 
VB.Net
Imports System.IO
Imports System.Web.Services
 
 

PageMethod (WebMethod)

The WebMethod accepts message i.e. TextBox value as a parameter.
Inside the WebMethod, the Page class object is created and the UserControl is set where the location of UserControl class is passed as parameter and the message is set in Label control.
Then, the UserControl object is added as Control to the Page using Add method of the Page.
Next, the StringWriter class object is created and Execute method is called using HttpContext class object and the UserControl returned as HTML string back to the page.
Note: The following WebMethod is declared as static (C#) and Shared (VB.Net), it is decorated with WebMethod attribute, this is necessary otherwise the method will not be called from client side jQuery AJAX call.
 
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())
        {
            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()
            HttpContext.Current.Server.Execute(page, writer, False)
            Return writer.ToString()
        End Using
    End Using
End Function
 
 

Screenshot

Dynamically load and display ASP.Net UserControl using jQuery AJAX and WebMethod
 
 

Downloads

Download Code