Introduzione a Razor Views in ASP.NET MVC

ASP.NET MVC rimane un cardine dello sviluppo web sullo stack Microsoft, offrendo una separazione pulita delle preoccupazioni e un controllo finemente radicato sulle risposte HTTP. Al cuore del suo motore di visualizzazione si trova Razor, una potente sintassi templante che consente di combinare il codice C# con HTML senza soluzione di continuità.

Questa guida ampliata si immerge più in profondità nelle viste Razor, coprendo la sintassi, le caratteristiche avanzate come layout e parziali, il binding del modello, l'integrazione di validazione e le migliori pratiche di prestazione.

Cosa sono le viste rasoio?

Le viste rasoio sono modelli lato server che combinano il markup HTML con il codice C# incorporato. Quando un utente richiede un URL, il pipeline MVC reindirizza la richiesta a un'azione del controller. Tale azione restituisce tipicamente un ] chiamando ]]. Il framework poi individua il file corrispondente ], esegue il codice Razor per produrre una stringa del browser HTML e inviare

Il vantaggio principale è che Razor compila le visualizzazioni nelle classi .NET a runtime o nel tempo di compilazione (a seconda della configurazione del progetto), permettendo di utilizzare la potenza completa del runtime .NET, compresi loop, condizionali, espressioni complesse e anche la gestione delle eccezioni, direttamente all'interno del markup.

Per esempio, una semplice vista Razor potrebbe assomigliare a questo:

@{
 ViewBag.Title = "Home Page";
}

<h1>Welcome to @ViewBag.Title</h1>
<p>The current server time is @DateTime.Now.ToLongTimeString().</p>

Tutto prefisso con ] segnala una transizione da HTML a C#. Il carattere è il nucleo della sintassi Razor, e il motore è abbastanza intelligente da inferire dove il codice C# termina e il curriculum HTML, anche attraverso spazi, parentesi, o confini tag HTML.

Divergere profondo della sintassi rasoio

Per scrivere le viste Razor efficaci, è necessario capire i vari stili di blocco codice e modalità di espressione disponibili.

Espressioni in linea

La forma più semplice è un'espressione in linea, dove un singolo [] seguito da un'espressione C# emette il risultato come testo.

<p>Your account balance is @balance.ToString("C2")</p>

Se l'espressione restituisce un ] o implementa [], Razor non codifica l'output HTML. Per tutti gli altri tipi, Razor codifica automaticamente il valore per impedire le vulnerabilità di scripting cross-site (XSS).

Blocchi di codice

Usa seguito da un paio di bretelle ricci per scrivere blocchi C# multi-statalement:

@{
 var greeting = "Hello";
 var name = "World";
 var message = greeting + ", " + name + "!";
}
<p>@message</p>

All'interno dei blocchi di codice, è possibile dichiarare variabili, metodi di chiamata e eseguire la logica. L'HTML al di fuori dei brace è ancora reso in sequenza.

Strutture di controllo

Razor supporta le parole chiave di flusso di controllo standard C# come , , , , [, , e ]. Ognuno deve essere prefisso con e seguito da un blocco di codice o da un'unica affermazione.

@if (Model.IsAuthenticated)
{
 <span>Welcome back, @Model.UserName!</span>
}
else
{
 <a href="/Account/Login">Log in</a>
}

Allo stesso modo, i loop si integrano naturalmente:

<ul>
@foreach (var item in Model.Items)
{
 <li>@item.Name (@item.Price.ToString("C"))</li>
}
</ul>

Notare che il è richiesto solo sulla parola chiave di apertura. Il brace di chiusura è semplice C# e Razor riprende correttamente l'HTML quando si incontra il tag.

Osservazioni

Razor fornisce la sua sintassi di commento che rimuove il contenuto dal HTML completamente reso:

@* This is a Razor comment. It will not appear in the output. *@

I commenti HTML () sono ancora inviati al browser e sono visibili nella sorgente.

Caratteri speciali

Per visualizzare un simbolo letterale ], utilizzare . Per gli indirizzi e-mail, Razor li riconosce automaticamente e non richiede la fuga. Ad esempio, è trattato come testo semplice.

Vista e modello fortemente-tirato

