Anzeigen einer Tabelle von Datenbankdaten (VB)

2023-07-13

In diesem Tutorial veranschaulichen sie zwei Methoden zum Anzeigen einer Reihe von Datenbankdatensätzen. Ich zeige zwei Methoden zum Formatieren einer Reihe von Datenbankdatensätzen in einer HTML-Tabelle. Zunächst zeige ich, wie Sie die Datenbankdatensätze direkt in einer Ansicht formatieren können. Als Nächstes veranschaulichen ich, wie Sie Teildatensätze beim Formatieren von Datenbankdatensätzen nutzen können.

In diesem Tutorial wird erläutert, wie Sie eine HTML-Tabelle mit Datenbankdaten in einer ASP.NET MVC-Anwendung anzeigen können. Zunächst erfahren Sie, wie Sie die in Visual Studio enthaltenen Gerüstbautools verwenden, um eine Ansicht zu generieren, die einen Satz von Datensätzen automatisch anzeigt. Als Nächstes erfahren Sie, wie Sie eine partielle Als Vorlage beim Formatieren von Datenbankdatensätzen verwenden.

Erstellen der Modellklassen

Wir werden den Datensatzsatz aus der Movies-Datenbanktabelle anzeigen. Die Movies-Datenbanktabelle enthält die folgenden Spalten:

Spaltenname	Datentyp	NULL-Werte zulassen
Id	Int	False
Titel	Nvarchar(200)	False
Regisseur	NVarchar(50)	False
DateReleased	Datetime	False

Um die Tabelle Movies in unserer ASP.NET MVC-Anwendung darzustellen, müssen wir eine Modellklasse erstellen. In diesem Tutorial verwenden wir das Microsoft Entity Framework, um unsere Modellklassen zu erstellen.

Hinweis

In diesem Tutorial verwenden wir das Microsoft Entity Framework. Es ist jedoch wichtig zu verstehen, dass Sie eine Vielzahl verschiedener Technologien verwenden können, um mit einer Datenbank aus einer ASP.NET MVC-Anwendung zu interagieren, einschließlich LINQ to SQL, NHibernate oder ADO.NET.

Führen Sie die folgenden Schritte aus, um den Entitätsdatenmodell-Assistenten zu starten:

Klicken Sie im fenster Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Models, und wählen Sie die Menüoption Hinzufügen, Neues Element aus.
Wählen Sie die Kategorie Daten aus, und wählen Sie die Vorlage ADO.NET Entitätsdatenmodell aus.
Geben Sie Ihrem Datenmodell den Namen MoviesDBModel.edmx , und klicken Sie auf die Schaltfläche Hinzufügen .

Nachdem Sie auf die Schaltfläche Hinzufügen geklickt haben, wird der Entitätsdatenmodell-Assistent angezeigt (siehe Abbildung 1). Führen Sie die folgenden Schritte aus, um den Assistenten abzuschließen:

Wählen Sie im Schritt Modellinhalt auswählen die Option Aus Datenbank generieren aus .
Verwenden Sie im Schritt Datenverbindung auswählen die Datenverbindung MoviesDB.mdf und den Namen MoviesDBEntities für die Verbindungseinstellungen. Klicken Sie auf die Schaltfläche Weiter.
Erweitern Sie im Schritt Datenbankobjekte auswählen den Knoten Tabellen, und wählen Sie die Tabelle Filme aus. Geben Sie den Namespace Models ein, und klicken Sie auf die Schaltfläche Fertig stellen .

Abbildung 01: Erstellen LINQ to SQL Klassen (Klicken Sie hier, um ein Bild in voller Größe anzuzeigen)

Nachdem Sie den Entitätsdatenmodell-Assistenten abgeschlossen haben, wird das Entitätsdatenmodell Designer geöffnet. Die Designer sollte die Entität Filme anzeigen (siehe Abbildung 2).

