Tvorba strßnek v ASP.NET

Z°ejm∞ znßte klasickΘ HTML tagy form, input atp. Pomocφ nich nejΦast∞ji probφhß komunikace sm∞rem od klienta k serveru - je to ale vÜechno takovΘ chaotickΘ. Jak u₧ jsme si °φkali, slu₧ba WWW je bezstavovß. Server absolutn∞ netuÜφ, co se tam u klienta d∞je, prost∞ jenom p°ijφmß obecnΘ po₧adavky na strßnky. Tento problΘm se °eÜφ n∞kolika zp∙soby.

Cookies jsou malΘ textovΘ soubory, kterΘ si m∙₧e webovß strßnka (a to jak server pomocφ HTTP hlaviΦky, tak klientsk² skript) ulo₧it na disku u₧ivatele. Webov² prohlφ₧eΦ bude obsah tohoto souboru zasφlat s ka₧d²m dalÜφm po₧adavkem na strßnku z tΘto domΘny a tφm m∙₧e server vcelku bezpeΦn∞ rozpoznat, s jak²m u₧ivatelem mß tu Φest. Programßtor si ale musφ vÜe obstarat sßm a navφc, a to je mo₧nß horÜφ, si mnoho u₧ivatel∙ ze strachu p°ed neexistujφcφmi bezpeΦnostnφmi hrozbami cookies vypφnß.

Sessions je technologie pracujφcφ na zßklad∞ cookies, ale obsahuje mnohß zajφmavß vylepÜenφ. P°edn∞ to, ₧e u klienta se uklßdß jenom SessionID, co₧ je °et∞zec, kter² u₧ivatele jednoznaΦn∞ identifikuje - vÜechna data se tak skr²vajφ na serveru. To mß dv∞ p°ednosti - m∙₧eme tak dob°e identifikovat p°ihlßÜenΘho u₧ivatele bez bezpeΦnostnφch rizik a navφc je prßce se sessions o n∞co snadn∞jÜφ ne₧ s cookies. Navφc sessions ani nemusφ vy₧adovat zapnutΘ cookies - jedin² pot°ebn² °et∞zec lze skr²t do URL (webovΘ adresy) ka₧dΘ volanΘ strßnky - to u₧ lepÜφ technologie jako PHP a ASP.NET d∞lajφ automaticky.

Zatφmco kolßΦky (cookie znamenß Φesky kolßΦek) se b∞₧n∞ u₧φvajφ k dlouhodob∞jÜφmu uklßdßnφ ·daj∙ u klienta (na n∞kter²ch webech se nap°φklad uklßdß, kdy dan² nßvÜt∞vnφk navÜtφvil tu kterou diskuzi a p°i p°φÜtφ nßvÜt∞v∞ se zobrazuje ·daj "12 nov²ch p°φsp∞vk∙"), pomocφ sessions se b∞₧n∞ °e₧φ p°ihlaÜovßnφ, u kterΘho je obvyklß hodnota vyprÜenφ platnosti kolem dvaceti minut.

Oba dva systΘmy jsou vcelku u₧iteΦnΘ a jednou si je po°ßdn∞ probereme.

Pßr drobnostφ

VÜechny p°φklady z tohoto dφlu najdete v ZIP archivu na tomto CD. M∙₧ete si je takΘ okam₧it∞ vyzkouÜet na www.czech-ware.net/lansky/CHIP/4/priklady.html.

WebovΘ formulß°e

<%@ Page Language="VB" Debug="True" %>
<%@ Import Namespace="System.Drawing" %>

<SCRIPT RUNAT="server">
   Sub ZmenText(obj As Object, e As EventArgs)
      popisek.Text = "Stisknul jste tlaΦφtko."
   End Sub
</SCRIPT>

<HTML>

<HEAD>
<TITLE>Programovßnφ v ASP.NET</TITLE>
</HEAD>

<BODY>
<FORM RUNAT="server">
<ASP:Label ID="popisek" RUNAT="server" Text="Nic se nestalo..." />
<ASP:Button ID="tlacitko" TEXT="Odeslat" OnClick="ZmenText"
   RUNAT="server" />
</FORM>
</BODY>

</HTML>

Poznßvßte tento k≤d? P°ed dv∞ma m∞sφci jsme ho pou₧φvali pro zb∞₧nΘ nakouknutφ do systΘmu webov²ch formulß°∙ (Web Forms). Nynφ budeme pokraΦovat.

