Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Load ASP.Net User Control Dynamically Using jQuery

, 12 Oct 2010 CPOL
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. load (url, data, callback): A GET request will be performed by default – but if any extra parameters are pa

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” >
<head runat="”server”">
<title>Load ASP.Net User Control</title>
<script src=”jquery-1.2.6.js”></script>
<script>
$(document).ready(function() {
$(“#BtnLoadUserCtrl”).click(function() {
$(“#UserCtrl”).load(“SampleUserCtrl.ascx”);
});
});
</script>
</head>
<body>
<form runat="”server”">
<div>
<br />
<input value=”Load User Control” /> <br />
<div id=”UserCtrl”></div>
</div>
</form>
</body>
</html>

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())
{
dummyPage.Controls.Add(GetControl(context));
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.

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

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

License

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

Share

About the Author

Dinesh K Mandal
Technical Lead Imfinity India Pte Ltd, Noida (Excelsoft Company)
India India
http://www.imfinity.com/

Comments and Discussions

 
Questionerror 404.7 when run localhost Pinmembertrieuquang198824-Jul-13 10:12 
QuestionGET URL 404 (Not Found) [modified] PinmemberNafiseh Salmani2-Apr-13 6:52 
The handler should be in the same folder as the page is? what about the usercontrol? does this article contain the complete example? I used this method, but in console I can see the GET "URL" 404 (Not Found) while the URL is correct path. Do you have any idea what cause this?
 
Here is the complete error
Quote:
GET https://localhost/web/App_UserControls/MultiSelectDropDwn/MultiselectDropdownlistbox.ascx 404 (Not Found) jquery.min.js:4
send jquery.min.js:4
f.extend.ajax jquery.min.js:4
f.fn.extend.load jquery.min.js:4
(anonymous function) AlertsEdit.aspx:252
o jquery.min.js:2
p.fireWith jquery.min.js:2
e.extend.ready jquery.min.js:2
c.addEventListener.B

 
Quote:
(anonymous function) AlertsEdit.aspx:252
refers to $('#UserCtrl').load('../App_UserControls/MultiSelectDropDwn/MultiselectDropdownlistbox.ascx');

I need to add user control by jquery as the other data is being added using jquery to my table. The usercontrol needs get some property such as data source, how to do that?

modified 2-Apr-13 12:21pm.

BugProblem With IIS 7.0 and jQuery Handler Pinmemberv_farmak5-Mar-13 5:11 
GeneralRe: Problem With IIS 7.0 and jQuery Handler PinmemberDinesh K Mandal5-Mar-13 21:00 
QuestionUsing this technique in parallel with standard UserControl usage [modified] PinmemberMember-47222599-May-12 21:14 
AnswerRe: Using this technique in parallel with standard UserControl usage PinmemberDinesh K Mandal10-May-12 4:22 
GeneralMy vote of 2 PinmemberNathan Staudt12-Oct-10 4:20 

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

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

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