December 29, 2010

It is a common scenario to have a textarea element  or multiline TextBox control in a html / page and the challenge is to limit the number of characters that can be entered and to display the remaining number of characters that can be entered. The textarea unlike the TextBox control does not support the maxlength property and thus cannot be limited. The solution is to use javascript to limit the number of characters.

In this example, I have added a TextBox control and added the onkeyup event for the control. The code for the page is below.

  1. <asp:TextBox ID="T1" runat="server" TextMode="MultiLine" Rows="3" onkeyup="T1_KeyUp()"></asp:TextBox>
  2. <span id="T1Status" style="color:Red;">50 character(s) remaining.</span>

The span element in the page will display the number of remaining characters that can be entered in the TextBox.

The JavaScript code is below. The code sets the max length of the TextBox to 50 characters.

JavaScript function
  1. <script type="text/javascript">
  2.     function T1_KeyUp() {
  3.         var text = document.getElementById('<%= T1.ClientID %>').value;
  4.         var len = text.length;
  5.         var max = 50;
  6.         if (len > max) {
  7.             text = text.substring(0, max);
  8.             len = 50;
  9.             document.getElementById('<%= T1.ClientID %>').value = text;
  10.         }
  11.         document.getElementById('T1Status').innerHTML = max - len + " character(s) remaining.";
  13.     }
  14. </script>

Server side could also be used for this but it will cause unnecessary postbacks to the server. However, the actual text entered should be validated from the server end as JavaScript can be easily disabled by a user.

It is a common issue to recognise line breaks inside a textarea. Text is entered in a textarea or an multiline TextBox control and Enter key is pressed to add a new line to the text. This situation may arise when entering, for example, address or feedback in a textarea and the user wants to separate some text from the other.

When the text is obtained from code behind or from JavaScript, the line break needs to be obtained by checking the string entered in the textbox. This is needed as the browser fails to display the line break and instead requires a “<br/>” tag.

In this example, I have added a multiline TextBox control and used both JavaScript and server side code to replace the line break with a “<br/>” tag and to replace the carriage return with “&nbsp;&nbsp;”. The code for the page is below.

aspx page
  1.  <asp:TextBox ID="TextBox1" runat="server" Rows="3" TextMode="MultiLine"></asp:TextBox>
  2.  <br />
  3.  Server Click: <asp:Label ID="Label1" runat="server"></asp:Label>
  4.  Js Click: <span id="SpanJs"></span>
  5.  <br />
  6.  <asp:Button ID="Button1" runat="server" onclick="Button1_Click"
  7.      Text="Continue" />
  9.  <asp:Button ID="Button2" runat="server" onclientclick="JsClick()" Text="JS" />

The code for JavaScript function JsClick() is below. The function retrieves the text from the TextBox control, performs string manipulation and displays the text in a span element.

JavScript function
  1. <script type="text/javascript">
  2.     function JsClick() {
  3.         var text = document.getElementById('<%= TextBox1.ClientID %>').value;
  4.         text = text.replace("\n", "<br/>");
  5.         text = text.replace("\r", "&nbsp;nbsp;");
  7.         document.getElementById('SpanJs').innerHTML = text;
  8.     }
  9. </script>

The code for Button’s OnClick event is below. Like JavaScript function, the method retrieves text from TextBox control, performs string manipulation and outputs the text in a Label control.

  1. protected void Button1_Click(object sender, EventArgs e)
  2. {
  3.     string text = TextBox1.Text;
  4.     text = text.Replace("\n", "<br/>");
  5.     text = text.Replace("\r", "&nbsp;&nbsp;");
  6.     Label1.Text = text;
  7. }

December 23, 2010

In, controls like Label, TextBox can be dynamically created. Controls are typically added to the page on Page_Load method.Dynamically created controls need to be recreated on each postback. Otherwise, the controls will be lost and cannot be accessed from code behind.
In this example, I will create dynamically add a TextBox and a Label control to the form an then access the values of these controls on Button click.
Code for aspx page is below.
aspx page
  1. <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="AccessDynamicControl.aspx.cs" Inherits="WebApplication1.AccessDynamicControl" %>
  2. <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  3. </asp:Content>
  4. <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  5. <asp:Button ID="Button1" runat="server" Text="Continue" onclick="Button1_Click" />
  6. </asp:Content>
A Label and a TextBox control are created on Page_Load method. As can be seen, the controls are added, each time the Page_Load method is run.
Page_Load method
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3.     Label l = new Label();
  4.     l.ID = "Label1";
  5.     l.Text = "some text";
  7.     TextBox t = new TextBox();
  8.     t.ID = "TB1";
  10.     this.Form.Controls.Add(l);
  11.     this.Form.Controls.Add(t);
  12. }
When the Button is clicked, dynamically created Label and TextBox controls are accessed and the Text value of these controls are displayed on the page.
OnClick event
  1. protected void Button1_Click(object sender, EventArgs e)
  2. {
  3.     Label l2 = (Label)this.Form.FindControl("Label1");
  4.     TextBox t2 = (TextBox)this.Form.FindControl("TB1");
  5.     Response.Write("Label" + l2.Text + " TextBox: " + t2.Text);
  6. }
Reference: Shahed Kazi at