Serverov² ovlßdacφ prvek je vlastn∞ objekt, kter² je v ASP.NET umis¥ovßn p°φmo do HTML k≤du. Jako ka₧d² jin² objekt m∙₧e mφt i tento vlastnosti, metody a udßlosti, se kter²mi m∙₧eme pracovat z programovΘho k≤du.

Tyto objekty se nachßzejφ v BCL .NET Framoworku v prostoru nßzv∙ System.Web.UI.WebControls (viz WebControls v SDK nebo v MSDN). "O kousek dßl" najdeme prostor nßzv∙ System.Windows.Forms, ve kterΘm jsou vÜechny pot°ebnΘ ovlßdacφ prvky pro libovolnou klientskou aplikaci - opravdu nenφ d∙vod d∞lat rozdφly mezi serverov²mi a klientsk²mi programy.

Pokud chceme vlo₧it ovlßdacφ prvek do strßnky, m∞li bychom ho uzav°φt do tagu <FORM RUNAT="server">. Pokud to tak neud∞lßme, m∙₧e nßm to ASP.NET oznßmit chybovou hlßÜkou, nebo se takΘ m∙₧e tvß°it jako ₧e se nic ned∞je a p°itom to nemusφ fungovat. Ka₧d² serverov² ovlßdacφ prvek by m∞l mφt atribut runat="server", aby ho server rozpoznal jako n∞co, s Φφm by si m∞l d∞lat starosti. A nesmφme zapomenout na atribut ID, pomocφ kterΘho m∙₧eme s vlastnostmi a metodami prvku pracovat z programovΘho k≤du.

Pßr drobnostφ

Na tomto mφsto by mo₧nß bylo zßhodno uvΘst pßr u₧iteΦn²ch v∞cφ souvisejφcφch s webov²mi formulß°i.

V mnoha k≤dech na Internetu nap°φklad naleznete vlastnost objektu Page IsPostBack. V∞tÜinou se jedna o podmφnky If Not Page.IsPostBack Then... Tφmto se testuje, zda byla strßnka u₧ivatelem vy₧ßdßna poprvΘ (v rßmci aktußlnφho stavu) nebo jestli u₧ s nφ u₧ivatel pracuje (tj. kliknul na n∞jakΘ tlaΦφtko atp.) ObΦas je to t°eba - n∞kterΘ operace je zßhodno vykonat jen jednou, p°i vstupu na strßnku. ZvlßÜ¥ pokud jsou Φasov∞ nßroΦnΘ.

Mo₧nß vßs napadlo, jestli by nebylo mo₧nΘ, aby si sßm programßtor n∞co ulo₧it do stavovΘho °et∞zce (viewstate). Samoz°ejm∞ to jde - pou₧φvß se k tomu prom∞nnß ViewState. Zßpis n∞jakΘho ·daje provßdφme takto:

ViewState("Pocet_dni") = 139

Analogicky Φtenφ dat:

neco.Value = ViewState("Pocet_dni")

Chcete-li o ViewState v∞d∞t jeÜt∞ vφc, p°eΦtete si jeden velmi dobr² Φlßnek na ASPNetwork.cz.

P°ehled zßkladnφch ovlßdacφch prvk∙

S prvkem Label jsme se ji₧ seznßmili. Slou₧φ k zobrazovßnφ textu, po nastavenφ parametru Text "vyplivne" tutΘ₧ hodnotu obklopenou tagem SPAN.

Ovlßdacφ prvek TextBox u₧ je zajφmav∞jÜφ. Pou₧ijeme-li ho, stane se z n∞j na strßnce klasick² element INPUT (s parametrem type="text") Φekajφcφ na u₧ivatel∙v vstup. Ten se nßm po odeslßnφ formulß°e objevφ ve vlastnosti Value.

Button funguje jako atribut INPUT s parametrem type="submit" - jde tedy o jednoduchΘ odesφlacφ tlaΦφtko. Parametr TEXT u n∞j nabφzφ volbu popisku tohoto tlaΦφtka. Nesmφrn∞ Φasto u n∞j budeme u₧φvat metody OnClick, kterou oÜet°φme u₧ivatelovo odeslßnφ danΘho formulß°e.

Kup°φkladu:

<%@ Page Language="VB" Debug="True" %>

<HTML>

<HEAD>
<TITLE>P°φklad</TITLE>
</HEAD>

<BODY>

<SCRIPT RUNAT="server">
   Sub napsal(obj As Object, e As EventArgs)
      popisek.Text = "Napsal jsi mi: <i>" + vstup.Text + "</i>"
   End Sub
