UPDATE (16-07-2009)
Here is a new sample website with source code, it now disposes the page object and allows for WebControl rendering.
Dynamically Loading ASP.NET User Controls with jQuery v2.zip (25.52 kb)
——————————————
This post is only relevant if you are using WebForms. If you have converted to the MVC approach, then go read about Dependency Injection or NHibernate 
If however you are using WebForms or are maintaining an application that was build with WebForms. Here is a way to partially render a usercontrol via jQuery (ajax).
Introduction
User controls are a great way to group markup and functionality, but in these AJAX times, the problem and nature of User Controls, in relation to ajax, is their fixed position in the Page Control tree.
Sam Mueller describes the issues and gives his solution to dynamically loaded user controls using jQuery.
Read it here:
http://samuelmueller.com/post/2008/12/20/Dynamically-Loading-ASPNET-User-Controls-with-jQuery.aspx
Sam Muellers raises some very interesting points, however I have two things I would like to change (URL and security).
URL
I very much like that Sam Mueller has found a solution to “directly” call a user control (view) with an URL. What I do not like is the URL to be called:
/ajax.svc/renderuc?path=/usercontrols/myusercontrol.ascx
I would like to be able to call the user control directly by this kind of URL:
/usercontrols/myusercontrol.ascx
And by using a HttpHandler this is possible. I have written an example here:
1: public class AjaxUserControlHandler : IHttpHandler
2: {
3: public void ProcessRequest(HttpContext context)
4: {
5: // Get the path to the user control
6: string path = context.Request.Url.LocalPath;
7:
8: // Intialize the pseudo page and user control
9: Page page = new Page();
10: UserControl viewControl = page.LoadControl(path) as UserControl;
11:
12: // Display error if the user control was not found
13: if (viewControl == null)
14: {
15: context.Response.StatusCode = 404;
16: context.Response.Output.WriteLine("The requested url was not found");
17: return;
18: }
19:
20: // Check existense of the AjaxEnabled attribute. Only add the AjaxEnabled attribut to
21: // user controls that is safe for direct calls
22: var type = viewControl.GetType();
23: var attributes = type.GetCustomAttributes(typeof (AjaxEnabledAttribute), true);
24: AjaxEnabledAttribute attribute = attributes.FirstOrDefault() as AjaxEnabledAttribute;
25:
26: // If the attribute was not found, display an error
27: if (attribute == null)
28: {
29: context.Response.StatusCode = 403;
30: context.Response.Output.WriteLine("Access to the resource is not allowed");
31: return;
32: }
33:
34:
35: // Check if the request is valiud with regards to the requirements of the attribute.
36: // If not, display error
37: if ((attribute.Method == RequestMethodSupport.GET && context.Request.RequestType != "GET")
38: || (attribute.Method == RequestMethodSupport.POST && context.Request.RequestType != "POST"))
39: {
40: context.Response.StatusCode = 403;
41: context.Response.Output.WriteLine(string.Format("The request method {0} is not allowed.", context.Request.RequestType));
42: return;
43: }
44:
45: // Add user control to the pages control tree
46: page.Controls.Add(viewControl);
47:
48: // Disable caching, remove this if you will allow client caching
49: context.Response.CacheControl = "No-Cache";
50:
51: // Execute and return result to Output stream
52: context.Server.Execute(page, context.Response.Output, true);
53: }
54:
55: public bool IsReusable
56: {
57: get { return true; }
58: }
59: }
To make it work, you need to add the following to httpHandlers tag in the web.config.
<add verb="*" path="*.ascx" type="[NAMESPACE].AjaxUserControlHandler, [ASSEMBLY]"/>
Security
I have implemented an AjaxEnabled attribut, so that it is not possible to directly call any of the user controls (if you know the path to them) in the solution.
The attribute is simple and looks like this:
1: public class AjaxEnabledAttribute : Attribute
2: {
3: [DefaultValue(RequestMethodSupport.All)]
4: public RequestMethodSupport Method { get; set; }
5: }
6:
7: public enum RequestMethodSupport
8: {
9: All,
10: GET,
11: POST
12: }
By doing this, the handler will only allow calls to user controls that have the [AjaxEnabled[ attribute, like this:
1: [AjaxEnabled]
2: public partial class Test : System.Web.UI.UserControl
3: {
4: ...
Conclusion
With the HttpHandler, and the attribute in place, my two concerns (url and security) are dealt with.
You are now able to call a user control directly:
/usercontrols/myusercontrol.ascx
And you are only able to call user controls that have the AjaxEnabled attribute.
Any comments and suggestions are welcome btw
