Poznámka: články jsou již mnoho let staré, doba se posunula, mnoho věcí v nich doporučovaných je již dnes překonané - berte s rezervou!


ASP.NET Ajax, Atlas a automatické doplňování výrazu (Atlas Framework I)

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 minimumprefix­length 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




23
 
28
 
15
 
12
 
6
 
 
Vložit komentář:
 

 



 

 

Nepoužívejte žádné html ani texy značky, odřádkování se zachová. Pokud uvádíte zdrojový kód, můžete ho vložit mezi značky
<syntax jazyk="PHP">...</syntax>,
bude potom zformátován. Jako atribut můžete uvést PHP, C#, HTML, CSS a mnoho dalších.


opiste cislo Opište číslo:

 

14. 10. 2006 18:28:48
[1] (Ełven)
Chybka odpovědět
v zapisu webove sluzby chybi import - using System.Configuration, bez tohoto namespace neni pristup k web.configu...