</SCRIPT>

<form runat="server">
<ASP:Label ID="popisek" Text="ProΦ nepφÜeÜ? :-(" RUNAT="server" /><br><br>
<ASP:TextBox ID="vstup" RUNAT="server" />
<ASP:Button ID="tlacitko" TEXT="Odeslat" OnClick="napsal" RUNAT="server" />
</form>
   
</BODY>

</HTML>

Tento p°φklad demonstruje pou₧itφ vÜech t°ech zmφn∞n²ch prvk∙ - TextBox od u₧ivatele sebere informace, Button ji odeÜle a spustφ urΦenou proceduru napsal a ta nastavφ prvku Label pot°ebn² text.

P∙jdeme dßle. Prvek CheckBox vytvß°φ klasickΘ zatrhßvacφ tlaΦφtko (podobn∞ jako input type="checkbox"). Jeho zaÜkrtnutφ m∙₧eme nastavovat Φi kontrolovat pomocφ vlastnosti Checked a popisek m∙₧eme nastavit vlastnostφ Text.

RadioButton vlo₧φ do v²slednΘho HTML dokumentu p°epφnaΦ - to je zatrhßvacφ tlaΦφtko, kterΘ se objevuje ve skupin∞, p°iΦem₧ zatr₧eno m∙₧e b²t jen jedno. Op∞t tu mßme vlastnosti Checked a Text.

Chceme-li vytvo°it vφce skupinek s RadioButtony, pot°ebujeme zajistit, aby se nßm jednotlivß tlaΦφtka p°epφnala sprßvn∞ uvnit° odd∞len²ch skupin. K tomu je v²hodn² serverov² ovlßdacφ prvek RadioButtonList. Polo₧ky budou tvo°it ovlßdacφ prvky typu ListItem. Vybranou polo₧ku m∙₧eme identifikovat pomocφ objektu SelectedItem. Jeden p°φklad vydß za tisφc slov:

<%@ Page Language="VB" Debug="True" %>

<HTML>

<HEAD>
<TITLE>P°φklad</TITLE>
</HEAD>

<BODY>

<SCRIPT RUNAT="server">
   Sub odeslano(obj As Object, e As EventArgs)
      popisek.Text = "Zvolen² v∞k: <i>" + prepinatka.SelectedItem.Text + "</i>"
   End Sub
</SCRIPT>

<form runat="server">
<asp:Label id="popisek" runat="server" />
<asp:RadioButtonList id="prepinatka" runat="server">
   <asp:ListItem> < 18 </asp:ListItem>
   <asp:ListItem> 18-25 </asp:ListItem>
   <asp:ListItem> 25-35 </asp:ListItem>
   <asp:ListItem> 35-50 </asp:ListItem>
   <asp:ListItem> 50-60 </asp:ListItem>
   <asp:ListItem> > 60 </asp:ListItem>
</asp:RadioButtonList>
<asp:Button id="tlacitko" text="Odeslat" runat="server" OnClick="odeslano" />
</form>

</BODY>

</HTML>

Podobn² seznam lze vytvo°it i s CheckBoxy za pomoci prvku CheckBoxList. Tam to ale nemß tak z°ejmΘ opodstatn∞nφ jako v tomto p°φpad∞.

HTML serverovΘ ovlßdacφ prvky

ServerovΘ ovlßdacφ prvky jsou dvojφho druhu - zatφm jsem p°edstavoval zßstupce toho prvnφho, tzv. webov²ch serverov²ch ovlßdacφch prvk∙. VyznaΦujφ se zßpisem typ <asp:Neco... a jsou schopny velmi pokroΦilΘho chovßnφ (nap°. prvek Calendar). Pak jsou tu takΘ dalÜφ, kterΘ se naz²vajφ serverovΘ ovlßdacφ prvky jazyka HTML.

Ty jsou zalo₧eny na standardnφm zßpisu HTML tag∙, nap°φklad ve tvaru <input type=..., je t°eba k nim vÜak p°ipojit jeÜt∞ parametr runat="server", aby byly v∙bec za serverovΘ prvky pova₧ovßny.

Jako p°φklad prvku tohoto typu si m∙₧eme uvΘst t°eba HtmlImage. S obyΦejn²m obrßzkem m∙₧eme po p°idßnφ atributu runat="server" spoustu v∞cφ - m∞nit jeho SRC (tak₧e jej m∞nit v jin²), zarovnßnφ, popisek, ohraniΦenφ atp. Proto₧e obrßzek sßm nemß ₧ßdnΘ udßlosti, musφme p°idat n∞co, s Φφm m∙₧eme ovlßdat chovßnφ p°φkladu - k tomu se dob°e hodφ prvek HtmlButton.

Pozor si musφme dßt na to, ₧e mφsto klasick²ch OnClick udßlostφ musφme pou₧φvat nßzvy OnServerClick atp. U HTML element∙ toti₧ m∙₧eme pou₧φvat jak skriptovßnφ serverovΘ, tak klientskΘ JavaScripty - jejich udßlosti je t°eba n∞jak odliÜit.

V tomto p°φkladu se po kliknutφ na odkaz zm∞nφ jeho text:

<%@ Page Language="VB" Debug="True" %>

<HTML>

<HEAD>
<TITLE>P°φklad</TITLE>
</HEAD>

<BODY>

<SCRIPT RUNAT="server">
   Sub klik(i As Integer)
      obrazek.src = i.ToString + ".gif"
   End Sub
</SCRIPT>

<img runat="server" id="obrazek"
   src="1.gif"><br>
<button runat="server" id="cudlik1"
   onServerClick="klik(1)">Obrßzek 1</button>
<button runat="server" id="cudlik2"
   onServerClick="klik(2)">Obrßzek 2</button>

</BODY>

</HTML>

Vlastnφ ovlßdacφ prvky

Velmi zajφmavß vlastnost t∞chto prvk∙ tkvφ v tom, ₧e si m∙₧ete vcelku snadno vytvo°it dalÜφ takovΘ a tak Üikovn∞ umφstit Φasto se opakujφcφ k≤dy ze sv²ch strßnek do externφch soubor∙.

Nejd°φve je t°eba vytvo°it soubor s p°φponou ascx, kter² bude mφt mφrn∞ modifikovanou hlaviΦku:

<%@ Control Language="VB" %>

Dßle v n∞m m∙₧eme libovoln∞ pracovat, jako v normßlnφ strßnce. Vstupnφ prom∞nnΘ m∙₧eme naΦφtat p°es deklaraci Public nazev As typ, kterß se bude nachßzet mimo vÜechny metody a obsluhy udßlostφ. Nap°φklad:

<script runat="server">
  Public cinitel1 As Integer
  Public cinitel2 As Integer
  
  Sub Page_Load(obj As object, e As EventArgs)
     vysledek.Text = (cinitel1 * cinitel2).ToString   
  End Sub
</script>

<asp:Label id="vysledek" runat="server" />

Vlastnφ soubor pak musφme do strßnky, ve kterΘ chceme tento prvek pou₧φt, vlo₧it pomocφ specißlnφ konstrukce:

<%@ Register TagPrefix="pocitani" TagName="nasobeni" src="nasob.ascx" %>

TagPrefix je text, kter² budeme pot°ebovat p°i volßnφ tohoto prvku - bude se nachßzet p°ed dvojteΦkou, to je tam, kde jsme zatφm vφdali pouze standardnφ asp.

TagName je vlastnφ identifikßtor prvku, dßvß se za dvojteΦku p°i volßnφ prvku.

Src samoz°ejm∞ urΦuje soubor, ve kterΘm jsme k≤d danΘho prvku schovali.

Tak₧e dan² externφ soubor budeme volat:

<pocitani:nasobeni id="nasobeni1" cinitel1="15" cinitel2="3" runat="server" />

Toto je samoz°ejm∞ celkem hloupΘ pou₧itφ tΘto technologie. Mnohem zajφmav∞jÜφ jsou mo₧nosti na v∞tÜφch webech, kde takto m∙₧eme automaticky vklßdat hlaviΦky Φi t°eba diskuze k jednotliv²m Φlßnk∙m... V²hodou takovΘhoto odklizenφ funkcφ do externφho souboru je to, ₧e si tak zp°ehlednφte k≤d strßnky a navφc urΦit∞ ocenφte mo₧nost zm∞nit k≤d jednoho prvku na sto strßnkßch b∞hem pßr sekund.

Zßv∞rem

Gratuluji, zvlßdli jste zßklady technologie ASP.NET. V p°φÜtφm dφle se nauΦφme naΦφtat data z textov²ch soubor∙ a troÜku si set°φdφme dosavadnφ znalosti p°i prvnφm pokusu o n∞jak² v∞tÜφ projekt - knihu nßvÜt∞v.

LukßÜ Lßnsk²
VeÜkerΘ nßm∞ty, dotazy a p°ipomφnky piÜte na adresu lansky@czech-ware.net.