Uno dei modelli più potenti di ASP.NET MVC utilizza viste fortemente di tipo. Invece di affidarsi a [] o , si dichiara il tipo di modello in cima alla vista utilizzando la direttiva [ (basso caso ‘m’). Questo ti dà il controllo del tempo di compilazione e il supporto IntelliSense per le proprietà del modello.

@model IEnumerable<Product>

<h2>Product List</h2>
<table class="table">
 <thead>
 <tr>
 <th>Name</th>
 <th>Price</th>
 </tr>
 </thead>
 <tbody>
 @foreach (var product in Model)
 {
 <tr>
 <td>@product.Name</td>
 <td>@product.Price.ToString("C")</td>
 </tr>
 }
 </tbody>
</table>

Il controller passa il modello tramite il metodo :

public ActionResult Products()
{
 var products = db.Products.ToList();
 return View(products);
}

Semplifica anche le sottomissioni dei moduli con il binding del modello, quando viene postato un modulo, il framework MVC automaticamente mappa i dati alle proprietà del parametro del modello nell'azione del controller, a condizione che i nomi dei input corrispondano ai nomi di proprietà del modello.

ViewBag, ViewData e TempData

Mentre sono preferiti modelli fortemente di tipo, il framework offre anche contenitori non di tipo per il passaggio dei dati tra controller e visualizzazioni:

  • ViewBag:[]]] Un oggetto dinamico che permette di impostare proprietà arbitrarie. È un wrapper sopra . Esempio: . Accedere alla vista con .
  • VisualizzaData:[]] Un dizionario di coppie di valori chiave ([[]]]].
  • TempData:[]] Simile a ViewData ma persiste in un singolo reindirizzamento. Viene memorizzato in sessione e cancellato dopo essere stato letto. Utile per la visualizzazione di messaggi una volta come “Record salvato con successo”.

Utilizzare questi meccanismi con parsimonia. Overusing ViewBag può portare a errori di runtime e rende le viste più difficili da mantenere.Riservarli per i dati ausiliari raramente necessari che non si adattano al modello principale.

Arredamento e ViewStart

I layout danno alla vostra applicazione un aspetto coerente e si sentono definendo una pagina master comune. Un layout è un file che contiene la struttura esterna di una pagina (intestazione, navigazione, piè di pagina) e una chiamata dove il contenuto di singole viste è inserito.

Per esempio, un tipico potrebbe assomigliare a:

<!DOCTYPE html>
<html>
<head>
 <title>@ViewBag.Title - My App</title>
 @Styles.Render("~/Content/css")
</head>
<body>
 <nav>...</nav>
 <main>
 @RenderBody()
 </main>
 <footer>...</footer>
 @Scripts.Render("~/bundles/js")
 @RenderSection("Scripts", required: false)
</body>
</html>

Per convenzione, il file nella cartella imposta il layout predefinito per tutte le visualizzazioni in quella cartella:

@{
 Layout = "~/Views/Shared/_Layout.cshtml";
}

È possibile sovrascrivere il layout in qualsiasi visualizzazione specifica riassegnando la proprietà [. Questo è particolarmente utile per le pagine che hanno bisogno di un layout completamente diverso, come le pagine di login o le pagine di errore.

Partial Views and View Components

I frammenti di UI riutilizzabili sono visibili in modo particolare all'interno di altre viste. Sono particolarmente utili per forme complesse, elementi di elenco o qualsiasi componente che appare in più posti. Per creare una visione parziale, basta creare un file convenzionalmente chiamato con un sottoscopo principale (ad esempio, ).

È possibile visualizzare una visione parziale da un'altra vista utilizzando o :

@Html.Partial("_ProductCard", item)

La differenza è che restituisce una stringa HTML, mentre scrive direttamente al flusso di risposta (sfortunatamente più veloce per grandi parziali, ma non può essere utilizzato all'interno di un blocco di codice).

Per componenti riutilizzabili più complessi e logiche (come un riassunto del carrello che richiede l'accesso al database), prendere in considerazione [Visualizza Componenti]. Visualizza Componenti sono classi a pieno titolo con il proprio metodo Invoke/InvokeAsync, che consente l'iniezione di servizi e la lavorazione complessa.

public class CartSummaryViewComponent : ViewComponent
{
 public async Task<IViewComponentResult> InvokeAsync()
 {
 var cart = await GetCartAsync();
 return View(cart);
 }
}

Invoca da una vista con .

Sezioni e Rimborso

Le sezioni consentono di definire le regioni in un layout che le singole viste possono riempire. I casi di utilizzo comuni includono l'iniezione di script specifici per pagina, fogli di stile o contenuti per la barra laterale. Nel layout, dichiara una sezione con .

@section Scripts {
 <script src="~/Scripts/page-specific.js"></script>
}

Se una sezione è contrassegnata come richiesto ([[]), ogni visualizzazione che utilizza il layout deve definirlo, o verrà gettata un'eccezione.

Puoi anche controllare se una sezione è stata definita nella visualizzazione utilizzando all'interno del layout, che consente di fornire contenuti di default.

HTML Helpers vs Tag Helpers

Le viste rasoio offrono due famiglie di strumenti lato server per la generazione di HTML: HTML Helpers e Tag Helpers.

  • Help[]]] sono metodi chiamati nella vista, come [] o ]. Essi ritornano stringhe HTML e sono familiari agli sviluppatori che hanno lavorato con le versioni precedenti di MVC.
  • Tag Helpers[]] sono stati introdotti in ASP.NET Core ma sono disponibili anche in ASP.NET MVC 5.x tramite un pacchetto NuGet (). Essi consentono di scrivere tag simili a HTML che i processi server, ad esempio, .

Ad esempio, creare un modulo con Tag Helpers sembra:

<form asp-action="Submit" asp-controller="Home" method="post">
 <label asp-for="Email"></label>
 <input asp-for="Email" />
 <span asp-validation-for="Email"></span>
 <button type="submit">Submit</button>
