Panoramica delle visualizzazioni ASP.NET MVC (C#)
Che cos'è una visualizzazione MVC ASP.NET e in che modo differisce da una pagina HTML? In questa esercitazione Stephen Walther presenta le visualizzazioni e illustra come sfruttare i vantaggi di Visualizzare i dati e gli helper HTML all'interno di una visualizzazione.
Lo scopo di questa esercitazione è fornire una breve introduzione a ASP.NET visualizzazioni MVC, visualizzare i dati e gli helper HTML. Al termine di questa esercitazione, è necessario comprendere come creare nuove visualizzazioni, passare dati da un controller a una visualizzazione e usare helper HTML per generare contenuto in una visualizzazione.
Informazioni sulle viste
Per ASP.NET o Pagine server attive, ASP.NET MVC non include elementi che corrispondono direttamente a una pagina. In un'applicazione ASP.NET MVC non esiste una pagina su disco corrispondente al percorso nell'URL digitato nella barra degli indirizzi del browser. L'elemento più vicino a una pagina in un'applicazione MVC ASP.NET è un elemento denominato visualizzazione.
In un'applicazione MVC ASP.NET, le richieste del browser in ingresso vengono mappate alle azioni del controller. Un'azione del controller potrebbe restituire una visualizzazione. Tuttavia, un'azione del controller potrebbe eseguire un altro tipo di azione, ad esempio reindirizzando l'utente a un'altra azione del controller.
L'elenco 1 contiene un controller semplice denominato HomeController. HomeController espone due azioni del controller denominate Index() e Details().
Elenco 1 - HomeController.cs
using System.Web.Mvc;
namespace MvcApplication1.Controllers
{
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Details()
{
return RedirectToAction("Index");
}
}
}
È possibile richiamare la prima azione, l'azione Index(), digitando l'URL seguente nella barra degli indirizzi del browser:
/Home/Index
È possibile richiamare la seconda azione, l'azione Details(), digitando questo indirizzo nel browser:
/Home/Details
L'azione Index() restituisce una vista. La maggior parte delle azioni create restituirà visualizzazioni. Tuttavia, un'azione può restituire altri tipi di risultati dell'azione. Ad esempio, l'azione Details() restituisce un valore RedirectToActionResult che reindirizza la richiesta in ingresso all'azione Index().
L'azione Index() contiene la riga di codice seguente:
View();
Questa riga di codice restituisce una vista che deve trovarsi nel percorso seguente nel server Web:
\Views\Home\Index.aspx
Il percorso della visualizzazione viene dedotto dal nome del controller e dal nome dell'azione del controller.
Se si preferisce, è possibile essere espliciti sulla visualizzazione. La riga di codice seguente restituisce una vista denominata Fred :
View( Fred );
Quando viene eseguita questa riga di codice, viene restituita una vista dal percorso seguente:
\Views\Home\Fred.aspx
Nota
Se si prevede di creare unit test per l'applicazione ASP.NET MVC, è consigliabile essere espliciti sui nomi di visualizzazione. In questo modo, è possibile creare uno unit test per verificare che la vista prevista sia stata restituita da un'azione del controller.
Aggiunta di contenuto a una visualizzazione
Una visualizzazione è un documento HTML standard (X)che può contenere script. Si usano script per aggiungere contenuto dinamico a una visualizzazione.
Ad esempio, la visualizzazione in Listato 2 visualizza la data e l'ora correnti.
Elenco 2 - \Views\Home\Index.aspx
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Index</title>
</head>
<body>
<div>
The current date and time is
<% Response.Write(DateTime.Now);%>
</div>
</body>
</html>
Si noti che il corpo della pagina HTML nell'elenco 2 contiene lo script seguente:
<% Response.Write(DateTime.Now);%>
Utilizzare i delimitatori <di script % e %> per contrassegnare l'inizio e la fine di uno script. Questo script è scritto in C#. Visualizza la data e l'ora correnti chiamando il metodo Response.Write() per eseguire il rendering del contenuto nel browser. I delimitatori <di script % e %> possono essere utilizzati per eseguire una o più istruzioni.
Poiché si chiama Response.Write() così spesso, Microsoft fornisce un collegamento per chiamare il metodo Response.Write(). La visualizzazione nell'elenco 3 usa i delimitatori <%= e %> come collegamento per chiamare Response.Write().
Elenco 3 - Views\Home\Index2.aspx
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Index</title>
</head>
<body>
<div>
The current date and time is
<%=DateTime.Now %>
</div>
</body>
</html>
È possibile usare qualsiasi linguaggio .NET per generare contenuto dinamico in una visualizzazione. In genere, si userà Visual Basic .NET o C# per scrivere controller e visualizzazioni.
Uso di helper HTML per generare contenuto di visualizzazione
Per semplificare l'aggiunta di contenuto a una visualizzazione, è possibile sfruttare un elemento denominato helper HTML. Un helper HTML, in genere, è un metodo che genera una stringa. È possibile usare helper HTML per generare elementi HTML standard, ad esempio caselle di testo, collegamenti, elenchi a discesa e caselle di riepilogo.
Ad esempio, la visualizzazione nell'elenco 4 sfrutta tre helper HTML, ovvero BeginForm(), gli helper TextBox() e Password() per generare un modulo di accesso (vedere la figura 1).
Elenco 4 -- \Views\Home\Login.aspx
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Login Form</title>
</head>
<body>
<div>
<% using (Html.BeginForm())
{ %>
<label for="UserName">User Name:</label>
<br />
<%= Html.TextBox("UserName") %>
<br /><br />
<label for="Password">Password:</label>
<br />
<%= Html.Password("Password") %>
<br /><br />
<input type="submit" value="Log in" />
<% } %>
</div>
</body>
</html>
Figura 01: Modulo di accesso standard (fare clic per visualizzare l'immagine a dimensione intera)
Tutti i metodi helper HTML vengono chiamati sulla proprietà Html della visualizzazione. Ad esempio, si esegue il rendering di un controllo TextBox chiamando il metodo Html.TextBox().
Si noti che si usano i delimitatori <di script %= e %> quando si chiamano gli helper Html.TextBox() e Html.Password(). Questi helper restituiscono semplicemente una stringa. È necessario chiamare Response.Write() per eseguire il rendering della stringa nel browser.
L'uso dei metodi helper HTML è facoltativo. Semplificano la vita riducendo la quantità di codice HTML e script che è necessario scrivere. La visualizzazione nell'elenco 5 esegue il rendering esattamente dello stesso modulo della visualizzazione nell'elenco 4 senza usare helper HTML.
Elenco 5 -- \Views\Home\Login.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index4.aspx.cs" Inherits="MvcApp.Views.Home.Index4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Login Form without Help</title>
</head>
<body>
<div>
<form method="post" action="/Home/Login">
<label for="userName">User Name:</label>
<br />
<input name="userName" />
<br /><br />
<label for="password">Password:</label>
<br />
<input name="password" type="password" />
<br /><br />
<input type="submit" value="Log In" />
</form>
</div>
</body>
</html>
È anche possibile creare helper HTML personalizzati. Ad esempio, è possibile creare un metodo helper GridView() che visualizza automaticamente un set di record di database in una tabella HTML. Questo argomento viene illustrato nell'esercitazione Creazione di helper HTML personalizzati.
Uso di Visualizza dati per passare dati a una vista
I dati di visualizzazione vengono usati per passare i dati da un controller a una vista. Si pensi a visualizzare dati come un pacchetto inviato tramite posta elettronica. Tutti i dati passati da un controller a una vista devono essere inviati usando questo pacchetto. Ad esempio, il controller nell'elenco 6 aggiunge un messaggio per visualizzare i dati.
Listato 6 - ProductController.cs
using System.Web.Mvc;
namespace MvcApplication1.Controllers
{
public class ProductController : Controller
{
public ActionResult Index()
{
ViewData["message"] = "Hello World!";
return View();
}
}
}
La proprietà ViewData del controller rappresenta una raccolta di coppie nome e valore. Nell'elenco 6 il metodo Index() aggiunge un elemento alla raccolta di dati di visualizzazione denominata message con il valore Hello World!. Quando la vista viene restituita dal metodo Index(), i dati della visualizzazione vengono passati automaticamente alla visualizzazione.
La visualizzazione nell'elenco 7 recupera il messaggio dai dati di visualizzazione ed esegue il rendering del messaggio nel browser.
Elenco 7 -- \Views\Product\Index.aspx
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Product Index</title>
</head>
<body>
<div>
<%= Html.Encode(ViewData["message"]) %>
</div>
</body>
</html>
Si noti che la visualizzazione sfrutta il metodo helper HTML Html.Encode() durante il rendering del messaggio. L'helper HTML Html.Encode() codifica caratteri speciali come < e > in caratteri sicuri da visualizzare in una pagina Web. Ogni volta che si esegue il rendering del contenuto inviato da un utente a un sito Web, è necessario codificare il contenuto per evitare attacchi JavaScript injection.
Poiché il messaggio è stato creato in ProductController, non è necessario codificare il messaggio. Tuttavia, è consigliabile chiamare sempre il metodo Html.Encode() quando si visualizza il contenuto recuperato dai dati di visualizzazione all'interno di una vista.
Nell'elenco 7 sono stati sfruttati i dati di visualizzazione per passare un semplice messaggio stringa da un controller a una visualizzazione. È anche possibile usare i dati di visualizzazione per passare altri tipi di dati, ad esempio una raccolta di record di database, da un controller a una vista. Ad esempio, se si desidera visualizzare il contenuto della tabella di database Products in una vista, si passerà la raccolta di record di database nei dati di visualizzazione.
È anche possibile passare dati di visualizzazione fortemente tipizzata da un controller a una vista. Questo argomento viene esaminato nell'esercitazione Informazioni sui dati e le visualizzazioni con visualizzazione fortemente tipizzata.
Riepilogo
Questa esercitazione ha fornito una breve introduzione a ASP.NET visualizzazioni MVC, visualizzare i dati e gli helper HTML. Nella prima sezione si è appreso come aggiungere nuove visualizzazioni al progetto. Si è appreso che è necessario aggiungere una visualizzazione alla cartella corretta per chiamarla da un determinato controller. Successivamente, è stato illustrato l'argomento degli helper HTML. Si è appreso come gli helper HTML consentono di generare facilmente contenuto HTML standard. Infine, si è appreso come sfruttare i dati di visualizzazione per passare i dati da un controller a una visualizzazione.
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per