Wyświetlanie tabeli danych bazy danych (VB)

autor: Microsoft

Pobierz plik PDF

W tym samouczku przedstawiono dwie metody wyświetlania zestawu rekordów bazy danych. Pokazuję dwie metody formatowania zestawu rekordów bazy danych w tabeli HTML. Po pierwsze pokażę, jak można formatować rekordy bazy danych bezpośrednio w widoku. Następnie pokażę, jak można wykorzystać częściowe podczas formatowania rekordów bazy danych.

Celem tego samouczka jest wyjaśnienie sposobu wyświetlania tabeli HTML danych bazy danych w aplikacji ASP.NET MVC. Najpierw dowiesz się, jak używać narzędzi do tworzenia szkieletów zawartych w programie Visual Studio w celu wygenerowania widoku, który automatycznie wyświetla zestaw rekordów. Następnie dowiesz się, jak używać częściowego szablonu podczas formatowania rekordów bazy danych.

Tworzenie klas modelu

Zostanie wyświetlony zestaw rekordów z tabeli bazy danych Filmy. Tabela bazy danych Filmy zawiera następujące kolumny:

Nazwa kolumny Typ danych Zezwalaj na wartości null
Id int Fałsz
Tytuł Nvarchar(200) Fałsz
Dyrektor NVarchar(50) Fałsz
Data wydania DateTime Fałsz

Aby reprezentować tabelę Filmy w aplikacji MVC ASP.NET, musimy utworzyć klasę modelu. W tym samouczku utworzymy klasy modeli za pomocą programu Microsoft Entity Framework.

Uwaga

W tym samouczku używamy programu Microsoft Entity Framework. Należy jednak pamiętać, że możesz użyć różnych technologii do interakcji z bazą danych z aplikacji MVC ASP.NET, w tym LINQ to SQL, NHibernate lub ADO.NET.

Wykonaj następujące kroki, aby uruchomić Kreatora modelu danych jednostek:

  1. Kliknij prawym przyciskiem myszy folder Models w oknie Eksplorator rozwiązań, a następnie wybierz opcję menu Dodaj, Nowy element.
  2. Wybierz kategorię Dane i wybierz szablon modelu danych jednostki ADO.NET .
  3. Nadaj modelowi danych nazwę MoviesDBModel.edmx i kliknij przycisk Dodaj .

Po kliknięciu przycisku Dodaj zostanie wyświetlony Kreator modelu danych jednostek (zobacz Rysunek 1). Wykonaj następujące kroki, aby ukończyć pracę kreatora:

  1. W kroku Wybieranie zawartości modelu wybierz opcję Generuj z bazy danych .
  2. W kroku Wybierz połączenie danych użyj połączenia danych MoviesDB.mdf i nazwy MoviesDBEntities dla ustawień połączenia. Kliknij przycisk Dalej.
  3. W kroku Wybieranie obiektów bazy danych rozwiń węzeł Tabele, wybierz tabelę Filmy. Wprowadź przestrzeń nazw Models (Modele przestrzeni nazw) i kliknij przycisk Finish (Zakończ ).

Tworzenie klas LINQ to SQL

