Šablona Breeze/Knockout

Mads Kristensen

Šablona Breeze/Knockout MVC byla napsána Ward Bellem

Stažení šablony Breeze/Knockout MVC

Slyšeli jste o "jednostránkové aplikaci" (SPA) a přemýšleli jste, co to je. I když byste si o tom mohli přečíst, raději byste to zažili sami. Ale kdo má čas stáhnout ukázku? Pokud máte Sadu Visual Studio, budete mít ukázku spa spuštěnou za méně než 60 sekund pomocí šablony jednostránkové aplikace "Breeze/Knockout" ASP.NET MVC 4.

Co je šablona Breeze/Knockout SPA?

Většina šablon projektů generuje kostru aplikace. Na tyto kosti přidáte kód a nakonec doručíte funkční aplikaci. Šablona Breeze/Knockout SPA se liší. Vygeneruje ukázkovou aplikaci, kterou můžete studovat. Demonstruje návrh aplikace SPA a mnoho technik pro vytvoření SPA.

Šablona Breeze/Knockout je variantou šablony KnockoutJS SPA, která je součástí aktualizace ASP.NET and Web Tools 2012.2. Šablona Breeze SPA vygeneruje aplikaci se stejným uživatelským prostředím, ale má jinou implementaci, a to pomocí Breeze pro správu dat.

Šablona KnockoutJS SPA vytváří žádosti o služby s nezpracovaným jQuery AJAX, který je vhodný pro jednoduchou aplikaci. Sofistikovanější aplikace ale mají náročnější požadavky na správu dat. Například většina aplikací:

• Dotazování a opětovné dotazování serveru během rozšířené uživatelské relace
• Přidejte filtry dotazů, řazení a stránkování.
• Sdílejte stejná data na více obrazovkách.
• Hromadí změny v mnoha objektech a pak je uloží jako jednu transakci.
• Ověřte změny v klientovi, aby uživatel mohl opravit chyby před potvrzením změn v databázi.

Knihovna BreezeJS se o tyto úkoly stará za vás a uvolní vás k vývoji logiky aplikace a uživatelského prostředí, na kterých vám nejvíce záleží.

Breeze je open source knihovna pro vytváření aplikací s bohatými daty v JavaScriptu a HTML, což jsou druhy aplikací, které se v minulosti doručovaly jako samostatné desktopové aplikace.

Šablona Breeze/Knockout vám pomůže udělat první zásadní krok směrem k robustnější infrastruktuře pro správu dat. Vytvoří ukázkovou aplikaci todo, která je navenek identická jako šablona KnockoutJS SPA. Uvnitř nahrazuje datovou vrstvu AJAX breeze, takže tyto dva přístupy můžete porovnat vedle sebe. Samozřejmě, že se sotva dotýká potenciálu aplikace Breeze. Uvidíte ale, jak Breeze funguje a jak málo ho k přechodu potřebujete.

Tak se do toho pusťme.

Vytvoření projektu šablony Breeze/Knockout

Stáhněte a nainstalujte šablonu kliknutím na tlačítko Stáhnout výše. Šablona je zabalená jako soubor rozšíření sady Visual Studio (VSIX). Možná budete muset restartovat Visual Studio.

V podokně Šablony vyberte Nainstalované šablony a rozbalte uzel Visual C# . V části Visual C# vyberte Web. V seznamu šablon projektů vyberte ASP.NET webová aplikace MVC 4. Pojmenujte projekt a klikněte na OK.

V průvodci Novým projektem vyberte Breeze Knockout SPA.

Stisknutím kláves Ctrl-F5 sestavte a spusťte aplikaci bez ladění, nebo stisknutím klávesy F5 spusťte ladění.

Při prvním spuštění aplikace se zobrazí přihlašovací obrazovka. Klikněte na odkaz Zaregistrovat se a zobrazí se nová stránka, kde můžete zadat uživatelské jméno a heslo. (Přihlašovací a registrační stránky jsou vytvořené pomocí ASP.NET MVC.) Když odešlete registrační formulář, server vygeneruje seznam úkolů se dvěma položkami pro váš účet. Pak vám je představí ve žluté poznámce.

