In this article I will explain with an example, how to set MaxLength for TextArea using jQuery in ASP.Net Core Razor Pages.
The ASPSnippets MaxLength jQuery plugin will be used to set the MaxLength in the TextArea element in ASP.Net Core Razor Pages.
 
 
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.
 
 
Razor PageModel (Code-Behind)
The PageModel consists of following one Handler method.
Handler method for handling GET operation
This Handler method handles the GET calls, for this particular example it is not required and hence left empty.
public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
}
 
 
Razor Page (HTML)
The HTML of Razor Page consists of three TextArea elements 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.
Note: JS file does not work in ASP.Net Core unless it is placed in proper location within the project and also some settings need to be done. For more details, please refer my article Static Files (Images, CSS and JS files) in ASP.Net Core.
 
@page
@{
    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>
    <textarea id="Text1" rows="2" cols="20"></textarea>
    <br/><br/>
    <div id="counter" class="error"></div>
    <textarea id="Text2" rows="2" cols="20"></textarea>
    <br/><br/>
    <textarea id="Text3" rows="2" cols="20"></textarea>
    <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
ASP.Net Core Razor Pages: Set Maxlength for TextArea using jQuery
 
 
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