Visualizzazione di una tabella di dati del database (VB)

2023-07-13

In questa esercitazione vengono illustrati due metodi per visualizzare un set di record di database. Vengono mostrati due metodi di formattazione di un set di record di database in una tabella HTML. In primo luogo, viene illustrato come formattare i record di database direttamente all'interno di una visualizzazione. Successivamente, viene illustrato come sfruttare i vantaggi di parziali durante la formattazione dei record di database.

L'obiettivo di questa esercitazione è spiegare come visualizzare una tabella HTML dei dati del database in un'applicazione MVC ASP.NET. Per prima cosa, si apprenderà come usare gli strumenti di scaffolding inclusi in Visual Studio per generare una visualizzazione che visualizza automaticamente un set di record. Si apprenderà quindi come usare un modello parziale come modello durante la formattazione dei record di database.

Creare le classi del modello

Verrà visualizzato il set di record dalla tabella del database Movies. La tabella di database Movies contiene le colonne seguenti:

Nome colonna	Tipo di dati	Consenti valori NULL
ID	Int	Falso
Titolo	Nvarchar(200)	Falso
Responsabile	NVarchar(50)	Falso
DateReleased	Datetime	Falso

Per rappresentare la tabella Movies nell'applicazione MVC ASP.NET, è necessario creare una classe modello. In questa esercitazione viene usato Microsoft Entity Framework per creare le classi di modello.

Nota

In questa esercitazione viene usato Microsoft Entity Framework. È tuttavia importante comprendere che è possibile usare diverse tecnologie per interagire con un database da un'applicazione MVC ASP.NET, tra cui LINQ to SQL, NHibernate o ADO.NET.

Seguire questa procedura per avviare la Creazione guidata modello di entità:

Fare clic con il pulsante destro del mouse sulla cartella Modelli nella finestra Esplora soluzioni e scegliere l'opzione di menu Aggiungi, Nuovo elemento.
Selezionare la categoria Dati e selezionare il modello ADO.NET Entity Data Model .
Assegnare al modello di dati il nome MoviesDBModel.edmx e fare clic sul pulsante Aggiungi .

Dopo aver fatto clic sul pulsante Aggiungi, viene visualizzata la Creazione guidata modello di entità (vedere la figura 1). Seguire questa procedura per completare la procedura guidata:

Nel passaggio Scegli contenuto modello selezionare l'opzione Genera dal database .
Nel passaggio Scegli connessione dati usare la connessione dati MoviesDB.mdf e il nome MoviesDBEntities per le impostazioni di connessione. Fare clic sul pulsante Next (Avanti).
Nel passaggio Scegli oggetti di database espandere il nodo Tabelle, selezionare la tabella Film. Immettere i modelli dello spazio dei nomi e fare clic sul pulsante Fine .