Rysunek 01. Tworzenie klas LINQ to SQL (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Po zakończeniu pracy Kreatora modelu danych jednostki zostanie otwarty Projektant modelu danych jednostki. W Projektant powinna być wyświetlana jednostka Filmy (patrz Rysunek 2).

Model danych jednostki Projektant

Rysunek 02. Model danych jednostki Projektant (kliknij, aby wyświetlić obraz w pełnym rozmiarze)

Zanim przejdziemy dalej, musimy wprowadzić jedną zmianę. Kreator danych jednostki generuje klasę modelu o nazwie Filmy , która reprezentuje tabelę bazy danych Filmy. Ponieważ użyjemy klasy Filmy do reprezentowania określonego filmu, musimy zmodyfikować nazwę klasy Jako Film zamiast Filmy (pojedyncza, a nie liczba mnoga).

Kliknij dwukrotnie nazwę klasy na powierzchni projektanta i zmień nazwę klasy z Filmy na Movie. Po wprowadzeniu tej zmiany kliknij przycisk Zapisz (ikonę dyskietki), aby wygenerować klasę Movie.

Tworzenie kontrolera filmów

Teraz, gdy mamy sposób reprezentowania naszych rekordów bazy danych, możemy utworzyć kontroler, który zwraca kolekcję filmów. W oknie Eksplorator rozwiązań programu Visual Studio kliknij prawym przyciskiem myszy folder Controllers i wybierz opcję menu Dodaj, Kontroler (zobacz Rysunek 3).

Menu Dodaj kontroler

Rysunek 03. Menu Dodaj kontroler (kliknij, aby wyświetlić obraz pełnowymiarowy)

Po wyświetleniu okna dialogowego Dodawanie kontrolera wprowadź nazwę kontrolera MovieController (zobacz Rysunek 4). Kliknij przycisk Dodaj , aby dodać nowy kontroler.

Okno dialogowe Dodawanie kontrolera

Rysunek 04. Okno dialogowe Dodawanie kontrolera (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Musimy zmodyfikować akcję Index() uwidoczniona przez kontroler Movie, aby zwracała zestaw rekordów bazy danych. Zmodyfikuj kontroler tak, aby wyglądał jak kontroler na liście 1.

Lista 1 — Controllers\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

Na liście 1 klasa MoviesDBEntities jest używana do reprezentowania bazy danych MoviesDB. Jednostki wyrażenia . Metoda MovieSet.ToList() zwraca zestaw wszystkich filmów z tabeli bazy danych Filmy.

Tworzenie widoku

Najprostszym sposobem wyświetlenia zestawu rekordów bazy danych w tabeli HTML jest wykorzystanie szkieletu dostarczonego przez program Visual Studio.

Skompiluj aplikację, wybierając opcję menu Kompiluj, Kompiluj rozwiązanie. Przed otwarciem okna dialogowego Dodawanie widoku musisz skompilować aplikację lub klasy danych nie będą wyświetlane w oknie dialogowym.

Kliknij prawym przyciskiem myszy akcję Indeks() i wybierz opcję menu Dodaj widok (zobacz Rysunek 5).

Dodawanie widoku

Rysunek 05. Dodawanie widoku (kliknij, aby wyświetlić obraz pełnowymiarowy)

W oknie dialogowym Dodawanie widoku zaznacz pole wyboru z etykietą Utwórz silnie typizowanego widoku. Wybierz klasę Movie jako klasę danych widoku. Wybierz pozycję Lista jako zawartość widoku (zobacz Rysunek 6). Wybranie tych opcji spowoduje wygenerowanie silnie typizowanego widoku, który wyświetla listę filmów.

Okno dialogowe Dodawanie widoku

Rysunek 06. Okno dialogowe Dodawanie widoku (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Po kliknięciu przycisku Dodaj widok w obszarze Lista 2 jest generowany automatycznie. Ten widok zawiera kod wymagany do iteracji po kolekcji filmów i wyświetlania każdej właściwości filmu.

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

Aplikację można uruchomić, wybierając opcję menu Debuguj, Rozpocznij debugowanie (lub naciskając klawisz F5). Uruchomienie aplikacji uruchamia program Internet Explorer. Jeśli przejdziesz do adresu URL /Movie, zobaczysz stronę na rysunku 7.

Tabela filmów

Rysunek 07. Tabela filmów (kliknij, aby wyświetlić obraz pełnowymiarowy)

Jeśli nie lubisz niczego o wyglądzie siatki rekordów bazy danych na rysunku 7, możesz po prostu zmodyfikować widok Indeks. Na przykład możesz zmienić nagłówek DateReleased na Date Released , modyfikując widok Indeks.

Tworzenie szablonu z częściowym

Gdy widok staje się zbyt skomplikowany, dobrym pomysłem jest rozpoczęcie podziału widoku na części. Użycie części ułatwia zrozumienie i konserwację widoków. Utworzymy części, których możemy użyć jako szablonu do formatowania każdego rekordu bazy danych filmów.

Wykonaj następujące kroki, aby utworzyć częściowe:

  1. Kliknij prawym przyciskiem myszy folder Views\Movie i wybierz opcję menu Dodaj widok.
  2. Zaznacz pole wyboru z etykietą Utwórz widok częściowy (ascx).
  3. Nadaj częściowe nazwę MovieTemplate.
  4. Zaznacz pole wyboru z etykietą Utwórz silnie typizowany widok.
  5. Wybierz pozycję Film jako klasę danych widoku.
  6. Wybierz pozycję Puste jako zawartość widoku.
  7. Kliknij przycisk Dodaj , aby dodać część do projektu.

Po wykonaniu tych kroków zmodyfikuj element MovieTemplate częściowy, tak aby wyglądał jak Lista 3.

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

Część w liście 3 zawiera szablon dla jednego wiersza rekordów.

Zmodyfikowany widok indeksu na liście 4 używa częściowego movieTemplate.

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

Widok w liście 4 zawiera pętlę For Each, która iteruje przez wszystkie filmy. Dla każdego filmu część MovieTemplate służy do formatowania filmu. Element MovieTemplate jest renderowany przez wywołanie metody pomocnika RenderPartial().

Zmodyfikowany widok indeksu renderuje tę samą tabelę HTML rekordów bazy danych. Jednak widok został znacznie uproszczony.

Metoda RenderPartial() różni się od większości innych metod pomocnika, ponieważ nie zwraca ciągu. W związku z tym należy wywołać metodę RenderPartial() przy użyciu <metody % Html.RenderPartial() %> zamiast <%= Html.RenderPartial() %>.

Podsumowanie

Celem tego samouczka było wyjaśnienie, jak można wyświetlić zestaw rekordów bazy danych w tabeli HTML. Najpierw przedstawiono sposób zwracania zestawu rekordów bazy danych z akcji kontrolera, korzystając z programu Microsoft Entity Framework. Następnie przedstawiono sposób używania szkieletu programu Visual Studio do generowania widoku, który automatycznie wyświetla kolekcję elementów. Na koniec pokazano, jak uprościć widok, korzystając z częściowego. Wiesz już, jak używać częściowego szablonu, aby można było sformatować każdy rekord bazy danych.