Interazione Model View e pagina cshtml

terzo articoloQuesto articoli, incentrato sull’interazione del modello (@model) in una pagina MVC (Model View) e il codice HTML/Javascript, è la naturale prosecuzione dei precedenti:

Realizzare un’applicazione sigle page

Utilizzare un modello per “passare le informazioni” ad una vista

In questi articoli abbiamo visto come costruire lo scheletro della pagina e quindi come “immettere” nella pagina tutti i dati necessari per il corretto funzionamento. Il passo successivo è costruire la pagina utilizzando le informazioni del modello.

Confrontandomi con Andrea, che si occupa di interfacce e usabilità, è emersa l’idea di gestire la prenotazione al solito modo del carrello della spesa di un “normale” E-Commerce. Per fare questo però è indispensabile sapere quante stanze sono disponibili per ogni tipologia. Nella struttura della classe RoomType questa informazione era mancante, per questo l’abbiamo modificata, aggiungendo il campo AvailableQuantity, nel seguente modo:

In un approccio alla progettazione di questo tipo diventa più semplice aggiungere informazioni gestibili. L’unica cosa che abbiamo fatto è stata quella di aggiornare il modello, non preoccupandoci per il momento di come questi dati verranno gestiti nell’indispensabile database di supporto.

Quello che andremmo a fare è costruire _AvailabilityResult.cshtml. Poiché la pagina si basa su un modello, la sua prima istruzione è:

Quindi questa pagina si aspetta che il controller le invii una serie di oggetti AvailabilityResponse sui quali è possibile fare iterazioni (IEnumerable).

Per comodità riportiamo la struttura della classe:

Quello che notiamo è che possiamo dividere la classe in una “testata”, la RoomType e in una serie di “righe”, le PriceByConposition. Con questa premessa ogni oggetto del modello dovrà essere utilizzato “leggendo” una volta sola la testata e iterando la lettura su tutte le righe, con del codice tipo il seguente:

Scendendo più nel dettaglio vediamo che tipo di informazioni possiamo immaginare di gestire dalla testata:

Per ogni oggetto del Model (@model) rt rappresenta un oggetto di tipo RoomType, quindi possiamo richiamare le informazioni che sono in esso contenute. Come evidente dal @ abbiamo scelto “razor” come metodo di Markup.
Per il numero di bebè in stanza abbiamo optato per una select perché da specifiche ogni bebè aggiunto ha un costo fisso, proprietà EnfantCost della classe RoomType. Quindi la scelta del numero di bebé dovrà avere influenza anche sul costo finale.

Per quanto riguarda invece il costo di ogni combinazione (le righe) il codice:

Con questo codice la vista dei risultati diventa:

screen

Ovviamente per ora non ci soffermiamo sull’aspetto grafico, ma concentrandoci sulle risposte agli input degli utenti e sulle specifiche di progetto, definiamo una serie di funzioni javascript (richiamate in vari eventi nel codice sopra scritto) di seguito elencate:

Nel definire il codice HTML e le funzioni javascript abbiamo usato alcune tecniche che saranno oggetto dei successivi articoli

(683)

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..