Abych si je všechny vyzkoušel a otestoval, rozhodl jsem se napsat jednoduchou aplikaci, využívající aktuální technologie a postupy ze světa ASP.NET Web Forms. Aplikace sama je vcelku triviální, je to webový seznam kontaktů, využívající dvě tabulky v databázi. Jednoduchou aplikaci jsem zvolil záměrně, abych se nemusel příliš zabývat tím, co aplikace reálně dělá, ale mohl se soustředit na technologie, použité pro její vývoj.
Takže co aplikace využívá?
Vývojové nástroje
Pro práci s aplikací budete potřebovat Microsoft Visual Studio 2010 SP1 nebo volně dostupný Visual Web Developer Express 2010 SP1. Doporučuji nainstalovat i IIS Express a Web Standards Update.
Využívám některé externí knihovny, které jsou referencovány pomocí Nugetu, takže doporučuji nainstalovat i jeho add-in. Obecně pro instalaci vývojového prostředí doporučuji použít Web Platform Installer, je to cesta nejmenšího odporu.
Použité technologie
ASP.NET Web Forms 4.0
Aplikace je postavena na nejnovější verzi ASP.NET Web Forms a .NET Frameworku 4.0. Využívá novinek v renderování ovládacích prvků a generuje čistý HTML kód.
SQL Server Compact Edition 4.0
Jako databázi používám nikoliv "velký" SQL Server, ale (relativní) novinku – SQL Server Compact Edition. To je embedded databáze, která je vhodná pro menší weby (menší jak objemem databáze, tak zatížením). Výhodou je, že se nemusí instalovat, nikde neběží externí služba atd.
Vzhledem k tomu, že naše aplikace má celkem tři tabulky (dvě na data a jednu se seznamem uživatelů), je pro použití SQL Express horkým kandidátem.
ADO.NET Entity Framework
Při návrhu aplikace jsem použil ADO.NET Entity Framework 4.0. Použil jsem klasickou metodu "database first", ne nejnovější sexy code first, protože aplikace je už poněkud starší a v době jejího vzniku ještě RTM verze Code First neexistovala. Kromě toho, tato metoda se také nehodí na všechno (i když zrovna pro takto jednoduchou aplikaci by své opodstatnění měla).
ASP.NET Dynamic Data
Aplikace využívá dynamické generování uživatelského rozhraní pomocí technologie Dynamic Data. Použitý datový model je bohatě otagován metadatovými atributy a uživatelské rozhraní pro zobrazení detailu a editace položek je generováno automaticky, na základě těchto metadat. Stejným způsobem jsou také zadávané data validována.
Aplikace není na technolgii Dynamic Data postavená celá, kombinuje klasický přístup a dynamické generování UI. Podporu pro Dynamic Data získává pomocí mnou vytvořené a publikované varianty standardní Dynamic Data šablony, kterou si můžete stáhnout jako NuGet package Altairis.DynamicData.WebAppTemplates.
URL routing
Celá aplikace využívá URL routing. Nezadává se tedy přímo adresa ASPX web formu, jako fyzický název souboru, ale logická adresa, která se překládá na web formy a HTTP handlery. URL routing je mnohem schopnější obdoba URL rewritingu. Zatímci v případě rewritingu se jedná o hack, který trpí řadou problémů, URL routing je systematické řešení, které mimo jiné nativně řeší předávání parametrů v rámci cesty a automatické generování odkazů.
Altairis.Web.UI
Za ta léta, co píšu ASP.NET aplikace, jsem si vytvořil knihovnu vlastních užitečných server controls a v podobě knihovny Altairis.Web.UI ji dal k dispozici jako open source. Můžete si ji nainstalovat i jako NuGet package Altairis.Web.UI.
Knihovna obsahuje řadu jednoduchých, leč schopných server controls. V rámci aplikace využívám zejména AutoModeFormView, což je vylepšený FormView, který se umí automaticky přepínat mezi režimem editace a vkládání nového záznamu, a DataPagerExtender, což je lepší stránkovací prvek pro ListView.
Altairis.Web.Security
Další moje open source knihovna, také k nalezení na CodePlexu. Obsahuje několik membership a role providerů. Mimo jiné též TableMembershipProvider, který umí fungovat proti jakékoliv databází, tedy i proti SQL Serveru Compact Edition. I tuto knihovnu si můžete nainstalovat pomocí NuGetu, její ID je (nepříliš překvapivě) Altairis.Web.Security.
jQuery
jQuery je JavaScriptová knihovna, která si klade za cíl učinit život JS programátora méně bolestným. Překlenuje rozdíly mezi jednotlivými prohlížeči a nabízí jednodušší řešení typických úloh. Ideální řešení pro líné programátory, kterým se JavaScript moc nelíbí a píší ho jenom v sebeobraně, jako já. Pro ASP.NET programátory je jQuery podstatné i tím, že se Microsoft zapojil do jeho vývoje, je pro něj podpora pro Visual Studio IntelliSense a podobně. Já ho v aplikaci využívám jenom decentně na pár drobností. Více informací najdete na www.jquery.com.
jQuery UI
jQuery UI je sada "widgetů", ovládacích prvků napsaných pomocí JavaScriptu a jQuery. Fungují na principu neintruzivního JavaScriptu, tedy vytvoříte nějaký obecný HTML kód, který je v zásadě použitelný i samostatně a potom ho "oživíte" pomocí jQuery UI. Podrobnější informae najdete na www.jqueryui.com.
Kromě toho obsahuje i docela slušný CSS framework s řadou hotových témat a nástrojem Theme Roller k vytváření dalších. JQuery UI tak představuje docela dobrý způsob pro programátory, kteří nemají nervy a schopnosti na tvorbu designu, ale přesto by chtěli vytvářet oku lahodící aplikace. Web Contact List využívá jedno z vestavěných jQuery UI témat.
Zároveň je aplikace napsaná tak, že je schopna fungovat i pokud je JavaScript vypnutý, nebo nefunkční, jenom se zjednoduší její vzhled, ale základní schopnosti zůstanou stejné. Následující dva obrázky ukazují aplikaci se zapnutým a vypnutím JavaScriptem:
HTML 5
Aplikace využívá HTML 5, ale velice konzervativně. Spousta lidí je excitovaná z takových věcí, jako je element canvas a rozličné multimediální obezličky, což se v reálných aplikacích využije jenom zřídkakdy. Já z HTML 5 využívám zejména data atributy, třeba pro potvrzení některých akcí (třeba pro odhlášení).
Import a export dat v CSV formátu
To není vyloženě nová technologie, spíš jedna z těch nejstarších. Ale nějak jsem testovací data do aplikace dostat musel a kromě toho požadavek na import a export dat je docela častý, takže se můžete inspirovat mým řešením.
Zdrojové kódy ke stažení
Kompletní aplikaci včetně zdrojových kódů si můžete stáhnout zde: 20110814-WebContactList.zip (cca. 9 MB). Živé demo aplikace najdete na http://webcldemo.asp2.cz/.