Blog of developer Mikkel Ovesen » usercontrol http://blog.ovesens.net My thoughts, stuff I need to remember or things I just want to share with the world Thu, 19 Jan 2012 11:55:29 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Dynamically Loading ASP.NET User Controls with jQuery http://blog.ovesens.net/2008/12/dynamically-loading-asp-net-user-controls-with-jquery/ http://blog.ovesens.net/2008/12/dynamically-loading-asp-net-user-controls-with-jquery/#comments Fri, 26 Dec 2008 21:17:00 +0000 Mikkel Ovesen /post/2008/12/26/Dynamically-Loading-ASPNET-User-Controls-with-jQuery.aspx Continue reading →]]> 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 :)

]]> http://blog.ovesens.net/2008/12/dynamically-loading-asp-net-user-controls-with-jquery/feed/ 12 Dynamic controls in ASP.NET http://blog.ovesens.net/2008/11/dynamic-controls-in-asp-net/ http://blog.ovesens.net/2008/11/dynamic-controls-in-asp-net/#comments Tue, 25 Nov 2008 19:42:00 +0000 Mikkel Ovesen /post/2008/11/25/Dynamic-controls-in-ASPNET.aspx Continue reading →]]> As many articles point out it is important to load dynamic control in the Init event of the life cycle. This is important if you want to preserve the view state.

Another thing I found out… you need to instantiate the control, add it to a ControlCollection and then set the properties of the control. If you set the properties before it is added to a ControlCollection. The view state does not work.

This is wrong

BaseProductControl control = (BaseProductControl)this.Page.LoadControl(product.ViewControl);
control.ProductId = productId;
ProductViewPlaceHolder.Controls.Add(control);

This will work

BaseProductControl control = (BaseProductControl)this.Page.LoadControl(product.ViewControl);
ProductViewPlaceHolder.Controls.Add(control);
control.ProductId = productId;

]]> http://blog.ovesens.net/2008/11/dynamic-controls-in-asp-net/feed/ 0 How Do I: Build Custom Server Controls that Work With or Without ASP.NET AJAX? http://blog.ovesens.net/2007/09/how-do-i-build-custom-server-controls-that-work-with-or-without-asp-net-ajax/ http://blog.ovesens.net/2007/09/how-do-i-build-custom-server-controls-that-work-with-or-without-asp-net-ajax/#comments Wed, 19 Sep 2007 14:37:00 +0000 Mikkel Ovesen /post/2007/09/19/How-Do-I-Build-Custom-Server-Controls-that-Work-With-or-Without-ASPNET-AJAX.aspx Continue reading →]]> View original post here:
http://www.asp.net/learn/ajax-videos/video-186.aspx
—
Play Video

Do you have an idea for a custom server control that should be able to work without ASP.NET AJAX, yet could take advantage of ASP.NET AJAX if it is available? In this video we learn how to build a custom server control that does not reference the ASP.NET AJAX assembly, but uses Reflection to “play nice” with the ASP.NET AJAX UpdatePanel.

Presented by Chris Pels

Duration: 19 minutes, 21 seconds

Date: 9 July 2007

]]> http://blog.ovesens.net/2007/09/how-do-i-build-custom-server-controls-that-work-with-or-without-asp-net-ajax/feed/ 0