Klientské skripty v ASP.NET

spigi - 29. 10. 2004 22:47 - 9217 views

Pri práci so serverovými technológiami ako je ASP, PHP, ASP.NET programátori nemôžu priamo zo serverových skriptov ovládať dynamické chovanie klientského prehliadača. Vždy je nutné do samotného html kódu ešte pridať sadu JavaScriptov, aby bola táto rozšírená funkčnosť dosiahnutá.

Tu je nutné pochopiť principiálne rozdiely medzi serverovým a klientským kódom. Serverový kód je spracovávaný na serveri a klientskému prehliadaču príde ako výsledok požiadavky vždy len čistý HTML kód. ASP.NET rieši komunikáciu užívateľa so serverom pomocou WebForms a týmto spôsobom môžu byť volané rôzne události na strane servera. Nie vždy je však efektívne, aby pri "kažnom kliku" užívateľa na web stránke, bola táto stránka odosielaná na server a tam spracovávaná.

PostBack

ASP.NET poskytuje vývojárom jednoduché riešenie, ako pridať do web aplikácií základnú interaktivitu v podobe jednoduchých JavaScriptov. Ak vložíme na stránku napríklad DropDownList, nastavíme mu vlastnosť AutoPostBack=True, formulár po výbere položky v zozname DropDownList-u bude odoslaný na server a bude vyvolaná událosť na strane servera DropDownList.SelectIndexChanged().
Funguje to tak, že serverovský komponent DropDownList vygeneruje do HTML stránky okrem samotnýho HTML prvku SELECT aj sadu JavaScript-ov, ktoré sa starajú o potrebnú funkcionalitu (samotné odoslanie formulára na server).

Sú tu však aj nevýhody tohoto riešenia. Pri každom vyvolanom PostBack-u musí byť na server odoslaný celý formulár (obsah všetkých TextBox-ov, DropDownList-ov, atd..), čo znížuje výkon aplikácie.

Vlastné klienstké skripty

Ak však potrebujeme v závislosti na nejakom stave aplikácie zobraziť užívateľovi v jeho klientskom prehliadači dialógové okno, potvrdzovacie okno, nastaviť fokus do nejakého textového políčka vo formulári a podobne, musíme do výslednej HTML stránky vložiť klientský skript. Na takéto vkladanie skriptov do HTML nám ASP.NET ponúka nikoľko možností.

RegisterClientScriptBlock(key, script)
MSDN Source

Táto metóda objektu Page pridáva klientský skript tesne za tag daného formulára, pred ostatné prvky formulára vo WebForm. Je užitočná napríklad v situácii, keď sa chceme po stlačení tlačítka "Objednať" v objednávkovom formulári opýtať, či chceme naozaj odoslať objednávku. Ak užívateľ stlačí Ano, formulár sa odošle, v opačnom prípade nie.

   key - unikátny identifikátor daného bloku so skriptom

   Tento kľúč nie je veľmi dôležitý, využíva sa najmä v komponentách, ktoré generujú klientské skripty. Predstavme si situáciu, že máme na stránke nejakú komponentu viac krát, ktorá generuje klienský kód. Za normálnych okolností by sa do výslednej stránky vygeneroval ten istý klienstký kód tiež viac krát, to však nie je veľmi dobré. Takto, pokiaľ je nastvený kľúč daného skriptu, tak sa skipt vloží do stránky pri generovaní prvej instancie danej komponenty, pretože pred vložením skriptu touto metódou sa väčšinou ešte kontroluje, či už daný skript nebol generovaný (IsClientScriptBlockRegistered(key)). Dobrým príkladom môžu byť validačné komponenty, ktoré kontrolujú správnosť vyplnenia položiek vo formulári. Zvyčajne je ich vo formulári hneď niekoľko, pričom všetky využívajú iba jeden zdieľaný klientský skript.

   script - kompletný JavaScript, ktorý bude vložený do stránky

Príklad:

RegisterClientScriptBlock("showAlert", "<script language=""javascript"">alert('Hello world!')</script>")

Toto klientské okno sa zobrazí tesne po načítaní začiatku web stránky ešte pred načítaním ostatných komponent vo formulári, čiže užívateľ vidí pod týmto dialogovým oknom prázdny prehiadač, ktorý bude v naťahovaní stránky pokračovať až po odklepnutí tejto hlášky. Toto chovanie môžeme vyriešiť použiťím metódy RegisterStartupScript(key, script).

IsClientScriptBlockRegistered(key)
MSDN Source

Táto metóda vracia Boolean hodnotu, ktorá udáva, či je alebo nie je zaregistrovaný klientský skript s daným kľúčom.

RegisterStartupScript(key, script)
MSDN Source

Metóda RegisterStartupScript je veľmi podobná metóde RegisterClientScriptBlock. Rozdiel je v tom, že výsledný klienstký kód je generovaný nie na začiatok formulára, ale tesne pred tag </form>, čiže za všetky komponenty vložené vo formulári. Použijeme ju v prípade, že v skripte pracuje s vyrenderovanými HTML elementami. Samozrejme, ak chceme overiť, či už existuje v stránke daný skript použijeme metódu IsStartupScriptRegistered (MSDN Source).

RegisterArrayDeclaration(arrayName, arrayValue)
MSDN Source

ASP.NET nám pomáha tiež pri generovaní deklarácií polí v JavaScripte. Na to slúži metóda RegisterArrayDeclaration.

Príklad:

RegisterArrayDeclaration("MyNewArray", "1")

RegisterArrayDeclaration("MyNewArray", "2")

RegisterArrayDeclaration("MyNewArray", "3")

Predchádzajúci kód vygeneruje následujúci JavaScript:

<!--

var MyNewArray = new Array(1, 2, 3);

// -->

</script>

RegisterHiddenField(hiddenFieldName, hiddenFieldValue)
MSDN Source

Táto metóda je podobná od predchadzajúcej, avšak negeneruje JavaScript kód ale "skryté textové políčko". Takéto skryté políčko sa hodí, ak chceme odosielať spolu s formulárom aj ďalšie informácie na server.

Príklad:

RegisterHiddenField("MyNewHiddenField", "MyValue")

Predchádzajúci kód vygeneruje vnútri form elementu následujúci html kód:

Základný prehľad metód zjednodušujúcich generovanie klientského kódu vo výstupe máme za sebou a niekedy v ďalšom článku si ukážeme na konkrétnych príkladoch praktické využitie.

Titulok:
Meno:
Url:
Koľko je 22 + 4? (ochrana proti spamu)
Komentár:	Zapamätať meno a url

Diskusia, posledné príspevky

Hladame JAVA Developerov/ Programatorov, dlhodoba pr…

RE: Webová služba a abstraktní dotazovací jazyk

RE: Aku exception thrownut?

Aku exception thrownut?

RE: EF DbSet

RE: Webová služba a abstraktní dotazovací jazyk

Webová služba a abstraktní dotazovací jazyk

RE: EF DbSet

Programator ASP.NET MVC - Zilina

RE: Programátor na VoIP riešenia, call centrá, ústre…

RE: D&D from ZIP

RE: D&D from ZIP

RE: D&D from ZIP

RE: CQRS a query reuse

RE: D&D from ZIP

Klientské skripty v ASP.NET

Reakcie

Najaktívnejší užívatelia