A MaxLength compliant Multiline Textbox Control in ASP.NET 2.0

This sample was updated in May 2007 and now works with both Internet Explorer and Firefox. We'd like to thank Mark Brose for making the script work under both browsers!

This sample was updated again January 2009 and now works when used in a Multiview control or in an AJAX UpdatePanel.

One of the problems with ASP.NET version 1.0 Textbox control was that if you designed a MultiLine Textbox with a MaxLength attribute, that MaxLength attribute would always be ignored. Only when the TextMode was set to SingleLine or Password was the MaxLength attribute enforced.

The obvious difference between the TextModes is that they render as an HTML INPUT element or an HTML TEXTAREA element. HTML TextArea elements don't support a MaxLength attribute.

Now we have ASP.NET version 2.0 and guess what? The ASP.NET Version 2.0 Textbox control is just the same :-(

Both these ASP.NET version 2.0 TextBox controls have a MaxLength property of 10.

 

A New Hope... A New Control

This sample shows a simple control that enforces the MaxLength attribute on the TextBox even for the MultiLine TextMode. The sample also shows off some of the new features of ASP.NET Version 2.0 that make delivering supporting client side script much easier and cleaner.

This is our improved Textbox control - with a MaxLength property of 10.

The new control is based on the existing ASP.NET TextBox control but, when MaxLength and MultiLine are specified, it associates some client side javascript with the rendered HTML control. It is this client side javascript that enforces the MaxLength limit.

The source code for the new control is available here.

As you'll see, there is not much to it. We simply override the OnPreRender method to check whether we should associate the support client side javascript with the control. If we do, we use two methods of the new ClientScriptManager object, RegisterExpandoAttribute and RegisterClientScriptResource to do the work.

The support javascript is available here.

RegisterExpandoAttribute

RegisterExpandoAttribute lets us associate an HTML expando attribute with the rendered TEXTAREA element. We use this attribute to hold the value of the MaxLength property for the control. Using RegisterExpandoAttribute rather than the Control.Attributes.Add construct that was more common in ASP.NET version 1.0 means that we retain XHTML compliance - expando attributes would break XHTML compliance. RegisterExpandoAttribute generates some client-side script which locates the control and adds the attribute with the specified value.

One extra twist to the RegisterExpandoAttribute story is provided by AJAX. Where a page is partial updated (using an UpdatePanel for example), using the ClientScriptManager to set the attribute will not work. In this scenario, you should use the ScriptManager object. ScriptManager provides an similar set of methods to those provided by the ClientScriptManager object, but handles the needs of partial update. All very messy!

RegisterClientScriptResource

RegisterClientScriptResource is a fantastic addition to ASP.NET version 2.0 that greatly simplifies the way client side scripts can be wrapped and delivered with your solution. In ASP.NET 1.0 if a control needed some supporting client side javascript there were two main ways to get that script delivered; using StringBuilder blocks to embed the script in the source code and (using RegisterClientScriptBlock or RegisterStartupScript) or publishing the script as a file in a known location and referencing it in the web page. With RegisterClientScriptResource you can embed the javascript in your assembly as a resource and have it delivered directly from that assembly to the client browser. Let's go over the scenario.

• In Visual Studio, add the support javascript you need to the project;
• Set the build action for the javascript file to "Embedded Resource";
• In your code, add a call to RegisterClientScriptResource specifing a type from the assembly and the full name of the embedded file. The full name is made up of the default namespace of the assembly coupled with the full "path" to the file. In our example, the file is called "TextBoxSupport.js" and it is at the root of the project. Our default namespace is Annsa.Controls, so the code is as follows;
  
  

  this.Page.ClientScript.RegisterClientScriptResource(typeof(AnnsaTextBox), 
            "Annsa.Controls.TextBoxSupport.js");

  
  
• For security reasons we now must mark the embedded resource as one that can be delivered over the web. To do this, open the AssemblyInfo.cs for the project and add;
  • A reference to System.Web.UI;
  • A "WebResourceAttribute" for the resource. This entry indicates the full name of the resource and the MIME type that should be associated with it when it is delivered. In our example we have;
    
    

    [assembly: WebResourceAttribute("Annsa.Controls.TextBoxSupport.js", 
            "text/jscript")]

    
    

When the HTML page containing the RegisterClientScriptResource directive is delivered, it will contain a javascript reference in the form;

<script src="/websitename/WebResource.axd?d=ZB4uxy_gu9xKFpIkjOstUYh8KDH1T89fLCMW
yDYb4sMgbQQ-LTFH1QQglh9tpZRq0&t=632666471840625000" 
type="text/javascript"></script>

The WebReource.axd portion of this src attribute references an ASP.NET handler which extracts the relevant resource and returns it to the client. Caching is used to maintain performance.

This sample shows our new TextBox and how it is rendered on a page.

Summary

RegisterExpandoAttribute and more particularly RegisterClientScriptResource are tremendous additions to ASP.NET. Script maintenance and delivery will be significantly simpler.

These new features mean that;

• Your script files are stored in the Visual Studio project in an easily maintainable way;
• Your assembly can be "self-contained" making deployment much simpler.

It's a shame that the ASP.NET Version 2.0 TextBox isn't quite as good!

Download this sample