Load ASP.Net User Control Dynamically Using jQuery

Dinesh K Mandal

Rate me:

4.62/5 (6 votes)

12 Oct 2010CPOL2 min read

77.5K

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!CodeProject

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