Click here to Skip to main content
13,251,760 members (66,137 online)
Click here to Skip to main content
Add your own
alternative version


18 bookmarked
Posted 12 Oct 2010

Load ASP.Net User Control Dynamically Using jQuery

, 12 Oct 2010
Rate this:
Please Sign up or sign in to vote.
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.

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="" >
<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!

Posted in .Net Technologies, ASP.Net, C#/VB.Net, CodeProject, Dot Net Tips, JavaScript/jQuery/JSON/Ajax Tagged: .Net3.5, ASP.Net, HttpHandler, jQuery, UserControl


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Dinesh K Mandal
Technical Lead Imfinity India Pte Ltd, Noida (Excelsoft Company)
India India

You may also be interested in...


Comments and Discussions

Questionerror 404.7 when run localhost Pin
trieuquang198824-Jul-13 10:12
membertrieuquang198824-Jul-13 10:12 
QuestionGET URL 404 (Not Found) Pin
Nafiseh Salmani2-Apr-13 6:52
memberNafiseh Salmani2-Apr-13 6:52 
BugProblem With IIS 7.0 and jQuery Handler Pin
v_farmak5-Mar-13 5:11
memberv_farmak5-Mar-13 5:11 
GeneralRe: Problem With IIS 7.0 and jQuery Handler Pin
Dinesh K Mandal5-Mar-13 21:00
memberDinesh K Mandal5-Mar-13 21:00 
QuestionUsing this technique in parallel with standard UserControl usage Pin
Member-47222599-May-12 21:14
memberMember-47222599-May-12 21:14 
Thanks for taking the time to write this article. I found it extremely helpful!

The only problem I ran into is that adding the verb in Web.Config overrides normal processing of .ascx files, which means UserControls stop working in standard ASP.Net pages. The workaround I found is to change the verb path from "*.ascx" to some other text such as "*.jscx":

<add verb="*" path="*.jscx" type="JQUserControl.jQueryHandler, JQUserControl"/>

and in the handler modify the GetControl method slightly to convert .jscx back to .ascx:

string strPath = context.Request.Url.LocalPath.Replace(".jscx", ".ascx");

In your JQuery requests you then reference .ascx files as .jscx:


In this way the JQueryHandler will be invoked only for JQuery requests, but normal ASP.Net requests for UserControls will be handled in the standard way.

modified 10-May-12 2:35am.

AnswerRe: Using this technique in parallel with standard UserControl usage Pin
Dinesh K Mandal10-May-12 4:22
memberDinesh K Mandal10-May-12 4:22 
GeneralMy vote of 2 Pin
Nathan Staudt12-Oct-10 4:20
memberNathan Staudt12-Oct-10 4:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.171114.1 | Last Updated 12 Oct 2010
Article Copyright 2010 by Dinesh K Mandal
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid