Virtual Developer Workshop: Containerized Development with Docker
Understanding the problem
Before you proceed further let's understand the problem we are trying to solve. When you use Textbox web control with its TextMode property set to Singleline, ASP.NET emits an INPUT element in the resultant HTML markup. For example, if your Textbox web control markup is like this :
<asp:TextBox ID="TextBox1" runat="server" MaxLength="20" />
The resultant HTML markup will be :
<input name="TextBox1" type="text" maxlength="20" id="TextBox1" />
Notice how the MaxLength property of the wTextbox web control is getting converted as maxlength attribute of the INPUT tag. However, if you set TextMode property of the Textbox to MultiLine then the same textbox gets emitted as TEXTAREA element as shown below :
<textarea name="TextBox1" rows="2" cols="20" id="TextBox2"></textarea>
Notice that there is no maxlength attributed in the above markup (since TEXTAREA doesn't support it). Instead the MaxLength property is rendered as cols attribute. In short you cannot restrict the amount of text entered into a multiline textbox unless you write some extra pieces of code.
At first glance you may think of using the two common solutions :
- Validate the textbox web control on the server
TextBox1.Attributes.Add("onkeyup", "return MyFunction();");
Imagine a case that you have used the above technique at dozens of places across several web forms. For some reason you now want to change the function name or want to do something else in addition to checking the length of the text entered. In such cases it can be tedious to change the server side code in all those places.
What is an AJAX Client Behavior?
AJAX client behaviors can be very handy in such situations because they extend existing HTML elements by adding some extra functionality. The behavior can be developed independent of the web control and once developed can be simply attached (or removed) to the control.
At code level an AJAX client behavior is a class that inherits from
Normally, behaviors don't create anything new. Rather they add
extra features to the existing HTML elements. Once developed an AJAX client
behavior can be attached with an element with the help of an extender control.
An extender control is a server side class that inherits from ExtenderControl
Consider a case where you have a TextBox web control whose TextMode property is set to MultiLine. This textbox accepts profile information from the user and you want to enforce following features:
- The textbox must accept only certain number of characters say 500.
- As the user is entering the text a counter should be displayed indicating how much text has been entered or how much can still be entered. (Twitter does something similar when you start entering text)
- If user exceeds the maximum length (500 in this case) the textbox should disallow further entry or it should display a warning message.
- All this should be achieved without touching the Textbox web control markup or its server side code.
In order to work through the example that follows you need to have ASP.NET 3.5 or above installed on your machine. Though the example is developed using Microsoft Visual Studio 2008 you can also use Microsoft Visual Studio 2010 or Microsoft Visual Web Developer Express Edition.