ASP.NET Ajax, Atlas a automatické doplňování výrazu (Atlas Framework I)
- Vložil Trupík 6/10/2006 4:11:06 PM
-
AJAX je poslední dobou velká móda. Půlka internetového
světa se rozplývá nad jeho možnostmi, druhá na něj nadává.
V článku se můžete dočíst o obecných principech AJAXU a jeho
Microsoftí implementace – Atlas frameworku a na závěr ukážu, jak
v Ajaxu-Atlasu udělat to, co znáte z Google
Suggest, Seznamu a Centra – tedy automatické
doplňování vyhledávácího pole.
Pokud moc dobře víte, co je to AJAX, tento a další
odstavec můžete přeskočit. AJAX se obvykle vykládá jako
Asynchronous JavaScript and XML. Tento přístup se snaží
odzákladů nabourat základní princip práce internetových serveru –
tedy model request – response. Tradiční přístup je ten,
že uživatel si vyžádá od serveru stránku – a to buď pomocí
zadání internetové adresy nebo nějakou akcí, kterou provede na jiné
stránce (například kliknutím na tlačítko) a server stránku zašle.
Většina uživatelů si na to zvykla, ale zároveň tady vždycky byly místa,
kde by se hodilo tento princip trošku nabourat. Například u chatu by se
hodilo, kdyby se obnovovala jen ta část stránky, ve které se vypisují
zprávy a navíc jenom tehdy, když někdo napíše novou zprávu –
zabránilo by se tím zbytečnému problikávání stránky. Dalších
příkladů se dá vymyslet spousta.
AJAX je souhrné jméno pro celý princip – nechat
provádět počítač klienta (jeho prohlížeč) asynchronní požadavky a
naložit s nimi tak, aby nebylo potřeba obnovovat celou stránku.
Jedinnou možností, jak prohlížeč programovat, je JavaScript.
A programování JavaScriptu je o dost jiné proti ostatním
programovacím jazykům – je to jazyk nepohodlný, jeho implementace se
liší na prohlížečích, nedá se moc dobře ladit.
Atlas je framework společnosti Microsoft, která se snaží
zjednodušit programování klientských skriptů. V Atlasu nemusíte
vůbec psát JavaScript – místo toho deklarujete třídy
z frameworku způsobem velice podobným deklaraci serverových prvků
ASP.NET. O interakci s klientem se postará ASP.NET a Atlas.
Atlas je v současnosti ve fázi CTP, ale je již dobře použitelný.
Před tím, než ho budete moci začít používat, musíte ho nainstalovat.
Stáhnout si ho můžete zdarma na stránkách atlas.asp.net . Při instalaci se atlas
integruje do Visual Studia (popř. Visual Web Developeru). Pak už stačí
vybrat položku v menu New Web Site a teď novou „Atlas“ Web
Site Template. Součástí tepmlate je několik informativních souborů a
především assembly Microsoft.Web.Atlas.dll – ta
obsahuje Atlas komponenty.
Předvedu jeden příklad – automatické doplňování při
vyhledávání. Atlas má prvek připravený přímo pro tuto funkci, je ale
potřeba mu dodávat data – a to pomocí webové služby. Naštěstí
psát webové služby pro ASP.NET taky není nic obtížného. Nejprve tedy
napíšeme webovou službu – jednoduchou službu, která vrátí pole
řetězců, které odpovídají aktuálně zadanému výrazu. Kostru webové
služby opět vytvoří Visual Studio za vás – stačí kliknout pravým
tlačítkem na v Solution exploreru a vybrat Add New Item – Web
Service.
Předpokládám, že zdrojem pro řetězce bude tabulka v databázi.
Hotová webová služba může vypadat třeba takto (soubor
AutoComplete.cs)
using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Threading;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Serialization;
using System.Data.Sql;
using System.Data.SqlClient;
public class AutoComplete : System.Web.Services.WebService
{
[WebMethod]
public String[] SuggestWords(string prefixText, int Count)
{
ConnectionStringSettings settings =
ConfigurationManager.ConnectionStrings["DB"];
SqlConnection connection =
new SqlConnection(settings.ConnectionString);
connection.Open();
SqlCommand command = new SqlCommand(
"SELECT TOP (@max) * FROM words "+
"WHERE word LIKE @startsWith ORDER BY word
ASC",
connection);
command.Parameters.AddWithValue(
"startsWith", prefixText+"%");
command.Parameters.AddWithValue(
"max", Count);
SqlDataReader reader = command.ExecuteReader();
System.Collections.Generic.List<String> strings
= new List<String>(10);
while (reader.Read())
strings.Add((String)reader["word"]);
return strings.ToArray();
}
}
Teď už lze stránku přeložit a otestovat. Po stisku F5 by se měla
v prohlížeči zobrazit informativní stránka o webové službě a
také seznam metod – v tomto případě jedinná metoda
SuggestWords, kterou můžete rovnou otestovat.
Nyní ještě zbývá naimplementovat interakci vyhledávacího pole
s metodou, a tady přijde na řadu atlas. Tělo webové stránky může
vypadat například takto:
<form id="Form1" runat="server">
<atlas:ScriptManager id="AtlasPage1" runat="server" />
<div id="content">
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
<atlas:AutoCompleteExtender runat="server"
ID="autoComplete1">
<atlas:AutoCompleteProperties
TargetControlID="TextBox1"
Enabled="True"
ServicePath="AutoComplete.asmx"
ServiceMethod="SuggestWords"
minimumprefixlength="1" />
</atlas:AutoCompleteExtender>
</div>
</form>
Ovládací prvek ScriptManager zapouzdřuje funkčnost Atlasu. Pro správnou
práci je nezbytný, není ale třeba ho nijak konfigurovat.
Prvek AutoCompleteExtender se stará o vlastní doplňování.
Nastavíte mu který ovládací prvek má doplňovat, cestu k webové
službě a název její metody, pomocí které má získávat data. Vlastnost
minimumprefixlength určuje kolik znaků musí uživatel
napsat, aby se spustilo vlastní doplňování.
A na závěr několik postřehů (atlasího začátečníka):
- aspx soubor, který dorazí ke klientovi, se odkazuje na 360kB velký soubor
WebResource.axd s JavaScriptovým kódem tříd ajaxu. 360kB se může
zdát hodně. Ale na druhou stranu prohlížeče stažené JavaScripty
cachují, takže klient ho bude muset stáhnout pouze jednou.
- deklarativní kód, který napíšete, ve přesně stejné podobě dorazí
ke klientovi jako součást aspx souboru, obalený do tagů
<script
type="text/xml-script">, takže zústává problém
JavaScriptového kódu – kdokoliv ho může upravovat a kopírovat.
- Atlas, zdá se, v pořádku běhá ve Firefoxu a IE, nefunguje
v Opeře (verze 9), další prohlížeče jsem netestoval. Takže
špatné, ale prý je podpora pro Operu v plánu.
- pokud prohlížeč funkčnost nezvládá, stránka může dál pracovat
– prostě bez doplňování. Takže u tohoto typu není problém
s přístupností. U jiných scénářů ale můžete vážně omezit
uživatele Opery nebo uživatele s vypnutým Javascriptem.
Související články:
ASP.NET Ajax a Atlas a obnovování části stránky (Atlas Framework II)
Ohodnoťte prosím užitečnost článku