Web Formuláre v ASP.NET

18. dubna 2002

•

Web Formuláre (Web Forms) sú bezpochyby jedným zo základných programových modelov v .NET Frameworku. V tomto článku sa pokúsime vysvetliť, čo vlastne Web Formuláre sú, aspoň rámcovo objasniť ako fungujú, a pokúsime sa tiež vytvoriť náš prvý web formulár.

Na úvod krátke opakovanie. Ako už bolo povedané, v predchádzajúcom článku (Otáznik menom ASP.NET), ASP.NET je nová technológia firmy Microsoft, slúžiaca na tvorbu web aplikácií v prostredí .NET Frameworku. Rovnako bolo povedané, že Web Formuláre a Web Služby (Web Services) sú dvomi základnými programovými modelmi, ktoré v ASP.NET existujú. V tomto článku sa pokúsme podrobnejšie pozrieť na Web Formuláre.

Čo presne Web Formuláre sú?

Web Formuláre sú novou technológiou, novým programovým modelom, slúžiacim na tvorbu plne programovateľných web stránok. Pokúsim sa to vysvetliť pomocou porovnania programového modelu klasického ASP a programového modelu pri Web Formulároch.

Základom programového modelu pri klasickom ASP (Active Server Pages) je myšlienka dynamického generovania HTML kódu na strane web servera, kontrolovaného pomocou skriptov vložených do HTML kódu danej web stránky. Zjednodušene povedané, ASP procesor číta ASP stránku, vyberá z nej časti so skriptami, ktoré je potrebné vykonať na strane servera. Tieto skripty vykoná a výsledný HTML kód vloží na miesto, kde predtým bol daný skript, do generovanej HTML stránky, ktorá je následne odoslaná klientovi. Teda možno povedať, že klasická ASP stránka je HTML stránka, do ktorej je vložený určitý programový kód.

Základom programového modelu pri Web Formulároch je idea web stránky ako plne programovateľného objektu existujúceho na serveri, vytvoreného zo znovupoužiteľných a plne programovateľných komponentov (ovládacích prvkov, controls), ktorého výstupom je HTML kód danej stránky. Veľmi zjednodušene povedané, keď príde požiadavka od klienta na web stránku, realizovanú ako web formulár, ASP.NET engine zavolá objekt predstavujúci danú stránku (ak tento objekt ešte nebol vytvorený, tak ho predtým aj vytvorí), ten spracuje vstupné požiadavky a dynamicky vygeneruje výsledný HTML kód, ktorý je odoslaný späť klientovi. Možno teda povedať, že Web Formulár je ani nie tak HTML stránkou s vloženým programovým kódom, ale skôr serverovým komponentom, ktorého výstupom je na základe vstupných požiadaviek dynamicky generovaný HTML kód.

Programovanie web aplikácií pomocou použitia Web Formulárov sa podobá skôr programovaniu klasických Windows aplikácií, povedzme vo Visual Basicu, ako programovaniu klasických ASP stránok. Je potrebné zvládnuť mnohé nové veci, je iste potrebné vedieť niečo o objektovom programovaní a tak ďalej. Na druhej strane však treba povedať, že mnohé veci, najmä čo sa týka podkladovej infraštruktúry, sú automaticky realizované či už .NET Frameworkom alebo ASP.NET vykonávacím prostredím, čo prípadnú zložitosť výrazne znižuje.

Napríklad pri bežnom vytváraní Web Formulárov sa nemusíme starať o to ako, kto a kedy presne zavolá prekladač, ktorý preloží programový kód formulára a podobne. A ak vytvárame web stránky pomocou vizuálneho programovacieho nástroja, ako je napríklad VisualStudio.NET, tak potom celá vec môže byť až neuveriteľne jednoduchá.

Web Formuláre umožňujú vytvárať na prehliadači nezávislé web aplikácie, keďže web formulár i jednotlivé ovládacie prvky sú schopné generovať výstupný HTML kód podľa typu klienta/prehliadača, ktorý o daný kód žiada. Web Formuláre tiež automaticky zabezpečujú riadenie a uchovávanie stavových informácií (state management) stránky, pričom je tu podpora i pre web farmy.