Teď jste v zemi SPA. Všechno, co uvidíte a prožijete při manipulaci s Todosem, se vykresluje a spravuje na klientovi pomocí Knockout a Breeze. Prozkoumejte aplikaci jako uživatel... ale očima vývojáře. Pomocí vývojářských nástrojů v prohlížeči zachyťte síťový provoz. (V Internet Exploreru: Stiskněte klávesu F12, vyberte kartu Síť a klikněte na Spustit zachytávání.) Teď zkuste následující:

• Přidejte novou položku todo.
• Klikněte na popisek a upravte název položky todo.
• Zaškrtnutím políčka označte položku jako hotovou. Všimněte si, že textové pole je zakázané, takže název už není možné upravovat.
• Klikněte na x napravo od popisku. Položka zmizí a odstraní se z databáze.
• Vyberte jinou položku a vymažte její název. Zobrazí se chyba ověření, že se název vyžaduje. Po krátké odmlce se předchozí název obnoví.
• Zadejte směšně dlouhý název. Zobrazí se jiná chyba ověření, protože název je příliš dlouhý.
• Klikněte na tlačítko Přidat seznam úkolů. Nalevo od předchozího seznamu se zobrazí nový seznam.
• Pohrajte si s názvem TodoList, který aktivuje požadované ověření a ověření délky.
• Kliknutím do textového pole názvu vymažte chybovou zprávu.
• Kliknutím na x v kroužku v pravém horním rohu odstraňte seznam úkolů a jeho todos.

Logiku ověřování provádí služba Breeze na straně klienta. Ověřovací atributy v serverových modelových třídách se rozšíří do klienta a automaticky se spustí dříve, než klient kontaktuje server.

Zkontrolujte síťový provoz. Všimněte si, že když Služba Breeze zjistila chybu, nedošlo k žádným voláním serveru. Každá platná změna způsobila požadavek POST na /api/Todo/SaveChanges. Breeze seskupí změny a odešle je dohromady jako jeden požadavek do metody kontroleru webového SaveChanges rozhraní API. To se liší od šablony KnockoutJS SPA, která vytváří požadavky PUT, POST a DELETE pro každou položku zvlášť.

Nahlédnutí dovnitř

Tato aplikace má na straně klienta a na straně serveru. Zásobník na straně klienta se skládá z malého kódu HTML a kombinace aplikačních modulů JavaScriptu (ve složce "app") a javascriptových knihoven třetích stran (ve složce "Scripts").

Pokud jste prozkoumali šablonu KnockoutJS SPA, měla by vypadat povědomě. Zaměřte se na modrá pole. Architektura uživatelského rozhraní je MVVM (Model-View-ViewModel), ve které jsou widgety HTML zobrazení čistě oddělené od podpůrného prezentačního kódu v modelu view-model. Systém datových vazeb (v tomto případě Knockout) koordinuje zobrazení a model zobrazení tak, aby každý z nich mohl dělat svou práci bez důvěrné znalosti druhého.

Model zapouzdřuje data todo. Entity v modelu vytváří Breeze s pozorovatelnými vlastnostmi Knockout, takže je možné je přímo svázat s widgety v zobrazení. View-model požádá kontext dat o získání a uložení entit modelu. Kontext dat deleguje většinu práce na Breeze.

Zásobník na straně serveru se skládá z vývojářského kódu a tří hlavních knihoven .NET: Webové rozhraní API, Entity Framework a Breeze.NET.

Základní architektura je stejná jako šablona KnockoutJS SPA. Implementace je však mnohem jednodušší: DTO byly odstraněny a většina podrobností Entity Framework byla delegována na Breeze.NET.

Další kroky

Doporučujeme, abyste kód prozkoumali a provedli rozsáhlou diskuzi o zásobníkech klienta i serveru na webu Breeze.

Můžete zkusit hrát s dotazem Breeze na straně klienta; přidejte filtry a řazení. Můžete přidat další vlastnosti modelu a další entity, abyste získali lepší pocit z kompletního vývoje SPA. Pokud jste si jistí návrhem, můžete odstranit funkce Todo a nahradit je vlastními.

Brzy budete připraveni na další velký krok: Přidání obrazovek na straně klienta a navigace mezi nimi. Tuto šablonu SPA necháte na pozadí a použijete ucelenější zásobník SPA, jako je hot John Papa's Hot Towel, který přidává durandal do směsi Breeze a Knockout.