Panoramica delle visualizzazioni ASP.NET MVC (VB)

Articolo
2023-07-13

Che cos'è una visualizzazione MVC ASP.NET e come differisce da una pagina HTML? In questa esercitazione Stephen Walther presenta visualizzazioni e illustra come sfruttare i vantaggi di Visualizza dati e 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. Alla fine 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

A differenza di 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 è presente una pagina sul 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 è qualcosa di nome visualizzazione.

In un'applicazione MVC ASP.NET, le richieste del browser in ingresso vengono mappate alle azioni del controller. Un'azione 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 semplice controller denominato HomeController. HomeController espone due azioni controller denominate Index() e Details().

Elenco 1 - HomeController.vb

<HandleError()> _
Public Class HomeController
    Inherits System.Web.Mvc.Controller

    Function Index()
        Return View()
    End Function

    Function Details()
        Return RedirectToAction("Index")
    End Function
End Class

È 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/Dettagli

L'azione Index() restituisce una visualizzazione. 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 oggetto 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 visualizzazione 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 visualizzazione dal percorso seguente:

\Views\Home\Fred.aspx

Nota

Se si prevede di creare unit test per l'applicazione MVC ASP.NET, è consigliabile essere espliciti sui nomi di visualizzazione. In questo modo, è possibile creare un unit test per verificare che la visualizzazione 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 nella presentazione 2 visualizza la data e l'ora correnti.

Elenco 2 - \Views\Home\Index.aspx

<%@ Page Language="VB" 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)%>

Si usano i delimitatori <di script % e %> per contrassegnare l'inizio e la fine di uno script. Questo script viene scritto in Visual Basic. 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 usati per eseguire una o più istruzioni.

Poiché si chiama Response.Write() 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="VB" 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 i controller e le viste.

Uso di helper HTML per generare contenuto di visualizzazione

Per semplificare l'aggiunta di contenuto a una visualizzazione, è possibile sfruttare qualcosa di chiamato 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="VB" 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" />        
    
    <% End Using%>

    </div>
</body>
</html>

Figura 01: modulo di accesso standard (fare clic per visualizzare l'immagine full-size)

Tutti i metodi helper HTML vengono chiamati sulla proprietà Html della visualizzazione. Ad esempio, si esegue il rendering di un oggetto TextBox chiamando il metodo Html.TextBox().

Si noti che si usano i delimitatori di script %= e %> quando si chiamano sia gli helper <Html.TextBox() che 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 HTML e script che è necessario scrivere. La visualizzazione nell'elenco 5 esegue il rendering dello stesso modulo della visualizzazione nell'elenco 4 senza usare helper HTML.

Elenco 5 -- \Views\Home\Login.aspx

<%@ Page Language="VB" 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>
        
    <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 i dati a una visualizzazione

Si usano i dati per passare i dati da un controller a una visualizzazione. Si considerino i dati di visualizzazione come un pacchetto inviato tramite posta elettronica. Tutti i dati passati da un controller a una visualizzazione devono essere inviati usando questo pacchetto. Ad esempio, il controller nell'elenco 6 aggiunge un messaggio per visualizzare i dati.

Elenco 6 - ProductController.vb

Public Class ProductController
    Inherits System.Web.Mvc.Controller

    Function Index()
        ViewData("message") = "Hello World!"
        Return View()
    End Function

End Class

La proprietà ViewData del controller rappresenta una raccolta di coppie nome e valore. Nell'elenco 6 il metodo Index() aggiunge un elemento alla raccolta dati di visualizzazione denominata message con il valore Hello World!. Quando la visualizzazione viene restituita dal metodo Index(), i dati di visualizzazione vengono passati automaticamente alla visualizzazione.

La visualizzazione nell'elenco 7 recupera il messaggio dai dati della visualizzazione e esegue il rendering del messaggio nel browser.

Elenco 7 -- \Views\Product\Index.aspx

<%@ Page Language="VB" 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.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 a un sito Web, è necessario codificare il contenuto per impedire attacchi di inserimento JavaScript.

Poiché è stato creato il messaggio in ProductController, non è necessario codificare il messaggio. Tuttavia, è consigliabile chiamare sempre il metodo Html.Encode() durante la visualizzazione del 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 visualizzazione. Ad esempio, se si desidera visualizzare il contenuto della tabella di database Products in una visualizzazione, si passerà la raccolta di record di database nella visualizzazione dei dati.

È anche possibile passare dati di visualizzazione fortemente tipizzata da un controller a una visualizzazione. Questo argomento viene illustrato nell'esercitazione Informazioni sui dati e le visualizzazioni fortemente tipizzato.

Riepilogo

Questa esercitazione ha fornito una breve introduzione alle visualizzazioni ASP.NET 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.

Indietro Avanti

Condividi tramite