Condividi tramite

Visualizzazione di una tabella di dati del database (C#)

di Microsoft

Scarica il PDF

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 del database direttamente all'interno di una vista. Successivamente, dimostro come è possibile sfruttare le 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. In primo luogo, 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 della tabella di 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 ASP.NET MVC, è necessario creare una classe modello. In questa esercitazione viene usato Microsoft Entity Framework per creare le classi del modello.

Nota

In questa esercitazione viene usato Microsoft Entity Framework. È tuttavia importante comprendere che è possibile usare un'ampia gamma di tecnologie diverse 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 dati di entità:

  1. Fare clic con il pulsante destro del mouse sulla cartella Models nella finestra Esplora soluzioni e scegliere l'opzione di menu Aggiungi, Nuovo elemento.
  2. Selezionare la categoria Dati e selezionare il modello entity data model ADO.NET .
  3. 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 dati di entità (vedere la figura 1). Per completare la procedura guidata, seguire questa procedura:

  1. Nel passaggio Scegli contenuto modello selezionare l'opzione Genera dal database .
  2. 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).
  3. Nel passaggio Scegli oggetti di database espandere il nodo Tabelle, selezionare la tabella Movies. Immettere lo spazio dei nomi Modelli e fare clic sul pulsante Fine .

Creazione di classi LINQ to SQL

Figura 01: Creazione di classi LINQ to SQL (fare clic per visualizzare l'immagine a dimensione intera)

Dopo aver completato la Creazione guidata modello di dati di entità, viene visualizzata la Designer Entity Data Model. Il Designer dovrebbe visualizzare l'entità Movies (vedere la figura 2).

Modello di dati di entità Designer

Figura 02: Modello di dati entità Designer (fare clic per visualizzare l'immagine a dimensione intera)

È necessario apportare una modifica prima di continuare. La Creazione guidata dati entità genera una classe di modello denominata Movies che rappresenta la tabella di database Movies. Poiché si userà la classe Movies per rappresentare un determinato filmato, è 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 (l'icona del disco floppy) per generare la classe Movie.

Creare il controller movies

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

Menu Aggiungi controller

Figura 03: Menu Aggiungi controller (fare clic per visualizzare l'immagine a dimensione intera)

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.

Finestra di dialogo Aggiungi controller

Figura 04: Finestra di dialogo Aggiungi controller (fare clic per visualizzare l'immagine a dimensione intera)

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

Elenco 1: Controllers\MovieController.cs

using System.Linq;

using System.Web.Mvc;

using MvcApplication1.Models; 

namespace MvcApplication1.Controllers

{

    public class MovieController : Controller

    {

        //

        // GET: /Movie/ 

        public ActionResult Index()

        {

            var entities = new MoviesDBEntities();

            return View(entities.MovieSet.ToList());

        } 

    }

}

In Listing 1 la classe MoviesDBEntities viene usata per rappresentare il database MoviesDB. Per usare questa classe, è necessario importare lo spazio dei nomi MvcApplication1.Models come segue:

utilizzando MvcApplication1.Models;

Entità dell'espressione . MovieSet.ToList() restituisce il set di tutti i film della tabella di database Movies.

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 oppure le classi di dati non verranno visualizzate nella finestra di dialogo.

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

Aggiunta di una visualizzazione

Figura 05: Aggiunta di una visualizzazione (fare clic per visualizzare l'immagine a dimensione intera)

Nella finestra di dialogo Aggiungi visualizzazione selezionare la casella di controllo Crea una visualizzazione fortemente tipizzata. Selezionare la classe Movie come classe di 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.

Finestra di dialogo Aggiungi visualizzazione

Figura 06: Finestra di dialogo Aggiungi visualizzazione (fare clic per visualizzare l'immagine a dimensione intera)

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 filmato.

Elenco 2: Views\Movie\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Movie>>" %> 

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

      Index

</asp:Content> 

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

    <h2>Index</h2> 

    <table>

        <tr>

            <th></th>

            <th>

                Id

            </th>

            <th>

                Title

            </th>

            <th>

                Director

            </th>

            <th>

                DateReleased

            </th>

        </tr> 

    <% foreach (var item in Model) { %>

        <tr>

            <td>

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

                <%= Html.ActionLink("Details", "Details", new { 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>

    <% } %> 

    </table> 

    <p>

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

    </p> 

</asp:Content>

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

Un tavolo di film

Figura 07: Una tabella di film (fare clic per visualizzare l'immagine a dimensione intera)

Se non si preferisce 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 Index.

Creare un modello con un parziale

Quando una visualizzazione 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.

Seguire questa procedura per creare il parziale:

  1. Fare clic con il pulsante destro del mouse sulla cartella Views\Movie e selezionare l'opzione di menu Aggiungi visualizzazione.
  2. Selezionare la casella di controllo etichettata Crea una visualizzazione parziale (con estensione ascx).
  3. Assegnare un nome al movietemplate parziale.
  4. Selezionare la casella di controllo etichettata Crea una visualizzazione fortemente tipizzata.
  5. Selezionare Movie come classe di dati di visualizzazione.
  6. Selezionare Vuoto come contenuto di visualizzazione.
  7. Fare clic sul pulsante Aggiungi per aggiungere il parziale al progetto.

Al termine di questi passaggi, modificare il valore parziale di MovieTemplate in modo che sia simile all'elenco 3.

Elenco 3 - Visualizzazioni\Movie\MovieTemplate.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MvcApplication1.Models.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>

Il parziale nell'elenco 3 contiene un modello per una singola riga di record.

La visualizzazione Indice modificato nell'elenco 4 usa il parziale MovieTemplate.

Elenco 4 - Visualizzazioni\Movie\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.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> 

    <% foreach (var item in Model) { %>

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

    <% } %> 

    </table> 

</asp:Content>

La visualizzazione nell'elenco 4 contiene un ciclo foreach che esegue l'iterazione di tutti i film. Per ogni film, il parziale MovieTemplate viene usato per formattare il film. Il rendering di MovieTemplate viene eseguito chiamando il metodo helper RenderPartial().

La visualizzazione Indice modificato esegue il rendering della stessa tabella HTML dei record di database. Tuttavia, la vista è 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() usando <% 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. Successivamente, si è 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 un modello parziale in modo che sia possibile formattare ogni record di database.

IndietroAvanti

  • Last updated on