Dheeraj's Tech Wiki

In this article you would learn how create an ASP.NET user control with jQuery which displays the character count of a multi-line textbox below it. The user control takes the character limit as one of its properties. Below is the markup of my usercontrol:

Below is the jQuery code I have used in the user control:

$(document).ready(function() {
        $('#<%=tbMultiLine.ClientID %>').keyup(function(e) {
            var limit = $('#<%=hdnCharacterLimit.ClientID %>').val();
            var tbLength = $(this).val().length;
            if (tbLength > limit) {
                this.value = this.value.substring(0, limit);
                e.preventDefault();
            }
            $('#<%=lblCharCount.ClientID %>').show();
            $('#<%=lblCharCount.ClientID %>').text($(this).val().length + '/' + $('#<%=hdnCharacterLimit.ClientID %>').val() + ' characters');
        });
    });

When the DOM is ready I add a keyup event to the multi-line textbox and get the character limit from a hidden field in the user control. I then check to see if the character count is greater than the limit and if so then I remove the additional characters and prevent the default action for the textbox.

Demo

Download Code

Recently I noticed that there was a control named ToolkitScriptManager in the ASP.NET AJAX Control Toolkit and I was wondering how it was different from the regular ScriptManager. After reading this wonderful blogpost I came to know that ToolkitScriptManager will combine all the ASP.NET AJAX scripts by default. I decided to run a small test to see how exactly this effects performance and the results were quite impressive. I first created a simple page with the ScriptManager and the AJAX Calendar Extender control. Below is the screenshot from firebug:



As you can see from the above screenshot that with the ScriptManager control we are making 15 requests to the server, page size is 168.4kb and it takes 5.62 seconds to load this page. Now lets see how ToolScriptManager changes these numbers:



Now the you can see that the number of requests have come down to 7, page size is 124kb and it takes only 4.03 seconds to load this page.

All you need to do is just REPLACE

WITH

Conclusion: Imagine if you are saving 8 requests, 44kb of data and 1.59 seconds of load time on a page with a single AJAX Control. How much performance gain would you get on a page with update panels and many AJAX controls?