image

I got email from a developer this week having trouble with WebForms validation.

The issue was that a combination of a control and an extender were causing havoc with the counter.

The developer wanted to prevent submission if the user entered more than 50 characters in a textbox.

Note:

  • Using WebForms does not mean you have to do everything with Web Controls.
  • jQuery ROCKS !

When you create an ASP.NET WebForms project using the default template in Visual Studio 2010 you get jQuery included by default.

I did a couple of Bingle searches (like Google only with BING) and found the maxlength.js library at http://www.javascriptkit.com

My .aspx page markup look like this….

Code Snippet
  1. <%@ Page Title=”Home Page” Language=”C#” MasterPageFile=”~/Site.master” AutoEventWireup=”true”
  2.     CodeBehind=”Default.aspx.cs” Inherits=”InputMax._Default” %>
  3.  
  4. <asp:Content ID=”HeaderContent” runat=”server” ContentPlaceHolderID=”HeadContent”>
  5. <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
  6. <script src=”Scripts/maxlength.js” type=”text/javascript”></script>
  7. </asp:Content>
  8. <asp:Content ID=”BodyContent” runat=”server” ContentPlaceHolderID=”MainContent”>
  9.     <h2>
  10.         Welcome to ASP.NET with jQuery!
  11.     </h2>
  12.  
  13.   <p>Enter some text <strong>(<50 characters)</strong></p>
  14.   <textarea runat=”server” id=”tbonlyfifty” style=”width:300px; height:60px” data-maxsize=”50″ data-output=”in-status” wrap=”virtual”></textarea>
  15.   <br />
  16.   <div id=”in-status”
  17.         style=”width:300px;font-weight:bold;text-align:right; font-size: x-large;”></div><br />
  18.     <asp:Button ID=”ButtonSubmit” runat=”server” Text=”Submit” Width=”300px”
  19.         onclick=”ButtonSubmit_Click” /><br /><br />
  20.     <asp:Label ID=”LabelResult” runat=”server” Text=”"></asp:Label>
  21. </asp:Content>

Note how elegant this is.

I simply download and include the maxjength.js file and add two attributes to my html textarea.

data-maxsize – says how many characters can be entered into the textarea.

data-output – tells the maxsize script where to display the feedback.

Note that the textbox is not an ASP.NET Server Side Control. It’s a standard <textarea> element that I’ve specified  runat=”server” and an id so that I can retrieve the value in code-behind.

OR

I could omit  runat=”server”  and retrieve the value from the form collection.

Code Snippet
  1. public partial class _Default : System.Web.UI.Page
  2. {
  3.     protected void Page_Load(object sender, EventArgs e)
  4.     {
  5.         if (IsPostBack)
  6.         {
  7.             LabelResult.Text = “From Request = “ + Request.Form["ctl00$MainContent$tbonlyfifty"] + “<br /><br />”;
  8.         }
  9.     }

Welcome to the power, simplicity, and elegance of jQuery !

For more information on maxlength.js you can go to the source here :

http://www.javascriptkit.com/script/script2/enforceform.shtml 

PS: Here is a working sample [ DOWNLOAD ]

Technorati Tags: ,WebForms,,