Modello Breeze/Knockout
The Breeze/Knockout MVC Template è stato scritto da Ward Bell
Si è sentito parlare di "applicazione a pagina singola" (SPA) e si è chiesto cos'è. Mentre si potrebbe leggere su di esso, si preferisce provarlo per se stessi. Ma chi ha tempo per scaricare un esempio? Se si ha Visual Studio, si avrà un'applicazione a pagina singola di esempio in esecuzione in meno di 60 secondi con il modello ASP.NET MVC 4 "Breeze/Knockout Single Page Application".
Che cos'è il modello Breeze/Knockout SPA?
La maggior parte dei modelli di progetto genera uno scheletro di applicazione. È possibile mettere la carne su tali ossa aggiungendo il codice e infine fornire un'applicazione funzionante. Il modello Breeze/Knockout SPA è diverso. Genera un'applicazione di esempio da studiare. Illustra la progettazione di un'applicazione SPA e molte delle tecniche per la creazione di un'applicazione a pagina singola.
Il modello Breeze/Knockout è una variante del modello SPA KnockoutJS incluso nell'aggiornamento ASP.NET and Web Tools 2012.2. Il modello Breeze SPA genera un'applicazione con la stessa esperienza utente, ma ha un'implementazione diversa, usando Breeze per la gestione dei dati.
Il modello SPA KnockoutJS effettua richieste di servizio con jQuery AJAX non elaborato, che è adeguato per una semplice applicazione. Ma le app più sofisticate hanno requisiti di gestione dei dati più impegnativi. Ad esempio, la maggior parte delle applicazioni:
- Eseguire query ed eseguire di nuovo una query sul server durante una sessione utente estesa.
- Aggiungere filtri di query, ordinamento e paging.
- Condividere gli stessi dati tra più schermi.
- Accumulare le modifiche a molti oggetti, quindi salvarle come singola transazione.
- Convalidare le modifiche nel client, in modo che l'utente possa correggere gli errori prima di eseguire il commit delle modifiche al database.
La libreria BreezeJS gestisce automaticamente queste attività, consentendo di sviluppare la logica dell'applicazione e l'esperienza utente più importanti.
Breeze è una libreria di open source per la creazione di applicazioni di dati avanzate in JavaScript e HTML, i tipi di app che storicamente sono state distribuite come applicazioni desktop autonome.
Il modello Breeze/Knockout consente di eseguire il primo passo fondamentale verso un'infrastruttura di gestione dei dati più affidabile. Produce un'applicazione Todo di esempio identica al modello SPA KnockoutJS. All'interno, sostituisce il livello dati AJAX con Breeze, in modo da poter confrontare i due approcci affiancati. Naturalmente, tocca a malapena il potenziale di un'applicazione Breeze. Ma vedrai come funziona Breeze e quanto poco è necessario per effettuare questa transizione.
A questo punto, procedere con l'esercitazione.
Creare un progetto modello Breeze/Knockout
Scaricare e installare il modello facendo clic sul pulsante Scarica sopra. Il modello viene creato in un pacchetto come file di estensione di Visual Studio (VSIX). Potrebbe essere necessario riavviare Visual Studio.
Nel riquadro Modelli selezionare Modelli installati ed espandere il nodo Visual C# . In Visual C# selezionare Web. Nell'elenco dei modelli di progetto selezionare ASP.NET'applicazione Web MVC 4. Assegnare un nome al progetto e fare clic su OK.
Nella procedura guidata Nuovo progetto selezionare Breeze Knockout SPA.
Premere CTRL+F5 per compilare ed eseguire l'applicazione senza eseguire il debug oppure premere F5 per eseguire con il debug.
Quando l'applicazione viene eseguita per la prima volta, viene visualizzata una schermata di accesso. Fare clic sul collegamento "Iscrizione" e visualizzare una nuova pagina, in cui è possibile immettere un nome utente e una password. Le pagine di accesso e registrazione vengono compilate usando ASP.NET MVC. Quando si invia il modulo di registrazione, il server genera un Oggetto TodoList con due elementi per l'account. Poi li presenta a voi su una nota gialla.
Ora sei nella terra di SPA. Tutto ciò che vedi ed esperienza durante la manipolazione di Todos viene sottoposto a rendering e gestito sul client con l'aiuto di Knockout e Breeze. Esplorare l'app come utente ... ma con l'occhio di uno sviluppatore. Usare gli strumenti di sviluppo nel browser per acquisire il traffico di rete. In Internet Explorer: premere F12, selezionare la scheda Rete e fare clic su Avvia acquisizione. Provare a eseguire le operazioni seguenti:
- Aggiungere un nuovo elemento Todo.
- Fare clic sull'etichetta e modificare il titolo dell'elemento Todo
- Selezionare una casella di controllo per contrassegnare l'elemento completato. Si noti che la casella di testo è disabilitata, quindi il titolo non è più modificabile.
- Fare clic su "x" a destra dell'etichetta. L'elemento scompare e viene eliminato dal database.
- Selezionare un altro elemento e deselezionarne il titolo. Verrà visualizzato un errore di convalida che indica che il titolo è obbligatorio. Dopo una breve pausa, il titolo precedente viene ripristinato.
- Digitare un titolo ridicolamente lungo. Verrà visualizzato un errore di convalida diverso che il titolo è troppo lungo.
- Fare clic sul pulsante "Aggiungi elenco todo". Viene visualizzato un nuovo elenco a sinistra dell'elenco precedente.
- Gioca con il titolo TodoList, attivando le convalide necessarie e di lunghezza.
- Fare clic nella casella di testo titolo per cancellare il messaggio di errore.
- Fare clic su "x" nel cerchio nell'angolo superiore destro per eliminare TodoList e i relativi todos.
La logica di convalida viene eseguita sul lato client da Breeze. Gli attributi di convalida nelle classi del modello server vengono propagati al client ed eseguiti automaticamente prima che il client contatti il server.
Esaminare il traffico di rete. Si noti che non sono state eseguite chiamate al server quando Breeze ha rilevato un errore. Ogni modifica valida ha generato una richiesta POST a "/api/Todo/SaveChanges". La brezza aggrega le modifiche e le invia insieme come singola richiesta al metodo del SaveChanges controller API Web. Questo è diverso dal modello SPA KnockoutJS, che effettua le richieste PUT, POST e DELETE per ogni elemento singolarmente.
Visualizza all'interno
Questa applicazione ha un lato client e un lato server. Lo stack lato client è costituito da un piccolo codice HTML e da una combinazione di moduli JavaScript dell'applicazione (nella cartella "app") più librerie JavaScript di terze parti (nella cartella "Scripts").
Se è stato esaminato il modello SPA KnockoutJS, questo aspetto dovrebbe essere molto familiare. Concentrarsi sulle caselle blu. L'architettura dell'interfaccia utente è Model-View-ViewModel (MVVM), in cui i widget HTML della visualizzazione sono completamente separati dal codice di presentazione di supporto nel modello di visualizzazione. Un sistema di data binding (Knockout in questo caso) coordina la visualizzazione e il modello di visualizzazione in modo che ognuno possa svolgere il proprio lavoro senza conoscere l'altro.
Il modello incapsula i dati Todo. Le entità nel modello vengono costruite da Breeze con proprietà osservabili Knockout, in modo che possano essere associate direttamente ai widget nella visualizzazione. Il modello di visualizzazione chiede al contesto dati di acquisire e salvare le entità del modello. Il contesto dei dati delega la maggior parte del lavoro a Breeze.
Lo stack lato server è costituito da codice per sviluppatore e da tre librerie .NET principali: API Web, Entity Framework e Breeze.NET.
L'architettura di base è la stessa del modello SPA KnockoutJS. Tuttavia, l'implementazione è molto più semplice: le DTO sono state eliminate e la maggior parte dei dettagli di Entity Framework è stata delegata a Breeze.NET.
Passaggi successivi
È consigliabile esplorare il codice, guidato dall'ampia discussione sia del client che degli stack di server nel sito Web Breeze.
È possibile provare a giocare con la query sul lato client di Breeze; aggiungere alcuni filtri e ordinamenti. È possibile aggiungere altre proprietà del modello e altre entità per ottenere un'idea migliore per lo sviluppo di spa end-to-end. Quando si è certi della progettazione, è possibile rimuovere le funzionalità Todo e sostituirle con le proprie.
A breve si sarà pronti per il prossimo passaggio importante: Aggiunta di schermate lato client e spostamento tra di esse. Questo modello spa verrà lasciato indietro e si trasformerà in uno stack SPA più completo, ad esempio John Papa's Hot Towel, che aggiunge Durandal al mix Breeze e Knockout.