Z hľadiska programátora je iste nezanedbateľným i fakt, že pri Web Formulároch je možné plne oddeliť užívateľské rozhranie web stránky a jej programový kód. A to som nespomenul ešte ďalšie veci, ako je silná podpora vyrovnávacej pamäti („cache“) či skvelé možnosti ladenia a trasovania („debugging and tracing“).

Prvý Web Formulár

Skúsme napísať jednoduchý konvertor teploty zo stupňov Celsia na stupne Fahrenheita. Jednoduchá web aplikácia, pozostávajúca z jediného Web Formulára, uložená do jediného súboru, napríklad s názvom KonvTeploty.aspx, ktorý by mohol vyzerať napríklad takto:

<html>
  <body>
    <form runat=“server“>
      <asp:TextBox ID=“Celsius“ Width=“50″ RunAt=“server“ />
      <asp:Button Text=“ Celsius -> Fahrenheit “ OnClick=“OnConvert“
RunAt=“server“ />
      <asp:Label ID=“Fahrenheit“ RunAt=“server“ />
    </form>
  </body>
</html>
<script language=“C#“ runat=“server“>
  void OnConvert (Object sender, EventArgs e)
  {
      try {
            int a = Convert.ToInt32 (Celsius.Text);
            Fahrenheit.Text = ((a * 1.8) + 32.0).ToString();
      }
      catch (FormatException) {
            Fahrenheit.Text = „CHYBA! Nemožno konvertovať zadanú hodnotu!“;
      }
  }
</script>

Web Formulár pozostáva vo všeobecnosti z dvoch častí. Prvou časťou je vizuálna stránka Web Formulára, ktorá tvorí tak povediac užívateľské rozhranie daného Web Formulára. Sú tu HTML tagy, vytvárajúce vlastnú stránku, a tiež sú tu definície troch serverových ovládacích prvkov, konkrétne ide o TextBox, Button a Label. Tu by som poznamenal, že takýmto jednoduchým deklaratívnym spôsobom vkladáme do stránky plnohodnotné programovateľné objekty (ktorých triedy sú definované vo Framework Class Library v mennom priestore „System.Web.UI.WebControls“), ktoré majú svoje vlastnosti a metódy a sú schopné reagovať na definované udalosti. Napríklad pri deklarácii ovládacieho prvku Button nastavujeme jeho vlastnosť Text (čo je nápis na tlačidle) a určujeme tiež, že ak užívateľ klikne myšou na tomto ovládacom prvku, tak sa má zavolať naša užívateľská funkcia OnConvert, ktorá je súčasťou kódu daného web formulára. O tejto vizuálnej časti Web Formulára sa všeobecne hovorí ako o stránke (page) a je uložená na web serveri v súbore s príponou .aspx.

Druhou časťou Web Formulára je jeho programový kód, ktorý slúži na definovanie toho, akým spôsobom sa má stránka správať, ako má reagovať na akcie užívateľa. V našom prípade ide o serverový skript obsahujúci definíciu metódy OnConvert, jediného event handlera, ktorý na danom Web formulári definujeme. V podstate ide o metódu písanú v jazyku C#, ktorá najprv prečíta hodnotu zadanú vo vstupnom poli, ktoré má identifikátor Celsius. Túto hodnotu sa pokúsi konvertovať na číselný typ Integer. Následne sa pomocou danej hodnoty vypočíta podľa známeho vzorca ekvivalentná teplota v stupňoch Fahrenheita. Táto vypočítaná hodnota sa konvertuje na textový reťazec, ktorý sa potom priradí do vlastnosti Text ovládacieho prvku Label, čím sa zobrazí na stránke. Naviac je tu ešte elementárne ošetrenie chyby, pre prípad, že by niekto chcel zadať do vstupného políčka hodnotu, ktorú nie je možné skonvertovať na celé číslo. V takom prípade jednoducho odchytíme výnimku FormatException, vznikajúcu pri konverzii, a vypíšeme vlastné chybové hlásenie.

Po vytvorení kódu môžeme vytvoriť niekde na disku adresár pokusy, urobiť z tohoto adresára IIS virtual directory (napríklad pomocou programu Internet Services Manager, ktorý je v Start menu pod Administrative tools), a daný súbor KonvTeploty.aspx, vytvorený napríklad pomocou Notepadu, skopírovať do neho. Alternatívou je vytvoriť adresár pokusy niekde pod „\InetPub\wwwroot\“ a potom nemusíme vytvárať „IIS virtual diectory“, keďže adresár „„\InetPub\wwwroot\““ sa ako „IIS virtual diectory“ vytvorí pri inštalácii IIS. No a potom by malo stačiť v prehliadači ako URL zadať http://localhost/pokusy/calc.aspx a mali by ste vidieť niečo takéto:

