Home > .Net Technologies, ASP.Net, C#/VB.Net, CodeProject, Dot Net Tips, JavaScript/jQuery/JSON/Ajax > Load ASP.Net User Control Dynamically Using jQuery

Load ASP.Net User Control Dynamically Using jQuery

Today we will explore the way of loading ASP.Net user control at run time using jQuery. jQuery has one method load(fn) that will help here. This load(fn) method has following definition.

load (url, data, callback): A GET request will be performed by default – but if any extra parameters are passed, then a POST will occur.
url (string): URL of the required page
data (map – key/value pair): key value pair data that will be sent to the server
callback (callback method): call back method, not necessarily success

Now comes custom HttpHandler that will load the required user control from the URL given by this load(fn) method. We all know that it is either in-built or custom HttpHandler that is the end point for any request made in ASP.Net.

Let’s see by example. In the ASP.Net application, add one aspx page and user control. Then, add one more class derived from IHttpHandler. The aspx html markup will look something like this.

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; >
<head runat=”server”>
<title>Load ASP.Net User Control</title>
<script src=”jquery-1.2.6.js”></script>
$(document).ready(function() {
$(“#BtnLoadUserCtrl”).click(function() {
<form runat=”server”>
<br />
<input value=”Load User Control” /> <br />
<div id=”UserCtrl”></div>

The code is quite readable. On the click event of BtnLoadUserCtrl button, SampleUserCtrl.ascx user control is being tried to load in the <div> element having id UserCtrl.

Then, write our custom Httphandler called jQueryHandler as below.

public class jQueryHandler:IHttpHandler
public void ProcessRequest(HttpContext context)
// We add control in Page tree collection
using(var dummyPage = new Page())
context.Server.Execute(dummyPage, context.Response.Output, true);

private Control GetControl(HttpContext context)
// URL path given by load(fn) method on click of button
string strPath = context.Request.Url.LocalPath;
UserControl userctrl = null;
using(var dummyPage = new Page())
userctrl = dummyPage.LoadControl(strPath) as UserControl;
// Loaded user control is returned
return userctrl;

public bool IsReusable
get { return true; }

Do not miss to add this HttpHandler in the web.config.

<add verb=”*” path=”*.ascx” type=”JQUserControl.jQueryHandler, JQUserControl”/>

This web.config configuration tells that jQueryHandler will process request for file type having .ascx extension and methods all (GET, POST, etc). The type attribute value is something like:
type=”Namespace.TypeName, Assembly name where Handler can be found”

Now we are ready to test our sample. Run the page, and see on the click of button, the sampleusertCtrl.ascx is loaded.

I hope we can now extend this concept to fit any such programming requirement in future.
Happy Coding!

  1. Shweta
    November 27, 2010 at 12:10 pm

    I am getting following error:
    Could not load file or assembly ‘JQUserControl’ or one of its dependencies. The system cannot find the file specified.

    Could you please give me solution to resolve it?

    • Dinesh K Mandal
      November 29, 2010 at 6:22 pm

      Probably, you are making mistake here:

      type= “namespace.classname, namespace”

      So you need to check this part in your web.config. If you are unable to find exact type of your user control, then query in Class Explorer in Visual Studio or using other tool like Reflector.

      Hope this will help you now.

  2. Dave
    December 11, 2010 at 12:43 am

    Can you explain the intent of creating the dummy page? Are we trying to reference the page that the user control is being added to?

    My user control that I am loading has UpdatePanels and the System.Web.UI.Page doesn’t have the ScriptManager, so it throws an exception.

  3. Dinesh K Mandal
    March 23, 2011 at 8:20 am

    Once a user control is loaded, how this can create a problem if you are not loosing the control on next Page_Load?

  1. April 16, 2012 at 10:00 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: