Il modello di architettura Model-View-Controller (MVC) è da tempo un punto di riferimento per lo sviluppo di applicazioni web strutturate. Separando un'applicazione in tre componenti interconnessi—Model (data e logica aziendale), View (interfaccia utente), e Controller (gestione input)—MVC promuove il codice organizzato che è più facile da mantenere, testare e estendere.

Cos'è una ViewModel?

[LT6] è una classe personalizzata progettata specificamente per soddisfare le esigenze di dati e comportamenti di una particolare vista. Si trova tra il modello (il dominio o lo strato di accesso ai dati) e il Visualizza, trasformando i dati grezzi in una forma che la vista può consumare senza sforzo.

Considerare una pagina del profilo utente tipico. Il modello di dominio potrebbe avere separato [ e entità. Un [] potrebbe combinare il nome del display dell'utente, la città e lo stato in un unico string, e presentare la data di adesione in un formato leggibile dall'uomo.

ViewModel vs. Domain Model vs. DTO

Un oggetto di trasferimento dati (DTO) è spesso usato per spostare i dati tra gli strati (ad esempio, da un servizio a un controller) e di solito manca di comportamento. Un ViewModel, d'altra parte, è view-specific e può includere logica di presentazione, attributi di validazione e gestione dello stato (ad esempio, è l'utente in modalità di modifica?).

Come visualizzare i modi semplificare la trasmissione dei dati

In framework MVC lato server come ASP.NET MVC, Spring MVC o Laravel, la binding dei dati avviene tipicamente durante le sottomissioni dei moduli: il framework legge i parametri di richiesta HTTP e li mappa a un oggetto modello. Quando tale oggetto è un ViewModel, la mappatura diventa semplice e sicura.

Utilizzando una ViewModel per la binding dei dati offre diversi vantaggi:

  • Mapping preciso dei campi di forma:[] È possibile definire esattamente quali campi la vista si aspetta, evitando attacchi sovra-posting dove un utente maligno inietta campi extra (ad esempio, impostando su un modulo di registrazione).
  • A attributi di validazione a caratteri di tipo strategico:[]] ViewModels consentono di inserire le regole di validazione (come [, [], o validatori personalizzati) direttamente sulle proprietà che la visualizzazione rende.
  • Esecuzioni di binding reducibili: Poiché il ViewModel mappa un-a-uno con il modulo UI, gli sviluppatori evitano l'ipotesi di parametri di richiesta corrispondenti a grafici di oggetti complessi.

Esempio: Modulo di registrazione dell'utente

Senza ViewModel, un controller potrebbe legare una richiesta di registrazione a un modello di dominio con campi come [] e ] che il modulo non dovrebbe mai impostare. Con un contenente solo ], mantiene il modello di logica , il controller può legare in modo sicuro, convalidare la mappa

Nei quadri lato client che utilizzano la legatura a due vie (ad esempio, Angular o Vue.js), ViewModels svolgono un ruolo simile definendo la forma dei dati che i componenti visualizzeranno e modificheranno.

Ruolo di ViewModels in Presentazione Logic

La logica di presentazione comprende tutto ciò che la vista ha bisogno di fare con i dati: date di formattazione, conversione della valuta, nomi di concatenazione, calcolo dei totali, decidere quali sezioni mostrare in base alle autorizzazioni dell'utente, e gestione dello stato dell'interfaccia utente (ad esempio, "Loading" vs. "Error"). Senza ViewModels, questa logica finisce spesso nella vista (utilizzando funzioni di helper o formattazione inline) o nel controller di moderabile.

Per esempio, una vista dettagli ordine potrebbe essere necessario visualizzare:

  • Data d'ordine in un formato amichevole (“Marzo 15, 2025”)
  • Nome completo del cliente (combinato dal primo e dall'ultimo)
  • Ogni elemento linea con un subtotale (quantità × prezzo unitario)
  • Ordine totale con tassa e spedizione
  • Se l'ordine è idoneo per la cancellazione (basato sullo stato e il tempo trascorso)

Tutte queste trasformazioni appartengono al ViewModel. La vista rende semplicemente proprietà come [, [], (ciascuna ] con un []]), e . Il controller crea il ViewModel recuperando il modello di dominio dallo strato di servizio, mappando alla vista.

Aggregazione di dati da fonti multiple

Un'altra necessità comune è la visualizzazione dei dati da più modelli di dominio su una pagina. Una dashboard potrebbe combinare i dati del profilo utente, gli ordini recenti e le notifiche. Una ViewModel può contenere tutti questi pezzi in un unico oggetto, rendendo facile la visualizzazione per rendere una pagina coesa. Il controller chiama servizi separati e assembla il ViewModel, che mantiene la vista di dover capire più fonti di dati.

Vantaggi dell'utilizzo di ViewModels

I vantaggi di applicare costantemente il modello ViewModel sono sostanziale e direttamente impatto qualità codice, manutenbilità e produttività del team.

Separazione migliorata delle preoccupazioni

ViewModels applica un confine pulito tra lo strato di dominio (le regole di business) e lo strato di presentazione. Le modifiche all'interfaccia utente (come l'aggiunta di un nuovo campo a un modulo) richiedono modifiche solo nella ViewModel e nella vista, non nel modello di dominio.

Testabilità migliorata della logica dell'interfaccia utente

Con ViewModels, è possibile testare la formattazione, l'aggregazione e la gestione dello stato in isolamento dal framework UI. È possibile scrivere test di unità che verificano o senza caricare un browser o rendere HTML. Questo porta a feedback più veloce e codice più affidabile.

Duplicazione del codice ridotta

Quando gli stessi dati devono essere visualizzati in più viste (ad esempio, una scheda prodotto in una lista e in una pagina di dettaglio), è possibile creare una classe ViewModel comune che entrambi i punti di vista utilizzano. La logica di presentazione vive in un posto invece di essere copiata in ogni vista.

Migliore organizzazione dei dati di presentazione-Specifico

ViewModels memorizza lo stato dell'interfaccia utente come “modalità di uscita”, “mostra errori”, o “numero di pagina”. Questo mantiene la vista senza stato e il controller si concentra sulla navigazione. Con i framework che supportano il binding del modello, è anche possibile serializzare lo stato ViewModel attraverso le richieste, consentendo interazioni ricche come maghi multi-step.

Pitfalls e migliori pratiche comuni

Anche con i suoi benefici, il modello ViewModel può essere erroneamente applicato. Qui ci sono errori comuni e come evitarli.

Overusing ViewModels per ogni vista

Per le pagine semplici che corrispondono a un singolo oggetto di dominio, vincolando direttamente a un DTO (o anche il modello di dominio se si utilizza uno strato di sola lettura) può essere accettabile. La regola del pollice: se si trova ad aggiungere proprietà di formattazione o di combinazione, è il momento di un ViewModel.

Anemic ViewModelli

Una ViewModel che non è altro che una borsa di proprietà pubbliche senza comportamento può portare a logica che trapela altrove. Includere metodi di aiuto o proprietà calcolate che incapsulano logica di presentazione (ad esempio, ).

Convenzioni di denominazione

Nome ViewModels esplicitamente per indicare il loro scopo. Utilizzare suffissi come [ (ad esempio, ) o nomi più specifici come se è utilizzato per la presentazione del modulo. Evitare nomi generici come che oscurano l'intenzione.

Mapping tra dominio e ViewModel

La mappatura manuale (proprietà per proprietà) è noiosa e non è corretta. Utilizzare uno strumento come AutoMapper per .NET, MapStruct per Java, o funzioni helper in PHP per automatizzare la mappatura. Tuttavia, fare attenzione a non mappare ciecamente - a volte la struttura ViewModel differisce significativamente dal dominio, e mappatura manuale offre chiarezza.

Implementazione di ViewModels Across Frameworks

I principi sono universali, ma le implementazioni differiscono leggermente. Guardiamo tre popolari framework MVC.

ASP.NET MVC / Core

In ASP.NET MVC, ViewModels sono classi C# semplici posizionate in una cartella . I controller li ricevono tramite parametri del metodo di azione utilizzando attributi o il modello di visualizzazione vincolante. Le viste razor sono fortemente digitate al ViewModel ([39]). Il framework supporta gli attributi di validazione direttamente sulle proprietà del controller ViewModel.

public class UserProfileViewModel
{
 public int Id { get; set; }
 [Display(Name = "Full Name")]
 public string FullName { get; set; }
 public string Email { get; set; }
 [DataType(DataType.Date)]
 public DateTime JoinedDate { get; set; }
}

Ulteriori informazioni su ViewModels in ASP.NET Core da ]La documentazione ufficiale di Microsoft[.

MVC primavera (Java)

In primavera MVC, ViewModels sono spesso chiamati “form backing Objects” o “command Objects”. Sono semplici Java POJOs con annotazioni di validazione (come , ]). Il controller utilizza per legare i dati del modulo al ViewModel. Per scopi di visualizzazione, è possibile inserire i dati nel modello tramite

Laravel (PHP)

Laravel non ha classi ViewModel integrate, ma incoraggia il modello attraverso richieste di forma (valida) e classi di risorse (risposte API). Per le viste finanziate dal server, è possibile creare classi personalizzate o semplicemente passare un array. Tuttavia, utilizzando le classi ViewModel dedicate (ad esempio, ) migliora la sicurezza e la testabilità del tipo.

Modelli avanzati di ViewModel

Mentre le applicazioni crescono, si potrebbe avere bisogno di strutture più sofisticate ViewModel.

I modelli di visualizzazione nidi

Quando una vista contiene un elenco di elementi, creare un genitore ViewModel che tiene una collezione di bambini ViewModels. Ad esempio, un [] potrebbe contenere [ e . Ogni bambino ViewModel ha una propria logica di presentazione.

ViewModel Inheritance e Composizione

Se più viste condividono proprietà comuni (ad esempio, una sezione “intestazione pagina” con informazioni utente e articoli di menu), è possibile creare una classe ViewModel base e estenderla. In alternativa, utilizzare la composizione: includere un come proprietà. La composizione è spesso più flessibile ed evita gerarchie di eredità profonde.

VisualizzaModelli con inizializzazione asincrona

Alcuni ViewModels richiedono dati da chiamate asincroni (ad esempio, API esterne). È possibile creare un metodo di fabbrica o un servizio dedicato che costruisce il ViewModel in modo asincrono. Il controller attende la fabbrica e passa il risultato alla vista. Questo mantiene il controller sincronizzato e testabile, permettendo al ViewModel di essere popolato in modo asincrono.

Conclusioni

ViewModels è uno strumento potente ma spesso sottoutilizzato nello sviluppo di MVC. Servendo come intermediario su misura tra modelli e punti di vista, semplificano la legatura dei dati, centralizzano la logica di presentazione e applicano una separazione pulita delle preoccupazioni. Proteggono i modelli di dominio da cambiamenti specifici dell'interfaccia utente, migliorano la testabilità, riducono la duplicazione e rendono il codebase più mantenibile in quanto l'applicazione si evolve.

Come si implementa ViewModels, ricorda di tenerli magra ma espressiva, leva attributi di validazione e utilizzare strumenti di mappatura in modo magistrale.Evitare la trappola di fare ogni vista dipende da un ViewModel—utilizzarli dove aggiungono valore. La disciplina di progettazione ViewModels acuirà la vostra comprensione delle reali esigenze della vostra interfaccia utente e portare a applicazioni MVC più robuste.