</form>

Tag Helpers si lega automaticamente alle proprietà del modello, rende gli attributi di validazione e genera URL corretti. Sono generalmente preferiti per il nuovo sviluppo perché si integrano perfettamente con la validazione unobtrusive e sono più facili da mantenere.

Gestione di convalida e errore

Le viste rasoio funzionano in concerto con il sistema di validazione in ASP.NET MVC. È possibile visualizzare errori di validazione a livello di modello e di livello di proprietà utilizzando gli helper HTML o Tag Helpers. Il visualizza tutti gli errori contemporaneamente, e mostra errori per un campo specifico.

@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

Quando si utilizza Tag Helpers, l'intervallo di validazione viene automaticamente aggiunto e popolato durante il modello di binding se la convalida non viene eseguita. Questo markup di convalida lato client viene generato utilizzando annotazioni di dati sul modello, come , , e .

Per abilitare la validazione di lato client unobtrusive, assicurarsi che le librerie JavaScript necessarie ([] e []) sono incluse nel layout, di solito nella sezione .

Rasoio con AJAX e Rendering parziale

Le viste rasoio non sono limitate ai carichi di pagina completi. È possibile utilizzarle per rendere HTML parziale che viene restituito tramite AJAX e inserito nel DOM. Creare un'azione del controller che restituisce una vista parziale:

public ActionResult ProductDetails(int id)
{
 var product = db.Products.Find(id);
 if (product == null) return HttpNotFound();
 return PartialView("_ProductDetails", product);
}

Sul lato client, utilizzare jQuery o l'ausilio [] per caricare il risultato parziale in un contenitore:

@Ajax.ActionLink("View Details", "ProductDetails", new { id = item.Id },
 new AjaxOptions { UpdateTargetId = "detailsContainer" })

In alternativa, è possibile scrivere una semplice chiamata jQuery [] che aggiorna manualmente il contenitore. Il vantaggio di utilizzare Razor parziali per AJAX è che la logica del server e il markup rimangono coerenti, evitando duplicazioni tra risposte complete e parziali.

Considerazioni di performance per Razor Views

Sebbene le opinioni Razor siano compilate, ci sono ancora insidie di prestazioni per evitare:

  • Avoid logica eccessiva nelle visualizzazioni. Tenere la vista il più semplice possibile; spostare calcoli complessi, trasformazioni dei dati e regole aziendali al controller, strato di servizio, o modello di vista.
  • Usa caching in modo magistrale. Per le opinioni che raramente cambiano (ad esempio, navigazione statica), considerare l'applicazione di cache di uscita con l'attributo sull'azione del controller. Per le opinioni parziali che sono costose da rendere, utilizzare con (estensione del cliente) o un quadro di caching:[F] [F] [[F] [F.
  • ]Minimizzare il numero di visualizzazioni parziali rese per pagina. Ogni chiamata aggiunge la testa. Se un parziale viene utilizzato molte volte in un loop, considerare la costruzione dell'HTML nel controller utilizzando uno StringBuilder o un generatore HTML personalizzato.
  • Utilizzare azioni asincroni per operazioni I/O-bound.] Se la tua vista dipende da dati che riguardano query di database o chiamate API esterne, definire l'azione del controller come e chiamare prima di passare il modello. Questo libera i thread durante l'attesa I/O.
  • I punti di vista del rasoio precompilato[] in produzione utilizzando [ o il built-in [[] in ASP.NET MVC 5 (via impostato a in proprietà del progetto).

Migliori Pratiche per Vista Rasoio Mantenibile

  • Sempre utilizzare modelli fortemente di tipo[[]] ed evitare ViewBag per i dati principali.
  • Convenzioni di denominazione:[]] le opinioni dovrebbero corrispondere ai nomi di azione del controller e i parziali devono essere prefissi con il sottoscopo.
  • Utilizzare i modelli di visualizzazione e di editor[[] per i display di tipo di dati riutilizzabili. Ad esempio, creare per formattare le date in modo coerente.
  • Separare CSS e JavaScript[] da viste. Mettere solo stili in linea minimi; utilizzare bundling e minificazione per le risorse esterne.
  • Test di unità di scrittura per i controller e modelli di visualizzazione. Mentre le opinioni stesse sono difficili da testare, assicurarsi che i dati trasmessi loro è corretto.
  • I layout sono focalizzati. Non mettere la logica pesante o il recupero dei dati in un layout. I layout dovrebbero contenere solo l'HTML ponteggio e le chiamate a e le sezioni.

Conclusioni

Le viste rasoio sono la spina dorsale della generazione HTML dinamica in ASP.NET MVC. La loro sintassi pulita, l'integrazione senza soluzione di continuità con C#, e il supporto per la digitazione forte, layout, parziali e la validazione li rendono un potente strumento per la costruzione di applicazioni web mantenute.

Per ulteriori informazioni, consultare la documentazione ufficiale di Microsoft su Razor Syntax, ]Partial Views[], e ]Tag Helpers in ASP.NET Core]] (che si applicano anche a MVC 5 con i riferimenti di pacchetto idonei).