Figura 01: Creazione di classi LINQ to SQL (Fare clic per visualizzare l'immagine a dimensioni complete)

Dopo aver completato la Creazione guidata modello di dati di entità, viene visualizzata la Designer del modello di dati di entità. La Designer deve visualizzare l'entità Movies (vedere la figura 2).

Figura 02: Il modello di dati di entità Designer (fare clic per visualizzare l'immagine a dimensioni complete)

Prima di continuare, è necessario apportare una modifica. La Creazione guidata dati entity genera una classe di modello denominata Movies che rappresenta la tabella di database Movies. Poiché si userà la classe Movies per rappresentare un particolare film, è necessario modificare il nome della classe in modo che sia Movie anziché Movies (singolare anziché plurale).

Fare doppio clic sul nome della classe nell'area di progettazione e modificare il nome della classe da Movies a Movie. Dopo aver apportato questa modifica, fare clic sul pulsante Salva (icona del disco floppy) per generare la classe Movie.

Creare il controller dei film

Ora che è possibile rappresentare i record di database, è possibile creare un controller che restituisce la raccolta di film. Nella finestra di Esplora soluzioni di Visual Studio fare clic con il pulsante destro del mouse sulla cartella Controller e selezionare l'opzione di menu Aggiungi, Controller (vedere Figura 3).

Figura 03: Menu Aggiungi controller (Fare clic per visualizzare l'immagine full-size)

Quando viene visualizzata la finestra di dialogo Aggiungi controller , immettere il nome del controller MovieController (vedere la figura 4). Fare clic sul pulsante Aggiungi per aggiungere il nuovo controller.

Figura 04: Finestra di dialogo Aggiungi controller (Fare clic per visualizzare l'immagine full-size)

È necessario modificare l'azione Index() esposta dal controller Movie in modo che restituisca il set di record di database. Modificare il controller in modo che sia simile al controller nell'elenco 1.

Elenco 1 - Controller\MovieController.vb

Public Class MovieController

    Inherits System.Web.Mvc.Controller 

    '

    ' GET: /Movie/ 

    Function Index() As ActionResult

        Dim entities As New MoviesDBEntities()

        Return View(entities.MovieSet.ToList())

    End Function 

End Class

Nella classe List 1 la classe MoviesDBEntities viene usata per rappresentare il database MoviesDB. Entità dell'espressione . MovieSet.ToList() restituisce il set di tutti i film dalla tabella di database Film.

Creare la visualizzazione

Il modo più semplice per visualizzare un set di record di database in una tabella HTML consiste nel sfruttare lo scaffolding fornito da Visual Studio.

Compilare l'applicazione selezionando l'opzione di menu Compila, Compila soluzione. È necessario compilare l'applicazione prima di aprire la finestra di dialogo Aggiungi visualizzazione o le classi di dati non verranno visualizzate nella finestra di dialogo.

Fare clic con il pulsante destro del mouse sull'azione Index() e selezionare l'opzione di menu Aggiungi visualizzazione (vedere Figura 5).

Figura 05: Aggiunta di una visualizzazione (fare clic per visualizzare l'immagine full-size)

Nella finestra di dialogo Aggiungi visualizzazione selezionare la casella di controllo etichettata Crea una visualizzazione fortemente tipizzata. Selezionare la classe Movie come classe dati di visualizzazione. Selezionare Elenco come contenuto della visualizzazione (vedere la figura 6). Selezionando queste opzioni verrà generata una visualizzazione fortemente tipizzata che visualizza un elenco di film.

Figura 06: Finestra di dialogo Aggiungi visualizzazione (Fare clic per visualizzare l'immagine full-size)

Dopo aver fatto clic sul pulsante Aggiungi , la visualizzazione nell'elenco 2 viene generata automaticamente. Questa visualizzazione contiene il codice necessario per scorrere la raccolta di film e visualizzare ognuna delle proprietà di un film.

Elenco 2 - Visualizzazioni\Movie\Index.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of IEnumerable (Of MvcApplication1.Movie))" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

      Index

</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <h2>Index</h2> 

    <p>

        <%=Html.ActionLink("Create New", "Create")%>

    </p>

    <table>

        <tr>

            <th></th>

            <th>

                Id

            </th>

            <th>

                Title

            </th>

            <th>

                Director

            </th>

            <th>

                DateReleased

            </th>

        </tr> 

    <% For Each item In Model%>

        <tr>

            <td>

                <%=Html.ActionLink("Edit", "Edit", New With {.id = item.Id})%> |

                <%=Html.ActionLink("Details", "Details", New With {.id = item.Id})%>

            </td>

            <td>

                <%= Html.Encode(item.Id) %>

            </td>

            <td>

                <%= Html.Encode(item.Title) %>

            </td>

            <td>

                <%= Html.Encode(item.Director) %>

            </td>

            <td>

                <%= Html.Encode(String.Format("{0:g}", item.DateReleased)) %>

            </td>

        </tr>

    <% Next%> 

    </table> 

</asp:Content>

È possibile eseguire l'applicazione selezionando l'opzione di menu Debug, Avvia debug (o premendo il tasto F5). L'esecuzione dell'applicazione avvia Internet Explorer. Se si passa all'URL /Movie, verrà visualizzata la pagina nella figura 7.

Figura 07: tabella di film(Fare clic per visualizzare l'immagine full-size)

Se non si piace nulla sull'aspetto della griglia dei record di database nella figura 7, è sufficiente modificare la visualizzazione Indice. Ad esempio, è possibile modificare l'intestazione DateReleased in Date Released modificando la visualizzazione Indice.

Creare un modello con un valore parziale

Quando una vista diventa troppo complessa, è consigliabile iniziare a suddividere la visualizzazione in parziali. L'uso di parziali semplifica la comprensione e la gestione delle visualizzazioni. Verrà creato un elemento parziale che è possibile usare come modello per formattare ognuno dei record del database del film.

Per creare la parte parziale, seguire questa procedura:

Fare clic con il pulsante destro del mouse sulla cartella Views\Movie e scegliere l'opzione di menu Aggiungi visualizzazione.
Selezionare la casella di controllo Create a partial view (.ascx).
Assegnare il nome MovieTemplate parziale.
Selezionare la casella di controllo Denominata Crea una visualizzazione fortemente tipizzata.
Selezionare Movie come classe di dati di visualizzazione.
Selezionare Vuoto come contenuto della visualizzazione.
Fare clic sul pulsante Aggiungi per aggiungere il parziale al progetto.

Dopo aver completato questi passaggi, modificare il valore parziale MovieTemplate in modo che sia simile all'elenco 3.

Elenco 3 – Views\Movie\MovieTemplate.ascx

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of MvcApplication1.Movie)" %>

<tr>

    <td>

        <%= Html.Encode(Model.Id) %>

    </td>

    <td>

        <%= Html.Encode(Model.Title) %>

    </td>

    <td>

        <%= Html.Encode(Model.Director) %>

    </td>

    <td>

        <%= Html.Encode(String.Format("{0:g}", Model.DateReleased)) %>

    </td>

</tr>

La parte nell'elenco 3 contiene un modello per una singola riga di record.

La visualizzazione Indice modificata nell'elenco 4 usa il movieTemplate parziale.

Elenco 4 – Views\Movie\Index.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of IEnumerable (Of MvcApplication1.Movie))" %> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <h2>Index</h2>

    <table>

        <tr>

            <th>

                Id

            </th>

            <th>

                Title

            </th>

            <th>

                Director

            </th>

            <th>

                DateReleased

            </th>

        </tr> 

    <% For Each item In Model%> 

        <% Html.RenderPartial("MovieTemplate", item)%>

    <% Next%> 

    </table> 

</asp:Content>

La visualizzazione nell'elenco 4 contiene un ciclo For Each che scorre tutti i film. Per ogni filmato viene utilizzato il film parziale MovieTemplate per formattare il film. Il rendering di MovieTemplate viene eseguito chiamando il metodo helper RenderPartial().

La visualizzazione Indice modificata esegue il rendering della stessa tabella HTML dei record di database. Tuttavia, la visualizzazione è stata notevolmente semplificata.

Il metodo RenderPartial() è diverso dalla maggior parte degli altri metodi helper perché non restituisce una stringa. Pertanto, è necessario chiamare il metodo RenderPartial() utilizzando <% Html.RenderPartial() %> anziché <%= Html.RenderPartial() %>.

Riepilogo

L'obiettivo di questa esercitazione è spiegare come visualizzare un set di record di database in una tabella HTML. In primo luogo, si è appreso come restituire un set di record di database da un'azione del controller sfruttando Microsoft Entity Framework. Si è quindi appreso come usare lo scaffolding di Visual Studio per generare una visualizzazione che visualizza automaticamente una raccolta di elementi. Infine, si è appreso come semplificare la visualizzazione sfruttando un parziale. Si è appreso come usare una parte come modello in modo da poter formattare ogni record di database.

Indietro Avanti