In this article I will explain with an example, how to set MaxLength for TextArea created using Html.TextArea Helper function using jQueryin ASP.Net MVC Razor.
The ASPSnippets MaxLength jQuery plugin will be used to set the MaxLength in the TextArea element in ASP.Net MVC Razor.
Apart from limiting the character length in the TextArea, the plugin also displays Character count i.e. the count of Characters available for typing.
 
 
Download ASPSnippets MaxLength Plugin
You can download the ASPSnippets MaxLength jQuery plugin using the link provided below.
Download ASPSnippets MaxLength Plugin
 
 
Using ASPSnippets MaxLength jQuery Plugin
The ASPSnippets MaxLength jQuery has the following required and optional parameters:-
1. MaxLength (required) – Integer value indicating the Maximum character length limit.
2. CharacterCountControl (optional) – By default the plugin will display character count below the TextArea, but user has option to explicitly specify the Character Count Control.
Note: The character count control can only be a HTML SPAN or DIV element.
 
3. DisplayCharacterCount (optional) – Default true. If set to false the Character counting will be disabled.
 
 
Controller
The Controller consists of following one Action method.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}
 
 
View
The View consists of three TextArea elements created using Html.TextArea Helper method for which the Maximum Length validation will be implemented and an HTML DIV element for displaying the Character Count for the second TextArea.
 
Implementing ASPSnippets MaxLength jQuery Plugin
Inside the jQuery document ready event handler, the ASPSnippets MaxLength jQuery plugin has been applied to all the three TextArea elements with three different configurations.
First TextArea – Default configuration. Maximum Length validation will be performed and Character count will be displayed.
Second TextArea – Maximum Length validation will be performed and Character Count will be displayed in a HTML DIV.
Third TextArea – Only Maximum Length validation will be performed.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
        .error { color: red; font-weight: bold; }
    </style>
</head>
<body>
    @Html.TextArea("Text1", new { @id = "Text1" })
    <br/>br/>
    <div id="counter" class="error"></div>
    @Html.TextArea("Text2", new { @id = "Text2" })
    <br/>br/>
    @Html.TextArea("Text3", new { @id = "Text3" })
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="~/Scripts/MaxLength.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //Default Configuration.
            $("#Text1").MaxLength({ MaxLength: 10 });
 
            //Specifying the Character Count control explicitly.
            $("#Text2").MaxLength({
                MaxLength: 15,
                CharacterCountControl: $('#counter')
            });
 
            //Disable Character Count.
            $("#Text3").MaxLength({
                MaxLength: 20,
                DisplayCharacterCount: false
            });
        });
    </script>
</body>
</html>
 
 
Screenshot
Html.TextArea Maxlength MVC: Set Maxlength for TextArea using jQuery in ASP.Net MVC
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads
Download Code