MVC Ajax.BeginForm(): realizzare un’applicazione “single page”.

Booking on line “single page” con il pattern MVC di ASP.NET

L’obbiettivo è quello di costruire un sistema di booking on line utilizzando il Pattern MVC di ASP.NET.
L’idea è quella di partire da un “foglio bianco” e costruire tutto quello che serve per un sistema professionale di booking on line.
Detto fatto…in questo esempio siamo partiti da un foglio bianco e per prima cosa abbiamo disegnato la prima pagina di ricerca che l’utente finale si dovrà trovare di fronte…foglio bianco

 

Nella parte di selezione l’utente dovrà poter impostare:

Data di arrivo, data di partenza e numero di persone.
Nella pagina risultati dovranno essere presentati i risultati che soddisfano la richiesta inviata.
La struttura immaginata è molto semplice:
una pagina CSHTML al cui interno avremmo due DIV principali, uno contenente gli oggetti HTML per la selezione e uno contenente una Partial View (pagina parziale) che conterrà i risultati. Poiché non vogliamo ricaricare la pagina per ottenere i risultati, utilizzeremo Ajax.BeginForm() per ottenere l’effetto di un’applicazione “single page”.
L’utilizzo di tale metodo permette di ottenere un output html per utilizzare l’invio al server di dati e ricevere la risposta HTML in maniera asincrona (AJAX) indicando dove nella pagina si vuole collocare.

Attraverso un’ampia serie di overload possiamo definire in dettaglio il comportamento. Per iniziare useremo una configurazione base:

Fondamentale per il funzionamento “reale” del metodo è indicare dove il risultato conseguente al submit dei dati verrà renderizzato. Questo si ottiene attraverso UpdateTargetId che deve indicare un id di Elemento HTML nella pagina. Nel nostro caso sarà il DIV dei risultati.
L’interfaccia utente per la prenotazione sarà inclusa in un progetto assai articolato. Per il momento basta sapere che ogni aspetto del “front end” dell’applicazione lato controller viene gestito dal controller chiamato appunto FrontEnd.
controller step 1

 

Quindi con lo step seguente si crea il controller e gli si attribuisce un nome:

controller step 2

Ovviamente il contenuto della pagina iniziale del sistema di booking è la index del controller appena creato:

Per il momento non ci preoccupiamo dell’aspetto grafico, quindi non andiamo a definire il contenuto della pagina di layout usata come riferimento.
Per il funzionamento del form ajax si deve includere l’apposita libreria Microsoft attraverso la gestione del pacchetti NuGet.:
Aggiornamento Riferimenti

Per avere a disposizione alcuni interessanti controlli consiglio anche l’installazione di Ajax control toolkit.

Una volta installata la parte jquery si deve aggiungere il seguente riferimento:

E nel controller un metodo che dovrà ricevere gli input dell’utente:

Con queste premesse lo scheletro della pagina index del booking on line diventa:

I prossimi passi saranno definire i controlli necessari per la richiesta da inviare al server, quindi vedere come tale richiesta viene elaborata e nel fare questo definire i vari oggetti necessari allo strato di logica (Business Logic Layer)

(2046)

Articoli correlati:

Tagged under:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

× Supporto Live

Al momento siamo offline. Potete contattarci via email..