Jak jsem začal používat ASP.net AJAX
6. srpna 2007 12:50
webové stránky
Konečně jsem se při programování webových aplikací dostal
k používání technologie ASP.net
AJAX. A musím přiznat, že práce s ní mě více než jen
potěšila.
Když jsem před několika dny začal programovat nové moduly do
interního webu akce Klíč 2008, které slouží
k zjednodušení řízení týmů připravujících tuto akci, došlo mi,
že pro něco takto obsáhlého již nadešel čas začít používat
AJAX. První místo, kde jsem se pro použití AJAXu rozhodl byl
adresář členů přípravného týmu. Nezačal jsem jen samotným základním
balíkem ASP.net AJAXu, ale rovnou jsem si nainstaloval Control Toolkit. Ten
obsahuje velké množství AJAX objektů a extenderů, které uživatelům
internetových aplikací práci se stránkami usnadňují a opravdu
zpříjemňují. První objekt, který jsem využil byly záložky (Tabs) a
hned v zápětí validační extender (ValidatorCallout).
Kouzlo ASP.net AJAXu vidím hlavně v tom, že si v klidu můžete
i nadále programovat tak, jak jste dosud zvyklí. I nadále si
píšete programy tzv. run at server (tedy program, který by se měl
vykonávat na serveru) přímo ve vašem oblíbeném .net
jazyku a jednoduše deklarativně přidáváte do stránky
AJAX objekty. Navíc pak do stránky přidáte AJAX
ScriptManager, který zajistí připojení potřebných AJAX
JavaScriptů jež zajišťují obsluhu AJAX objektů na straně klienta. Kromě
toho také musíte v souboru web.config doplnit několik
deklarací, které umožní v aplikaci AJAX používat a pokud chcete
používat i Control Toolkit, tak doplníte .net assembly případně
i s různými jazykovými verzemi (jednoduchý a názorný návod najdete
ve výukových videích Get Started with
ASP.NET AJAX a Get Started with the
ASP.NET AJAX Control Toolkit).
Musím přiznat, že práce s ASP.net AJAXem mě opravdu nadchla. Je to
velmi snadné a výsledky jsou myslím velmi pěkné a hlavně uživatelsky
příjemné. V tomto článku alespoň ukáži, jak snadno lze doplnit
validaci prvků formuláře o AJAX extender, který přidá
„informační bublinu“ k server controlu, který měl být
vyplněn.
Ukázka validace s ASP.net AJAX ValidatorCallout
Pokud máte ve formuláři například textové pole pro povinný údaj
jméno, bude váš kód celé ASPX stránky vypadat třeba takto:
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub btnSend_Click(ByVal sender As Object, ByVal e As System.EventArgs)
'kontrola správného vyplnění formuláře
Page.Validate("contact")
If Not Page.IsValid Then Return
'zpracování formuláře
litSendOk.Text = "Formulář úspěšně odeslán!"
'TODO: libovně dopsat zpracování dat uvedených ve formuláři
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Validace formuláře</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ValidationSummary ID="valsumContact" runat="server"
HeaderText="Pro úspěšné uložení kontaktu je nutné správně doplnit následující údaje:"
ValidationGroup="contact" />
<asp:Literal ID="litSendOk" runat="server" />
</div>
<div>
<asp:Label ID="lblName" runat="server" AssociatedControlID="txtName">jméno:</asp:Label>
<asp:TextBox ID="txtName" runat="server" CssClass="povinne" />
<asp:RequiredFieldValidator
ID="valName" runat="server"
ControlToValidate="txtName"
ValidationGroup="contact"
Display="Dynamic"
ErrorMessage="<strong>Nevyplněná položka</strong><br />Jméno je povinné.">
*</asp:RequiredFieldValidator>
</div>
<div>
<asp:Button ID="btnSend" runat="server" Text="Odeslat" OnClick="btnSend_Click" />
</div>
</form>
</body>
</html>
Tento kód zajistí zobrazení textového pole (asp:TextBox)
pro zadání povinného jména a tlačítko (asp:Button) pro
odeslání formuláře. V případě, že nevyplníte jméno, zobrazí se
vedle nevyplněného textového pole hvězdička a při snaze o odeslání
se zobrazí v objektu asp:SummaryValidator i chybová hláška
upozorňující na nutnost vyplnění povinného jména.
Doplnění o AJAX
Nyní tento formulář ASP.net AJAX ValidatorCallout extender, který
zobrazí dynamicky chybovou hlášku hned při vyplňování formuláře. Je to
velmi snadné a ve stránce nebudeme muset provádět téměř žádné
úpravy.
- do stránky vložíme AJAX ScriptManager (ten musí být v každé
stránce, která ASP.net AJAX používá, ale vždy maximálně jen
jednou)
- u nyní použitého ASP.net RequiredFieldValidator změníme
Display="Dynamic" na Display="None"
- přidáme AJAX ValidatorCallout za textové pole
Upravená část kódu stránky nyní bude vypadat takto:
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:ValidationSummary ID="valsumContact" runat="server"
HeaderText="Pro úspěšné uložení kontaktu je nutné správně doplnit následující údaje:"
ValidationGroup="contact" />
<asp:Literal ID="litSendOk" runat="server" />
</div>
<div>
<asp:Label ID="lblName" runat="server" AssociatedControlID="txtName">jméno:</asp:Label>
<asp:TextBox ID="txtName" runat="server" CssClass="povinne" />
<asp:RequiredFieldValidator
ID="valName" runat="server"
ControlToValidate="txtName"
ValidationGroup="contact"
Display="None"
ErrorMessage="<strong>Nevyplněná položka</strong><br />Jméno je povinné." />
<ajaxToolkit:ValidatorCalloutExtender
runat="server"
ID="valexName"
TargetControlID="valName" />
</div>
Tak a první využití ASP.net AJAXu máme úspěšně za sebou. Teď si
můžete živou ukázku této stránky prohlédnout
v akci.
Tento i další ukázkové zdrojové kódy naleznete i na http://ukazky.jerrysohn.net/
autor: jerrysohn |