Abbildung 02: Das Entitätsdatenmodell Designer (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Wir müssen eine Änderung vornehmen, bevor wir fortfahren. Der Entitätsdaten-Assistent generiert eine Modellklasse mit dem Namen Movies , die die Movies-Datenbanktabelle darstellt. Da wir die Movies-Klasse verwenden, um einen bestimmten Film darzustellen, müssen wir den Namen der Klasse in Movie anstelle von Movies (Singular statt Plural) ändern.

Doppelklicken Sie auf den Namen der Klasse auf der Designeroberfläche, und ändern Sie den Namen der Klasse von Movies in Movie. Nachdem Sie diese Änderung vorgenommen haben, klicken Sie auf die Schaltfläche Speichern (das Symbol der Diskette), um die Movie-Klasse zu generieren.

Erstellen des Filmcontrollers

Da wir nun eine Möglichkeit haben, unsere Datenbankdatensätze darzustellen, können wir einen Controller erstellen, der die Sammlung von Filmen zurückgibt. Klicken Sie im Fenster Visual Studio Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Controller, und wählen Sie die Menüoption Hinzufügen, Controller aus (siehe Abbildung 3).

Abbildung 03: Menü "Controller hinzufügen" (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Wenn das Dialogfeld Controller hinzufügen angezeigt wird, geben Sie den Controllernamen MovieController ein (siehe Abbildung 4). Klicken Sie auf die Schaltfläche Hinzufügen , um den neuen Controller hinzuzufügen.

Abbildung 04: Dialogfeld "Controller hinzufügen" (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Wir müssen die Vom Movie-Controller verfügbar gemachte Index()-Aktion so ändern, dass sie den Satz von Datenbankdatensätzen zurückgibt. Ändern Sie den Controller so, dass er wie der Controller in Listing 1 aussieht.

Eintrag 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

In Listing 1 wird die MoviesDBEntities-Klasse verwendet, um die MoviesDB-Datenbank darzustellen. Die Ausdrucksentitäten. MovieSet.ToList() gibt den Satz aller Filme aus der Movies-Datenbanktabelle zurück.

Erstellen der Ansicht

Die einfachste Möglichkeit, einen Satz von Datenbankdatensätzen in einer HTML-Tabelle anzuzeigen, besteht darin, das von Visual Studio bereitgestellte Gerüst zu nutzen.

Erstellen Sie Ihre Anwendung, indem Sie die Menüoption Erstellen, Projektmappe erstellen auswählen. Sie müssen Ihre Anwendung erstellen, bevor Sie das Dialogfeld Ansicht hinzufügen öffnen , sonst werden Ihre Datenklassen nicht im Dialogfeld angezeigt.

Klicken Sie mit der rechten Maustaste auf die Aktion Index(), und wählen Sie die Menüoption Ansicht hinzufügen aus (siehe Abbildung 5).

Abbildung 05: Hinzufügen einer Ansicht (Klicken Sie hier, um ein Bild in voller Größe anzuzeigen)

Aktivieren Sie im Dialogfeld Ansicht hinzufügen das Kontrollkästchen Erstellen einer stark typisierten Ansicht. Wählen Sie die Movie-Klasse als Ansichtsdatenklasse aus. Wählen Sie Liste als Ansichtsinhalt aus (siehe Abbildung 6). Wenn Sie diese Optionen auswählen, wird eine stark typisierte Ansicht generiert, die eine Liste mit Filmen anzeigt.

Abbildung 06: Dialogfeld "Ansicht hinzufügen" (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Nachdem Sie auf die Schaltfläche Hinzufügen geklickt haben, wird die Ansicht in Listing 2 automatisch generiert. Diese Ansicht enthält den Code, der zum Durchlaufen der Sammlung von Filmen und zum Anzeigen der einzelnen Eigenschaften eines Films erforderlich ist.

Listing 2 – 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="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>

Sie können die Anwendung ausführen, indem Sie die Menüoption Debuggen, Debuggen starten (oder die F5-Taste drücken). Wenn Sie die Anwendung ausführen, wird internet Explorer gestartet. Wenn Sie zur /Movie-URL navigieren, wird die Seite in Abbildung 7 angezeigt.

Abbildung 07: Eine Tabelle mit Filmen(Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Wenn Ihnen die Darstellung des Rasters der Datenbankdatensätze in Abbildung 7 nicht gefällt, können Sie einfach die Indexansicht ändern. Sie können beispielsweise den DateReleased-Header in Date Released ändern, indem Sie die Indexansicht ändern.

Erstellen einer Vorlage mit einem Partiellen

Wenn eine Ansicht zu kompliziert wird, empfiehlt es sich, die Ansicht in Teile zu zerlegen. Die Verwendung von Partien erleichtert das Verständnis und die Verwaltung Ihrer Ansichten. Wir erstellen einen Teil, den wir als Vorlage verwenden können, um jeden Filmdatenbankdatensatz zu formatieren.

Führen Sie die folgenden Schritte aus, um den Part zu erstellen:

Klicken Sie mit der rechten Maustaste auf den Ordner Ansichten\Film, und wählen Sie die Menüoption Ansicht hinzufügen aus.
Aktivieren Sie das Kontrollkästchen Create a partial view (.ascx).
Nennen Sie die partielle MovieTemplate.
Aktivieren Sie das Kontrollkästchen Erstellen einer stark typisierten Ansicht.
Wählen Sie Movie als Ansichtsdatenklasse aus.
Wählen Sie Leer als Ansichtsinhalt aus.
Klicken Sie auf die Schaltfläche Hinzufügen , um das partielle zu Ihrem Projekt hinzuzufügen.

Nachdem Sie diese Schritte ausgeführt haben, ändern Sie den MovieTemplate-Part so, dass er wie Listing 3 aussieht.

Listing 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>

Der partielle in Listing 3 enthält eine Vorlage für eine einzelne Zeile von Datensätzen.

Die geänderte Indexansicht in Listing 4 verwendet die Partielle MovieTemplate.

Listing 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>

Die Ansicht in Listing 4 enthält eine For Each-Schleife, die alle Filme durchläuft. Für jeden Film wird die MovieTemplate-Partielle verwendet, um den Film zu formatieren. Die MovieTemplate wird gerendert, indem die RenderPartial()-Hilfsmethode aufgerufen wird.

Die geänderte Indexansicht rendert die gleiche HTML-Tabelle mit Datenbankdatensätzen. Die Ansicht wurde jedoch stark vereinfacht.

Die RenderPartial()-Methode unterscheidet sich von den meisten anderen Hilfsmethoden, da sie keine Zeichenfolge zurückgibt. Daher müssen Sie die RenderPartial()-Methode mit <% Html.RenderPartial() %> anstelle von <%= Html.RenderPartial() %> aufrufen.

Zusammenfassung

In diesem Tutorial wurde erläutert, wie Sie eine Gruppe von Datenbankdatensätzen in einer HTML-Tabelle anzeigen können. Zunächst haben Sie gelernt, wie Sie einen Satz von Datenbankdatensätzen von einer Controlleraktion zurückgeben, indem Sie das Microsoft Entity Framework nutzen. Als Nächstes haben Sie gelernt, wie Sie mithilfe des Visual Studio-Gerüstbaus eine Ansicht generieren, die automatisch eine Auflistung von Elementen anzeigt. Schließlich haben Sie gelernt, wie Sie die Ansicht vereinfachen, indem Sie einen Teil nutzen. Sie haben gelernt, wie Sie eine partielle Vorlage verwenden, damit Sie jeden Datenbankdatensatz formatieren können.

Zurück Weiter

Freigeben über