PROGETTARE LA FUNZIONALITA’ DI MODIFICA DEI DATI

NET CORE

Andiamo a vedere con una slide cosa ci serve per realizzare il form di modifica.

Realizzare il form di modifica

Partiamo dalla classe di Input Model. Teniamo separate le responsabilità ed evitiamo la tentazione di utilizzare altre classi. Il nostro input model per la modifica sarà CourseEditInputModel.cs

Input Model

Vediamo una Data Annotation Display che non serve per la validazione ma solo per visualizzare un’etichetta nella UI che faciliterà le traduzioni nei siti multilingue.

Label

Nella classe CourseEditInputModel.cs oltre alla Data Annotation Display, vi è un’altra novità. Questa classe implementa IValidatableObject, questa interfaccia consente di scrivere logica di validazione all’interno dell’input model, facendo l’override del metodo Validate. Ti mostro il codice.

Validazione

Per il resto i punti sono stati implementati uno ad uno, a parte la View, vai nel CoursesController e guarda i metodi di edit. Naviga fino ad arrivare alle implementazioni concrete nelle tre classi applicative e guarda il codice che è stato scritto, oramai dovrebbe esserti familiare. La differenza con il form di inserimento è che nel metodo http GET dobbiamo valorizzare l’input model e non presentare un corso vuoto in quanto il corso è già stato inserito.

REALIZZARE IL FORM DI MODIFICA DEI DATI

Vediamo quale è la specifica.

Specifica

Per l’immagine il tipo string non è adeguato, l’utente dovrà fare l’upload di un file binario, che il file dell’immagine del prodotto. L’immagine riporta il form che andremo a realizzare.

Form

Il campo Id è presente ma è nascosto, lo utilizzeremo quando ad esempio salveremo il corso. Anche se le proprietà sono annidate all’interno di oggetti complessi, possiamo usare la Dot Notations per far riferimento ad essi.

Vari tipi di input
Mobile
Type
input

INVALIDARE LA CACHE E CONFERMARE L’AVVENUTO SALVATAGGIO

In questa parte andremo a chiudere il cerchio intorno alla funzionalità di modifica. Dobbiamo innanzitutto aprire la View di dettaglio del corso e inserire un pulsante per la modifica, come da specifica.

Dettaglio corso

Questo pulsante non sarà visualizzato sempre, lo vedrà solamente l’autore del corso, questo quando implementeremo l’autenticazione e l’autorizzazione, mentre gli studenti e gli utenti anonimi non lo vedranno. Questa può essere una buona alternativa rispetto al realizzare un intera area riservata. Vediamo come ho realizzato il pulsante di modifica nella View di dettaglio.

Pulsante

Se modifichiamo il titolo di un corso e torniamo nella lista vedremo che tale titolo non si è aggiornato in quando è stato tratto dalla cache. Invalidare la cache per la lista dei corsi è un grosso problema perché come ti ricorderai la chiave è costruita sulla combinazione di diverse variabili; quindi, dobbiamo attendere che scada la cache per vedere il titolo aggiornato. Quello che possiamo invece fare è invalidare la cache per il dettaglio del corso la cui chiave dipende dal solo campo Id e reindirizzare l’utente a tale View.

Invalidare la cache

Vediamo il codice che invalida la cache per la pagina di dettaglio del corso.

Cache

Una volta reindirizzato l’utente alla pagina di dettaglio dove leggerà dati freschi, cioè provenienti dal database possiamo informarlo che la modifica è stata eseguita con successo utilizzando l’oggetto TempData il cui messaggio associato rimane disponibile dopo un reindirizzamento.

TempData

LINK AL CODICE SU GITHUB

GITHUB

Scaricare il codice della sezione15 oppure il ramo master oppure clonare il repository GITHUB per avere a disposizione tutte le sezioni nel tuo editor preferito.