Zobrazení tabulky databázových dat (C#)

Článek
07/13/2023

V tomto kurzu si předvedu dvě metody zobrazení sady databázových záznamů. Zobrazují se dvě metody formátování sady databázových záznamů v tabulce HTML. Nejprve ukážu, jak můžete formátovat záznamy databáze přímo v zobrazení. Dále vám předvedu, jak můžete využít částečné výhody při formátování databázových záznamů.

Cílem tohoto kurzu je vysvětlit, jak můžete zobrazit tabulku html databázových dat v aplikaci ASP.NET MVC. Nejprve se dozvíte, jak pomocí nástrojů pro generování uživatelského rozhraní, které jsou součástí sady Visual Studio, vygenerovat zobrazení, které automaticky zobrazí sadu záznamů. Dále se dozvíte, jak při formátování databázových záznamů použít částečnou šablonu.

Vytvoření tříd modelu

Zobrazíme sadu záznamů z tabulky databáze Movies. Tabulka databáze Movies obsahuje následující sloupce:

Název sloupce	Datový typ	Povolit hodnoty Null
Id	Int	Ne
Nadpis	Nvarchar(200)	Ne
Ředitel	NVarchar(50)	Ne
DateReleased	DateTime	Ne

Abychom mohli reprezentovat tabulku Movies v aplikaci ASP.NET MVC, musíme vytvořit třídu modelu. V tomto kurzu použijeme Microsoft Entity Framework k vytvoření našich tříd modelů.

Poznámka

V tomto kurzu použijeme Microsoft Entity Framework. Je ale důležité si uvědomit, že k interakci s databází z aplikace ASP.NET MVC, včetně LINQ to SQL, NHibernate nebo ADO.NET, můžete použít různé technologie.

Průvodce modelem Entity Data Model spustíte takto:

Klikněte pravým tlačítkem na složku Modely v okně Průzkumník řešení a vyberte možnost nabídky Přidat, Nová položka.
Vyberte kategorii Data a vyberte šablonu ADO.NET Entity Data Model .
Dejte datovému modelu název MoviesDBModel.edmx a klikněte na tlačítko Přidat .

Po kliknutí na tlačítko Přidat se zobrazí Průvodce modelem dat entity (viz obrázek 1). Průvodce dokončete následujícím postupem:

V kroku Zvolit obsah modelu vyberte možnost Generovat z databáze .
V kroku Zvolte datové připojení použijte datové připojení MoviesDB.mdf a pro nastavení připojení použijte název MoviesDBEntities . Klikněte na tlačítko Další .
V kroku Zvolte databázové objekty rozbalte uzel Tabulky a vyberte tabulku Filmy. Zadejte obor názvů Models (Modely oboru názvů) a klikněte na tlačítko Finish (Dokončit ).

Obrázek 01: Vytváření tříd LINQ to SQL (kliknutím zobrazíte obrázek v plné velikosti)

Po dokončení Průvodce modelem dat entity se otevře Designer Entity Data Model. V Designer by se měla zobrazit entita Filmy (viz obrázek 2).

Obrázek 02: Datový model entity Designer (kliknutím zobrazíte obrázek v plné velikosti)

Než budeme pokračovat, musíme udělat jednu změnu. Průvodce daty entit vygeneruje třídu modelu s názvem Filmy , která představuje tabulku databáze Movies. Vzhledem k tomu, že použijeme třídu Movies k reprezentaci konkrétního filmu, musíme změnit název třídy tak, aby byl Film místo Filmy (místo množného čísla singulárové číslo).

Poklikejte na název třídy na ploše návrháře a změňte název třídy z Filmy na Film. Po provedení této změny klikněte na tlačítko Uložit (ikona diskety) a vygenerujte třídu Movie.

Vytvoření kontroleru filmů

Teď, když máme způsob, jak reprezentovat záznamy databáze, můžeme vytvořit kontroler, který vrátí kolekci filmů. V okně Průzkumník řešení sady Visual Studio klikněte pravým tlačítkem na složku Kontrolery a vyberte možnost nabídky Přidat, kontroler (viz Obrázek 3).

Obrázek 03: Nabídka Přidat ovladač (kliknutím zobrazíte obrázek v plné velikosti)

Jakmile se zobrazí dialogové okno Přidat kontroler , zadejte název ovladače MovieController (viz Obrázek 4). Kliknutím na tlačítko Přidat přidejte nový kontroler.

Obrázek 04: Dialogové okno Přidat kontroler (kliknutím zobrazíte obrázek v plné velikosti)

Musíme upravit akci Index() vystavenou řadičem videa tak, aby vrátila sadu databázových záznamů. Upravte kontroler tak, aby vypadal jako kontroler v seznamu 1.

Výpis 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());

        } 

    }

}

