6 – Zobrazení dat v mřížce

 
 

 

Tato kapitola vysvětluje, jak s využitím pomocné třídy zobrazit data v tabulce HTML (v mřížce).

Co se naučíte:

V této kapitole budou představeny následující funkce programování pomocí technologie ASP.NET:

 

 

Pomocná třída (helper) WebGrid

V předchozí kapitole jste zobrazili data na stránce a odvedli jste při tom všechnu práci sami. Ale existuje také snazší způsob zobrazení dat — použití pomocné třídy WebGrid (Webová mřížka). Tato pomocná třída (helper) za vás vykreslí tabulku HTML, ve které jsou data zobrazena. Podporuje různé možnosti formátování, stránkování dat a seřazení dat pouhým kliknutím na záhlaví sloupce.

Zobrazení dat s použitím pomocné třídy WebGrid

Tento postup ukazuje, jak zobrazit data prostřednictvím pomocné třídy WebGrid (Webová mřížka) s využitím té nejjednodušší konfigurace.

  1. Otevřete web, který jste vytvořili v kapitole 5 – Práce s daty.

    Pokud jste neprovedli postupy uvedené v této kapitole, nemusíte je nyní všechny provádět. Budete ale potřebovat databázový soubor SmallBakery.sdf, který je vytvořen na začátku kapitoly 5. Tento soubor musí být umístěn ve složce App_Data na webu, se kterým pracujete.

  2. Vytvořte na svém webu nový soubor CSHTML s názvem WebGridBasic.cshtml.
  3. Stávající kód značkovacího jazyka nahraďte následujícím kódem:
    @{ 
        var db = Database.Open("SmallBakery") ; 
        var selectQueryString = "SELECT * FROM Product ORDER BY Id"; 
        var data = db.Query(selectQueryString); 
        var grid = new WebGrid(data); 
    } 
    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>Displaying Data Using the WebGrid Helper</title> 
        </head> 
        <body> 
            <h1>Small Bakery Products</h1> 
            <div id="grid"> 
                @grid.GetHtml() 
            </div> 
        </body> 
    </html>

    Kód nejdříve otevře databázový soubor SmallBakery.sdf a vytvoří příkaz Select jazyka SQL:

    SELECT * FROM Product ORDER BY Id

    Do proměnné s názvem data jsou načtena data vrácená příkazem Select jazyka SQL. Poté je z dat vytvořena nová mřížka s využitím pomocné třídy WebGrid (Webová mřížka):

    var data = db.Query(selectQueryString); 
    var grid = new WebGrid(data);

    Tento kód vytvoří nový objekt WebGrid a přiřadí jej proměnné grid (mřížka). V těle stránky jsou data vykreslena s využitím pomocné třídy WebGrid pomocí tohoto kódu:

    @grid.GetHtml()

    Proměnná grid (mřížka) představuje hodnotu, která vznikla při vytvoření objektu WebGrid.

  4. Stránku spusťte. (Před jejím spuštěním ověřte, zda je stránka vybrána v pracovním prostředí Files – Soubory.) Pomocná třída (helper) WebGrid (Webová mřížka) vykreslí tabulku HTML obsahující data vybraná na základě příkazu Select jazyka SQL:

    ch06_WebGrid-01

    Všimněte si, že můžete kliknout na název sloupce a seřadit tak tabulku podle dat uvedených v příslušném sloupci.

Jak vidíte, i ten nejjednodušší kód pro pomocnou třídu WebGrid za vás vykoná spoustu práce při zobrazení (a seřazení) dat. Tato pomocná třída toho dokáže ještě víc. Ve zbývající části této kapitoly si ukážeme, jak pomocnou třídu WebGrid nakonfigurovat, aby umožňovala:

Určení a formátování zobrazených sloupců

Ve výchozím nastavení pomocná třída WebGrid zobrazuje všechna data vrácená příkazem jazyka SQL. Zobrazení těchto dat můžete přizpůsobit následovně:

