Ovládací prvek TextBox

Ovládací prvek TextBox se umisťuje na stránku následovně:

<asp:TextBox ID="Nazev" Runat="server" />

Třída System.Web.UI.WebControls.TextBox tohoto prvku má mimo jiné následující významné vlastnosti:

Typ vlastnosti	Název vlastnosti	Přístup k vlastnosti	Význam vlastnosti
bool	AutoPostBack	get/set	Zda se má stránka automaticky odeslat na server, jakmile uživatel modifikuje text v poli. Stránka se však odešle až po ztrátě zaměření.
int	Columns	get/set	Šířka textového pole v počtu znaků.
int	MaxLength	get/set	Maximální počet znaků v textovém poli.
bool	ReadOnly	get/set	Zda je jen pro čtení a nelze tedy modifikovat text v textovém poli.
int	Rows	get/set	Počet řádků ve víceřádkovém textovém poli.
string	Text	get/set	Text v textovém poli.
TextBoxMode	TextMode	get/set	Režim textového pole. Může být SingleLine, což je výchozí hodnota, MultiLine, nebo Password.
bool	Wrap	get/set	Zda se má zalamovat text.

Kromě těchto vlastností dědí třída TextBox celou řadu vlastností z tříd System.Web.UI.Control a System.Web.UI.WebControls.WebControl. Zastavme se u těch nejpouživanějších (některé další zmíníme u vlastních ovládacích prvků):

Typ vlastnosti	Název vlastnosti	Přístup k vlastnosti	Význam vlastnosti
string	CssClass	get/set	Třída v CSS pro daný prvek.
bool	Enabled	get/set	Zda je prvek přístupný.
bool	EnableViewState	get/set	Zda se bude uchovávat obsah objektu mezi jednotlivými odesláními na server.
Unit	Height	get/set	Výška prvku.
CssStyleCollection	Style	get	Kolekce stylů pro daný prvek.
Unit	Width	get/set	Výška prvku.
bool	Visible	get/set	Zda je prvek viditelný.

Ukažme si, jak se přeloží do HTML textové pole s určitými vlastnostmi:

V ASP.NET:

<asp:TextBox ID="Jmeno" Runat="server" Width="200px" />

Po přeložení do HTML:

V ASP.NET:

<asp:TextBox ID="Heslo" Runat="server" TextMode="Password" Width="200px" />

Po přeložení do HTML:

V ASP.NET:

<asp:TextBox ID="Zprava" Runat="server" TextMode="MultiLine" Rows="10" Columns="30" />

Po přeložení do HTML:

Třída TextBox má veškeré veřejné metody zděděné z nadřazených tříd. Budeme se jim věnovat při vytváření vlastních ovládacích prvků.

Třída TextBox má jedinou nezděděnou událost TextChanged:

Název události	Delegát události	Argument události	Význam události
TextChanged	EventHandler	EventArgs	Pokud se text změnil mezi dvěma odesláními na server.

Ukažme si, jak se řeší spuštění události v textovém poli:

TextBoxSAutoPostBack.aspx

<%@ Page language="c#" Codebehind="TextBoxSAutoPostBack.aspx.cs" AutoEventWireup="false" Inherits="WeboveOvladaciPrvky.TextBoxSAutoPostBack" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
   <HEAD>
      <title>TextBox s AutoPostBack</title>
      <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
      <meta name="CODE_LANGUAGE" Content="C#">
      <meta name="vs_defaultClientScript" content="JavaScript">
      <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
   </HEAD>
   <body MS_POSITIONING="GridLayout">
      <form id="Form1" method="post" runat="server">
         Testovací textové pole:
         <asp:TextBox ID="TestovaciTextovePole" Runat="server" AutoPostBack="True" />
         <br>
         <asp:Label ID="OvereniZadani" Runat="server" />
      </form>
   </body>
</HTML>

TextBoxSAutoPostBack.aspx.cs

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace WeboveOvladaciPrvky
{
   public class TextBoxSAutoPostBack : System.Web.UI.Page
   {
      protected System.Web.UI.WebControls.TextBox TestovaciTextovePole;
      protected System.Web.UI.WebControls.Label OvereniZadani;

      private void Page_Load(object sender, System.EventArgs e)
      {
         // Put user code to initialize the page here
      }

      #region Web Form Designer generated code
      override protected void OnInit(EventArgs e)
      {
         //
         // CODEGEN: This call is required by the ASP.NET Web Form Designer.
         //
         InitializeComponent();
         base.OnInit(e);
      }

      /// <summary>
      /// Required method for Designer support - do not modify
      /// the contents of this method with the code editor.
      /// </summary>
      private void InitializeComponent()
      {
         this.TestovaciTextovePole.TextChanged += new System.EventHandler(this.TestovaciTextovePole_TextChanged);
         this.Load += new System.EventHandler(this.Page_Load);

      }
      #endregion

      // Při změně textu v textovém poli:
      private void TestovaciTextovePole_TextChanged(object sender, System.EventArgs e)
      {
         OvereniZadani.Text = "Zadali jste: " + TestovaciTextovePole.Text;
      }
   }
}

Spusťte stránku, která bude vypadat podobně jako na tomto obrázku:

Napište text a zadejte Enter podobně, jako to děláte na vyhledávacích portálech. Stránka pak bude vypadat následovně:

Určitě jste také postřehli, že se stránka mezi tím poslala na server, ten stránku zpracoval a poslal jinou HTML stránku. Jak ale probíhá takové odeslání? Vždyť v HTML (resp. v DHTML) se řeší odeslání pomocí prvku <input type="submit"> (resp. pomocí funkce submit() formuláře). A takovým způsobem ASP.NET překládá svůj kód do HTML, což můžeme zjistit při zobrazení zdrojového kódu:

Zde jsou zajímavá místa:

V HTML prvku je atribut s událostí onchange v klientském skriptovacím jazyce JavaScript. Událost volá funkci __doPostBack s 1. argumentem tvořícím identifikátor tohoto prvku a s 2. argumentem reprezentujícím prázdný řetězec:

<input name="TestovaciTextovePole" type="text" value="Ahoj" onchange="__doPostBack('TestovaciTextovePole','')" language="javascript" id="TestovaciTextovePole" />
Funkce __doPostBack je v dokumentu definována v JavaScriptu:

Na straně serveru se získají hodnoty se skrytých polí a může dojít ke zpracování.

V tomto příkladu si všimněme ještě jednoho zjímavého místa. Je zde další skryté pole s názvem __VIEWSTATE. V jeho hodnotě je zakódována hodnota všech ovládacích prvků stránky, které mají nastavenu vlastnost EnableViewState na true. Pomocí tohoto pole si prvky ukládají svůj stav mezi dvěma odesláními na server a zpět ke klientovi.