Ve výpisu 1 se třída MoviesDBEntities používá k reprezentaci databáze MoviesDB. Pokud chcete použít tuto třídu, musíte naimportovat obor názvů MvcApplication1.Models následujícím způsobem:

pomocí MvcApplication1.Models;

Entity výrazu. MovieSet.ToList() vrátí sadu všech filmů z tabulky databáze Movies.

Vytvoření zobrazení

Nejjednodušší způsob, jak zobrazit sadu databázových záznamů v tabulce HTML, je využít generování uživatelského rozhraní poskytované sadou Visual Studio.

Sestavte aplikaci výběrem možnosti nabídky Sestavit, Sestavit řešení. Aplikaci musíte sestavit před otevřením dialogového okna Přidat zobrazení , jinak se v dialogovém okně nezobrazí datové třídy.

Klikněte pravým tlačítkem na akci Index() a vyberte možnost nabídky Přidat zobrazení (viz Obrázek 5).

Obrázek 05: Přidání zobrazení (kliknutím zobrazíte obrázek v plné velikosti)

V dialogovém okně Přidat zobrazení zaškrtněte políčko Vytvořit zobrazení silného typu. Jako datnou třídu zobrazení vyberte třídu Movie. Jako obsah zobrazení vyberte Seznam (viz Obrázek 6). Výběrem těchto možností se vygeneruje zobrazení silného typu, které zobrazí seznam filmů.

Obrázek 06: Dialogové okno Přidat zobrazení (kliknutím zobrazíte obrázek v plné velikosti)

Po kliknutí na tlačítko Přidat se zobrazení v seznamu 2 automaticky vygeneruje. Toto zobrazení obsahuje kód potřebný k iteraci kolekcí filmů a zobrazení jednotlivých vlastností videa.

Výpis 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>

Aplikaci můžete spustit výběrem možnosti nabídky Ladit, Spustit ladění (nebo stisknutím klávesy F5). Spuštění aplikace spustí Internet Explorer. Pokud přejdete na adresu URL /Movie, zobrazí se stránka na obrázku 7.

Obrázek 07: Tabulka filmů (kliknutím zobrazíte obrázek v plné velikosti)

Pokud se vám nelíbí vzhled mřížky databázových záznamů na obrázku 7, můžete jednoduše upravit zobrazení Index. Můžete například změnit záhlaví DateReleased na Datum vydání úpravou zobrazení Index.

Vytvoření šablony s částečnou

Když se zobrazení příliš zkomplikuje, je vhodné začít ho rozdělovat na části. Použití částečných nástavů usnadňuje pochopení a údržbu zobrazení. Vytvoříme část, kterou můžeme použít jako šablonu k formátování každého záznamu filmové databáze.

Pomocí těchto kroků vytvořte částečnou část:

Klikněte pravým tlačítkem na složku Views\Movie a vyberte možnost nabídky Přidat zobrazení.
Zaškrtněte políčko Vytvořit částečné zobrazení (.ascx).
Pojmenujte část MovieTemplate.
Zaškrtněte políčko Vytvořit zobrazení silného typu.
Jako datová třída zobrazení vyberte Video.
Jako obsah zobrazení vyberte Prázdné.
Kliknutím na tlačítko Přidat přidejte část do projektu.

Po dokončení těchto kroků upravte část MovieTemplate tak, aby vypadala jako Výpis 3.

Výpis 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>

Část ve výpisu 3 obsahuje šablonu pro jeden řádek záznamů.

Upravené zobrazení indexu ve výpisu 4 používá část MovieTemplate.

Výpis 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>

Zobrazení v seznamu 4 obsahuje smyčku foreach, která prochází všemi filmy. Pro každý film se k formátování videa používá část MovieTemplate. MovieTemplate se vykresluje voláním pomocné metody RenderPartial().

Upravené zobrazení indexu vykreslí stejnou tabulku HTML databázových záznamů. Zobrazení se ale výrazně zjednodušilo.

Metoda RenderPartial() se liší od většiny ostatních pomocných metod, protože nevrací řetězec. Proto je nutné volat metodu RenderPartial() pomocí <% Html.RenderPartial(); %> místo <%= Html.RenderPartial(); %>.

Souhrn

Cílem tohoto kurzu bylo vysvětlit, jak můžete zobrazit sadu databázových záznamů v tabulce HTML. Nejprve jste se dozvěděli, jak vrátit sadu databázových záznamů z akce kontroleru pomocí rozhraní Microsoft Entity Framework. Dále jste se dozvěděli, jak pomocí generování uživatelského rozhraní sady Visual Studio vygenerovat zobrazení, které automaticky zobrazí kolekci položek. Nakonec jste se naučili zjednodušit zobrazení pomocí částečného využití. Naučili jste se používat část jako šablonu, abyste mohli formátovat každý záznam databáze.

Předchozí Další

Sdílet prostřednictvím