Asp-DotNet-Rama: 02/17/14

Monday, 17 February 2014

Set MaxLength for Multiline TextBox in ASP.Net using jQuery

By default the MaxLength property does not work for Multiline TextBox and hence I have created a jQuery Plugin which sets MaxLength for ASP.Net Multiline TextBox and also displays the character count as text is typed.

Implementing the jQuery MaxLength Plugin for ASP.Net MultiLine TextBox (TextArea)

Below you will notice the implementation of the jQuery MaxLength plugin. The jQuery MaxLength plugin 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 HTML SPAN or DIV.

3. DisplayCharacterCount (optional) – Default true. If set to false the Character counting will be disabled.

   <html xmlns="http://www.w3.org/1999/xhtml">

   <head runat="server">

       <title>title>

       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">script>

       <script type="text/javascript" src="MaxLength.min.js">script>

       <script type="text/javascript">

           $(function () {

               //Normal Configuration

               $("[id*=TextBox1]").MaxLength({ MaxLength: 10 });

               //Specifying the Character Count control explicitly

               $("[id*=TextBox2]").MaxLength(

               {

                   MaxLength: 15,

                   CharacterCountControl: $('#counter')

               });

               //Disable Character Count

               $("[id*=TextBox3]").MaxLength(

               {

                   MaxLength: 20,

                   DisplayCharacterCount: false

               });

           });

       script>

   head>

   <body>

       <form id="form1" runat="server">

       <div id="counter">

       div>

       <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Width="300" Height="100"

           Text="Mudassar Khan">asp:TextBox>

       <br />

       <br />

       <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Width="300" Height="100">asp:TextBox>

       <br />

       <br />

       <asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine" Width="300" Height="100">asp:TextBox>

       form>

   body>

   html>

Print Specific part of Web page in ASP.NET

In this short article I will explain how to print specific (particular) part of web page in ASP.Net using C# and VB.Net.

The idea is to place the contents to be printed inside an ASP.Net Panel control and then print the contents of the Panel control.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type = "text/javascript">

        function PrintPanel() {

            var panel = document.getElementById("<%=pnlContents.ClientID %>");

            var printWindow = window.open('', '', 'height=400,width=800');

            printWindow.document.write('<html><head><title>DIV Contents</title>');

            printWindow.document.write('</head><body >');

            printWindow.document.write(panel.innerHTML);

            printWindow.document.write('</body></html>');

            printWindow.document.close();

            setTimeout(function () {

                printWindow.print();

            }, 500);

            return false;

        }

    </script>

</head>

<body>

    <form id="form1" runat = "server">

    <asp:Panel id="pnlContents" runat = "server">

        <span style="font-size: 10pt; font-weight:bold; font-family: Arial">Hello,

            <br />

            This is <span style="color: #18B5F0">Mudassar Khan</span>.<br />

            Hoping that you are enjoying my articles!</span>

    </asp:Panel>

    <br />

    <asp:Button ID="btnPrint" runat="server" Text="Print" OnClientClick = "return PrintPanel();" />

    </form>

</body>

</html>

In the above HTML Markup I have an ASP.Net Panel control pnlContents whose contents needs to be printed and an ASP.Net Button btnPrint which has an OnClientClick event which will call the JavaScript method PrintPanel() to print the contents of the Panel.

Monday, 17 February 2014

Set MaxLength for Multiline TextBox in ASP.Net using jQuery

Print Specific part of Web page in ASP.NET

Popular Posts