Szablon Breeze/Knockout

Autor: Mads Kristensen

Szablon Breeze/Knockout MVC został napisany przez Ward Bell

Pobieranie szablonu Breeze/Knockout MVC

Słyszałeś o "aplikacji jednostronicowej" (SPA) i zastanawiałeś się, co to jest. Chociaż możesz o tym przeczytać, wolałbyś doświadczyć go dla siebie. Ale kto ma czas na pobranie próbki? Jeśli masz program Visual Studio, będziesz mieć przykładowy SPA uruchomiony w mniej niż 60 sekund z szablonem ASP.NET MVC 4 "Aplikacja jednostronicowa bryzy/knockout".

Co to jest szablon Breeze/Knockout SPA?

Większość szablonów projektów generuje szkielet aplikacji. Umieścisz ciało na tych kościach, dodając kod i ostatecznie dostarczając działającą aplikację. Szablon Spa Breeze/Knockout jest inny. Generuje przykładową aplikację do badania. Demonstruje projekt aplikacji SPA i wiele technik budowy SPA.

Szablon Breeze/Knockout jest odmianą szablonu KnockoutJS SPA zawartego w aktualizacji ASP.NET and Web Tools 2012.2. Szablon Spa bryzy generuje aplikację z tym samym środowiskiem użytkownika, ale ma inną implementację przy użyciu narzędzia Breeze do zarządzania danymi.

Szablon KnockoutJS SPA wysyła żądania obsługi z nieprzetworzonym jQuery AJAX, który jest odpowiedni dla prostej aplikacji. Jednak bardziej zaawansowane aplikacje mają bardziej wymagające wymagania dotyczące zarządzania danymi. Na przykład większość aplikacji:

• Wykonywanie zapytań i ponowne wykonywanie zapytań względem serwera podczas rozszerzonej sesji użytkownika.
• Dodaj filtry zapytań, sortowanie i stronicowanie.
• Udostępnianie tych samych danych na wielu ekranach.
• Gromadzić zmiany w wielu obiektach, a następnie zapisywać je jako pojedynczą transakcję.
• Zweryfikuj zmiany na kliencie, aby użytkownik mógł poprawić błędy przed zatwierdzeniem zmian w bazie danych.

Biblioteka BreezeJS obsługuje te zadania, umożliwiając tworzenie logiki aplikacji i środowiska użytkownika, które ma największe znaczenie.

Breeze to biblioteka open source umożliwiająca tworzenie rozbudowanych aplikacji danych w języku JavaScript i HTML, tego rodzaju aplikacje, które zostały historycznie dostarczone jako autonomiczne aplikacje klasyczne.

Szablon Breeze/Knockout pomaga wykonać ten pierwszy kluczowy krok w kierunku bardziej niezawodnej infrastruktury zarządzania danymi. Tworzy przykładową aplikację todo, która jest na zewnątrz identyczna z szablonem KnockoutJS SPA. Na środku zastępuje warstwę danych AJAX aplikacją Breeze, dzięki czemu można porównać te dwa podejścia obok siebie. Oczywiście ledwo dotyka potencjału aplikacji Breeze. Ale zobaczysz, jak działa Breeze i jak mało jest wymagane, aby to przejście.

Zaczynajmy.

Tworzenie projektu szablonu Breeze/Knockout

Pobierz i zainstaluj szablon, klikając przycisk Pobierz powyżej. Szablon jest spakowany jako plik rozszerzenia programu Visual Studio (VSIX). Może być konieczne ponowne uruchomienie programu Visual Studio.

W okienku Szablony wybierz pozycję Zainstalowane szablony i rozwiń węzeł Visual C# . W obszarze Visual C# wybierz pozycję Sieć Web. Na liście szablonów projektów wybierz pozycję ASP.NET aplikacja internetowa MVC 4. Nadaj projektowi nazwę i kliknij przycisk OK.

W kreatorze Nowy projekt wybierz pozycję Breeze Knockout SPA.

Naciśnij klawisze Ctrl-F5, aby skompilować i uruchomić aplikację bez debugowania, lub naciśnij klawisz F5, aby uruchomić polecenie z debugowaniem.

Po pierwszym uruchomieniu aplikacji zostanie wyświetlony ekran logowania. Kliknij link "Zarejestruj się", a nowa strona zostanie wyświetlona w widoku, w którym możesz wprowadzić nazwę użytkownika i hasło. (Strony logowania i rejestracji są tworzone przy użyciu ASP.NET MVC). Po przesłaniu formularza rejestracji serwer generuje listę zadań do wykonania z dwoma elementami dla twojego konta. Następnie przedstawia je na żółtej notce.