V následujícím postupu s využitím možností pomocné třídy WebGrid určíme formátování jednotlivých sloupců.

  1. Vytvořte na webu novou stránku s názvem WebGridColumnFormat.cshtml.
  2. Stávající kód značkovacího jazyka nahraďte následujícím kódem:
    @{ 
        var db = Database.Open("SmallBakery") ; 
        var selectQueryString = "SELECT * FROM Product ORDER BY Id"; 
        var data = db.Query(selectQueryString); 
        var grid = new WebGrid(data); 
    } 
    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>Displaying Data Using the WebGrid Helper (Custom Formatting)</title> 
            <style type="text/css"> 
                .product { width: 200px; font-weight:bold;} 
            </style> 
        </head> 
        <body> 
            <h1>Small Bakery Products</h1> 
            <div id="grid"> 
                @grid.GetHtml( 
                    columns: grid.Columns( 
                        grid.Column("Name", "Product", style: "product"), 
                        grid.Column("Description", format:@<i>@item.Description</i>), 
                        grid.Column("Price", format:@<text>$@item.Price</text>) 
                    ) 
                ) 
            </div> 
        </body> 
    </html>

    Tento příklad se shoduje s předchozím příkladem s tím rozdílem, že při vykreslení mřížky v těle stránky pomocí volání grid.GetHtml (mřížka.Získat kód HTML) určíme, které sloupce mají být zobrazeny, a také, jak mají být zobrazeny. Následující kód ukazuje, jak určit, které sloupce mají být zobrazeny, a pořadí, ve kterém mají být zobrazeny:

    @grid.GetHtml( 
        columns: grid.Columns( 
            grid.Column("Name", "Product", style: "product"), 
            grid.Column("Description", format:@<i>@item.Description</i>), 
            grid.Column("Price", format:@<text>$@item.Price</text>) 
    )

    Pokud chcete určit, které sloupce má pomocná třída zobrazit, musíte zahrnout parametr columns (sloupce) ve volání metody GetHtml (Získat kód HTML) pomocné třídy WebGrid (Webová mřížka) a předat kolekci sloupců. V této kolekci můžete uvést všechny sloupce, které mají být zahrnuty. Jednotlivé sloupce, které mají být zobrazeny, jsou určeny pomocí objektu grid.Column (mřížka.Sloupec), kterému je předán název požadovaného datového sloupce. V tomto příkladu kód zajistí, aby pomocný objekt WebGrid zobrazil pouze tři sloupce: Name (Název), Description (Popis) a Price (Cena). (Výsledky dotazu jazyka SQL musí tyto sloupce zahrnovat – pomocná třída nemůže zobrazit sloupce, které dotaz nevrátil.)

    Všimněte si, že kromě pouhého předání názvu sloupce mřížce můžete předat další pokyny pro formátování. V tomto příkladu kód zobrazí sloupec Name (Název) pomocí následujícího kódu:

    grid.Column("Name", "Product", style: "product")

    Tento kód pomocné třídě WebGrid říká, že má provést následující:

    Pro sloupec Description (Popis) je v příkladu použit následující kód:

    grid.Column("Description", format:@<i>@item.Description</i>)

    Tento kód pomocné třídě říká, že má zobrazit sloupec Description (Popis). Formátování je určeno pomocí výrazu, ve kterém jsou hodnoty z datového sloupce obklopeny značkami jazyka HTML:

    @<i>@item.Description</i>

    Příklad pro sloupec Price (Cena) ukazuje další možnost určení vlastnosti format:

    grid.Column("Price", format:@<text>$@item.Price</text>)

    Opět je zde uveden kód značkovacího jazyka HTML, který má být vykreslen, a navíc je do kódu přidán symbol dolaru ($) před hodnotu sloupce.

  3. Zobrazte stránku v prohlížeči.

    ch06_WebGrid-02

    Tentokrát jsou zobrazeny pouze tři sloupce. Upravena je šířka, velikost a tloušťka písma sloupce Name (Název). Hodnoty ve sloupci Description (Popis) jsou zobrazeny kurzívou a sloupec Price (Cena) nyní obsahuje symbol dolaru.

Změna stylu mřížky jako celku

Kromě určení způsobu zobrazení jednotlivých sloupců je možné stanovit formátování celé mřížky. K tomu slouží definice třídy šablon stylů CSS, které určují, jak bude vykreslená tabulka HTML vypadat.

  1. Vytvořte na webu novou stránku s názvem WebGridTableFormat.cshtml.
  2. Stávající kód značkovacího jazyka nahraďte následujícím kódem:
    @{ 
        var db = Database.Open("SmallBakery"); 
        var selectQueryString = "SELECT * FROM Product ORDER BY Id"; 
        var data = db.Query(selectQueryString); 
        var grid = new WebGrid(source: data, defaultSort: "Name"); 
    } 
    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>Displaying Data Using the WebGrid Helper (Custom Table Formatting)</title> 
            <style type="text/css"> 
                .grid { margin: 4px; border-collapse: collapse; width: 600px; } 
                .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; } 
                .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; } 
                .alt { background-color: #E8E8E8; color: #000; } 
                .product { width: 200px; font-weight:bold;} 
            </style> 
        </head> 
        <body> 
            <h1>Small Bakery Products</h1> 
            <div id="grid"> 
                @grid.GetHtml( 
                    tableStyle: "grid", 
                    headerStyle: "head", 
                    alternatingRowStyle: "alt", 
                    columns: grid.Columns( 
                        grid.Column("Name", "Product", style: "product"), 
                        grid.Column("Description", format:@<i>@item.Description</i>), 
                        grid.Column("Price", format:@<text>$@item.Price</text>) 
                    ) 
                ) 
            </div> 
        </body> 
    </html>

    Tento kód vychází z předchozího příkladu a ukazuje, jak vytvořit nové třídy stylů (grid, head, grid th, grid tdalt). Metoda grid.GetHtml (mřížka.Získat kód HTML) poté tyto třídy přiřadí různým elementům mřížky pomocí parametrů tableStyle (styl tabulky), headerStyle (styl záhlaví) a alternatingRowStyle (střídavý styl řádku).

  3. Zobrazte stránku v prohlížeči. Mřížka bude tentokrát zobrazena s použitím odlišných stylů vztahujících se na celou tabulku, například střídavě zobrazených svazků řádků.

    ch06_WebGrid-03

Stránkování dat

Místo zobrazení všech dat v mřížce najednou můžete uživatelům umožnit jejich procházení po jednotlivých stránkách. Pro malé množství dat, se kterým zde pracujeme, není stránkování důležité. Ale když potřebujete zobrazit stovky nebo tisíce řádků dat, je stránkování velmi užitečné.

K vykreslené mřížce je stránkování možné přidat uvedením dalšího parametru pomocné třídy WebGrid (Webová mřížka).

  1. Vytvořte na webu novou stránku s názvem WebGridPaging.cshtml.
  2. Stávající kód značkovacího jazyka nahraďte následujícím kódem:
    @{ 
        var db = Database.Open("SmallBakery"); 
        var selectQueryString = "SELECT * FROM Product ORDER BY Id"; 
        var data = db.Query(selectQueryString); 
        var grid = new WebGrid(source: data, 
                               defaultSort: "Name", 
                               rowsPerPage: 3); 
    } 
    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>Displaying Data Using the WebGrid Helper (with Paging)</title> 
            <style type="text/css"> 
                .grid { margin: 4px; border-collapse: collapse; width: 600px; } 
                .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; } 
                .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; } 
                .alt { background-color: #E8E8E8; color: #000; } 
                .product { width: 200px; font-weight:bold;} 
            </style> 
        </head> 
        <body> 
            <h1>Small Bakery Products</h1> 
            <div id="grid"> 
                @grid.GetHtml( 
                    tableStyle: "grid", 
                    headerStyle: "head", 
                    alternatingRowStyle: "alt", 
                    columns: grid.Columns( 
                        grid.Column("Name", "Product", style: "product"), 
                        grid.Column("Description", format:@<i>@item.Description</i>), 
                        grid.Column("Price", format:@<text>$@item.Price</text>) 
                    ) 
                ) 
            </div> 
        </body> 
    </html>

    Tento kód rozšiřuje předchozí příklad a přidává parametr rowsPerPage (počet řádků na stránku) při vytvoření objektu WebGrid (Webová mřížka). Tento parametr umožňuje nastavit počet zobrazených řádků. Když je tento parametr zahrnut, je automaticky povoleno stránkování.

  3. Zobrazte stránku v prohlížeči. Všimněte si, že jsou zobrazeny pouze tři řádky. Ve spodní části mřížky najdete ovládací prvky, pomocí nichž je možné po stránkách procházet zbylými řádky dat.

    ch06_WebGrid-04

Další materiály

Kapitola 5 – Práce s daty

Kapitola 7 – Zobrazení dat v grafu

Referenční příručka pro webové stránky ASP.NET se syntaxí Razor