Do vstupného políčka možno zadať celé číslo udávajúce teplotu v stupňoch Celsia a po stlačení tlačidla „Celsius -> Fahrenheit“ dostaneme ekvivalentnú teplotu v stupňoch Fahrenheita. Ak zadáme niečo iné ako celé číslo, tak dostaneme chybu.

Ako to celé funguje?

Web prehliadač požiada o .aspx stránku a web server, vzhľadom na to, že ide o Web Formulár, odovzdá vybavenie tejto veci ASP.NET enginu. ASP.NET engine si vytvorí dočasný súbor, do ktorého dynamicky vygeneruje zdrojový kód triedy odvodenej od triedy System.Web.UI.Page. Táto trieda bude reprezentovať daný Web Formulár.

ASP.NET engine analyzuje web formulár, ktorý bol požadovaný, a na základe vecí, ktoré takto zistí, upraví definíciu triedy daného web formulára, ktorú vygeneroval v predchádzajúcom kroku. Napríklad v prípade nášho web formulára by sa naša metóda OnConvert stala priamo členskou metódou danej novovytváranej triedy atď. Tak sa vlastne zaistí, aby novovygenerovaná trieda, ktorá predstavuje daný Web Formulár, obsahovala okrem všetkých potrebných vecí týkajúcich sa .NET a ASP.NET infraštruktúry, i všetky veci, ktoré sme na danom Web Formulári definovali užívateľsky my.

ASP.NET kompiluje novo vytvorenú triedu a výsledkom kompilácie je DLL súbor obsahujúci IL kód. Metadáta komponentu, predstavujúceho daný Web Formulár, umiestni do príslušného systémového adresára. Tu poznamenajme, že ak už v danom systémovom adresári existuje aktuálna verzia DLL súboru pre daný formulár, tak celá kompilácia vynecháva.

ASP.NET vytvorí v pamäti inštanciu novovytvorenej triedy reprezentujúcej požadovaný Web Formulár a realizuje sériu volaní jej metód, čím sa daný Web Formulár najprv inicializuje, spracovávajú sa stavové dáta a prebiehajú ďalšie procesy vrátane toho, že Web Formulár reaguje na príslušné udalosti, ktoré užívateľ prípadne inicioval na stránke. V rámci týchto procesov daná novovytvorená trieda tiež vytvára inštancie vložených ovládacích prvkov, ktoré generujú svoju vlastnú HTML reprezentáciu, a k tomuto HTML kódu pridáva Web Formulár potom ešte ďalší vlastný HTML kód, čím sa vytvorí konečný HTML výstup, ktorý sa odošle späť na klienta.

Výsledný zdrojový kód, ktorý dostane klient, je jednoduché vidieť (stačí si v prehliadači pozrieť zdrojový kód výslednej stránky). Tu možno vidieť, ako jednotlivé ovládacie prvky generujú svoju vlastnú HTML reprezentáciu. Napríklad, že ovládací prvok Label je v tomto prípade realizovaný pomocou HTML elementu <span>.

Ak vám napadlo, že by nebolo zlé pozrieť sa, ako vyzerá výsledný DLL súbor, ktorý ASP.NET engine vygeneruje, tak je to samozrejme možné. Môžete ho nájsť niekde pod adresárom „system_root/Microsoft.NET/Framework/vnn.n.nnnn/Temporary ASP.NET Files/root/” („nn.n.nnnn“ je aktuálne číslo verzie Frameworku, ktorý aktuálne používate, pri release verzii to je „1.0.3705“). Tam musíte nájsť .dll súbor obsahujúci triedu KonvTeploty_aspx, odvodenú od triedy Page. Asi najlepšie je urobiť nejakú zmenu na stránke, a znovu ju zobraziť v prehliadači. Tým sa hľadaný .dll súbor znovu rekompiluje a možno ho nájsť podľa aktuálneho času vytvorenia súboru. Tento .dll súbor si možno následne pozrieť pomocou ILDASM utility z .NET Framework SDK alebo pomocou Reflector (Aisto.com) utility od Lutza Roedera.