Teraz jesteś w kraju SPA. Wszystko, co widzisz i doświadczenie podczas manipulowania todos, jest renderowane i zarządzane na kliencie z pomocą Knockout i Breeze. Eksploruj aplikację jako użytkownik ... ale z okiem dewelopera. Użyj narzędzi deweloperskich w przeglądarce, aby przechwycić ruch sieciowy. (W programie Internet Explorer: naciśnij klawisz F12, wybierz kartę Sieć , a następnie kliknij przycisk Rozpocznij przechwytywanie). Teraz spróbuj wykonać następujące czynności:

• Dodaj nowy element zadań do wykonania.
• Kliknij etykietę i edytuj tytuł elementu zadań do wykonania
• Zaznacz pole wyboru, aby oznaczyć element jako ukończony. Zwróć uwagę, że pole tekstowe jest wyłączone, więc tytuł nie jest już edytowalny.
• Kliknij znak "x" po prawej stronie etykiety. Element zniknie i zostanie usunięty z bazy danych.
• Wybierz inny element i wyczyść jego tytuł. Zostanie wyświetlony błąd weryfikacji, że tytuł jest wymagany. Po krótkiej przerwie poprzedni tytuł zostanie przywrócony.
• Wpisz śmiesznie długi tytuł. Zostanie wyświetlony inny błąd weryfikacji, że tytuł jest za długi.
• Kliknij przycisk "Dodaj listę zadań do wykonania". Po lewej stronie poprzedniej listy zostanie wyświetlona nowa lista.
• Graj z tytułem TodoList, wyzwalając wymagane i długie walidacje.
• Kliknij pole tekstowe tytułu, aby wyczyścić komunikat o błędzie.
• Kliknij znak "x" w okręgu w prawym górnym rogu, aby usunąć listę zadań TodoList i jej todos.

Logika walidacji jest wykonywana po stronie klienta przez aplikację Breeze. Atrybuty weryfikacji klas modelu serwera są propagowane do klienta i wykonywane automatycznie przed kontaktem klienta z serwerem.

Przejrzyj ruch sieciowy. Zwróć uwagę, że nie było żadnych wywołań serwera po wykryciu błędu przez aplikację Breeze. Każda prawidłowa zmiana spowodowała żądanie POST "/api/Todo/SaveChanges". Bryza łączy zmiany i wysyła je razem jako jedno żądanie do metody kontrolera internetowego SaveChanges interfejsu API. Różni się to od szablonu KnockoutJS SPA, który sprawia, że żądania PUT, POST i DELETE dla każdego elementu są indywidualnie.

Zaglądaj do środka

Ta aplikacja ma po stronie klienta i po stronie serwera. Stos po stronie klienta składa się z małego kodu HTML i kombinacji modułów JavaScript aplikacji (w folderze "app") oraz bibliotek języka JavaScript innych firm (w folderze "Scripts").

Jeśli zbadano szablon KnockoutJS SPA, powinien to wyglądać bardzo dobrze. Skup się na niebieskich polach. Architektura interfejsu użytkownika to Model-View-ViewModel (MVVM), w której widżety HTML widoku są całkowicie oddzielone od kodu prezentacji pomocniczej w modelu widoku. System powiązania danych (Knockout w tym przypadku) koordynuje widok i model wyświetlania, aby każdy mógł wykonać swoją pracę bez intymnej wiedzy o drugiej.

Model hermetyzuje dane zadań do wykonania. Jednostki w modelu są tworzone przez aplikację Breeze z widocznymi właściwościami Knockout, dzięki czemu mogą być powiązane bezpośrednio z widżetami w widoku. Model widoku prosi kontekst danych o uzyskanie i zapisanie jednostek modelu. Kontekst danych deleguje większość pracy do aplikacji Breeze.

Stos po stronie serwera składa się z kodu dewelopera i trzech głównych bibliotek platformy .NET: internetowego interfejsu API, platformy Entity Framework i Breeze.NET.

Podstawowa architektura jest taka sama jak szablon KnockoutJS SPA. Jednak implementacja jest znacznie prostsza: obiekty DTO zostały usunięte, a większość szczegółów platformy Entity Framework została delegowana do Breeze.NET.

Następne kroki

Zalecamy zapoznanie się z kodem, prowadzone przez obszerną dyskusję zarówno na temat klienta, jak i stosów serwerów w witrynie internetowej Breeze.

Możesz spróbować grać z zapytaniem po stronie klienta aplikacji Breeze; dodaj filtry i sortowanie. Możesz dodać więcej właściwości modelu i więcej jednostek, aby lepiej poczuć się do kompleksowego opracowywania SPA. Gdy jesteś przekonany o projekcie, możesz rozerwać funkcje zadań do wykonania i zastąpić je własnymi.

Wkrótce będziesz gotowy do następnego dużego kroku: dodawanie ekranów po stronie klienta i nawigowanie między nimi. Pozostawisz ten szablon SPA za i zwrócisz się do bardziej kompletnego stosu SPA, takiego jak John Papa's Hot Towel, który dodaje Durandal do Bryzy i Knockout mix.