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” >
<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
Dinesh Mandal
Serializing and Deserializing Thoughts... 
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?
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.
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.
Once a user control is loaded, how this can create a problem if you are not loosing the control on next Page_Load?