Wyświetlanie tabeli danych bazy danych (C#)

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. Najpierw pokażę, jak można sformatować rekordy bazy danych bezpośrednio w widoku. Następnie pokazano, jak można wykorzystać części 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 naszej aplikacji ASP.NET MVC, 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. Jednak ważne jest, aby zrozumieć, że możesz użyć różnych technologii do interakcji z bazą danych z aplikacji ASP.NET MVC, 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ń i 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 jednostki (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 Modele i kliknij przycisk Zakończ .

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

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

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

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

Kliknij dwukrotnie nazwę klasy na powierzchni projektanta i zmień nazwę klasy z Movie 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 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 Kontrolery i wybierz opcję menu Dodaj, Kontroler (zobacz Rysunek 3).

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.

Rysunek 04. Okno dialogowe Dodawanie kontrolera (Kliknij, aby wyświetlić obraz pełnowymiarowy)

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

Lista 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());

        } 

    }

}

Na liście 1 klasa MoviesDBEntities służy do reprezentowania bazy danych MoviesDB. Aby użyć tej klasy, należy zaimportować przestrzeń nazw MvcApplication1.Models w następujący sposób:

przy użyciu mvcApplication1.Models;

Jednostki wyrażenia . Element MovieSet.ToList() zwraca zestaw wszystkich filmów z tabeli bazy danych Filmy.

Tworzenie widoku

Najprostszym sposobem wyświetlania zestawu rekordów bazy danych w tabeli HTML jest skorzystanie z 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ę Index() i wybierz opcję menu Dodaj widok (zobacz Rysunek 5).

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.

Rysunek 06. Okno dialogowe Dodawanie widoku (Kliknij, aby wyświetlić obraz pełnowymiarowy)

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

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

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 /Movie URL, zobaczysz stronę na rysunku 7.

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

Jeśli nie podoba Ci się coś o wyglądzie siatki rekordów bazy danych na rysunku 7, możesz po prostu zmodyfikować widok Indeks. Możesz na przykład zmienić nagłówek DateReleased na Data wydania , modyfikując widok indeksu.

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 typizowanego widoku.
5. Wybierz pozycję Film jako klasę danych widoku.
6. Wybierz pozycję Puste jako zawartość widoku.
7. Kliknij przycisk Dodaj , aby dodać częściowy projekt.

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

Lista 3 — Views\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>

Częściowa lista 3 zawiera szablon dla jednego wiersza rekordów.

Zmodyfikowany widok indeksu w pozycji Lista 4 używa częściowego elementu MovieTemplate.

Lista 4 — 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="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>

Widok w liście 4 zawiera pętlę foreach, 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 Indeks 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 sposobu wyświetlania zestawu 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 automatycznego generowania widoku, który wyświetla kolekcję elementów przy użyciu szkieletu programu Visual Studio. 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.

WsteczDalej