Úvod do ASP.NET webových stránek – zobrazení dat

, autor: Tom FitzMacken

V tomto kurzu se dozvíte, jak vytvořit databázi ve službě WebMatrix a jak zobrazit data databáze na stránce při použití ASP.NET webových stránek (Razor). Předpokládá se, že jste dokončili řadu prostřednictvím úvodu k programování webových stránek ASP.NET.

Naučíte se:

• Použití nástrojů WebMatrix k vytvoření databáze a databázových tabulek
• Jak používat nástroje WebMatrix k přidání dat do databáze.
• Jak zobrazit data z databáze na stránce.
• Jak spouštět příkazy SQL na webových stránkách ASP.NET.
• Jak přizpůsobit pomocnou rutinu WebGrid pro změnu zobrazení dat a přidání stránkování a řazení.

Probírané funkce a technologie:

• Databázové nástroje WebMatrix.
• WebGrid Pomocníka.

Co vytvoříte

V předchozím kurzu jste se seznámili s ASP.NET webovými stránkami (soubory .cshtml ), základy syntaxe Razor a pomocnými rutinami. V tomto kurzu začnete vytvářet vlastní webovou aplikaci, kterou budete používat pro zbytek série. Tato aplikace je jednoduchá filmová aplikace, která umožňuje zobrazovat, přidávat, měnit a odstraňovat informace o filmech.

Až skončíte s tímto kurzem, budete si moct prohlédnout film, který vypadá podobně jako tato stránka:

Ale pro začátek musíte vytvořit databázi.

Velmi stručný úvod do databází

Tento kurz poskytne pouze stručný úvod do databází. Pokud máte zkušenosti s databází, můžete tuto krátkou část přeskočit.

Databáze obsahuje jednu nebo více tabulek, které obsahují informace – například tabulky pro zákazníky, objednávky a dodavatele nebo pro studenty, učitele, předměty a známky. Strukturálně je tabulka databáze jako tabulka. Představte si typický adresář. Pro každou položku v adresáři (tedy pro každou osobu) máte několik informací, jako je jméno, příjmení, adresa, e-mailová adresa a telefonní číslo.

(Řádky se někdy označují jako záznamy a sloupce jako pole.)

U většiny databázových tabulek musí mít tabulka sloupec, který obsahuje jedinečnou hodnotu, jako je číslo zákazníka, číslo účtu atd. Tato hodnota se označuje jako primární klíč tabulky a slouží k identifikaci jednotlivých řádků v tabulce. V tomto příkladu je sloupec ID primárním klíčem pro adresář uvedený v předchozím příkladu.

Velká část práce, kterou děláte ve webových aplikacích, spočívá ve čtení informací z databáze a jejich zobrazení na stránce. Často také shromáždíte informace od uživatelů a přidáte je do databáze, nebo upravíte záznamy, které už v databázi jsou. (Všechny tyto operace probereme v rámci této sady kurzů.)

Práce s databází může být nesmírně složitá a může vyžadovat specializované znalosti. Pro tuto sadu kurzů však musíte pochopit pouze základní koncepty, které budou vysvětleny za každou chvíli.

Vytvoření databáze

WebMatrix obsahuje nástroje, které usnadňují vytvoření databáze a vytváření tabulek v databázi. (Struktura databáze se označuje jako schéma databáze.) Pro účely této sady kurzů vytvoříte databázi, která obsahuje jenom jednu tabulku – Filmy.

Pokud jste to ještě neudělali, otevřete webMatrix a otevřete web WebPagesMovies, který jste vytvořili v předchozím kurzu.

V levém podokně klikněte na pracovní prostor Databáze .

Pás karet se změní tak, aby zobrazoval úkoly související s databází. Na pásu karet klikněte na Nová databáze.

WebMatrix vytvoří databázi SQL Server CE (soubor .sdf), která má stejný název jako váš web – WebPagesMovies.sdf. (Tady to neuděláte, ale soubor můžete přejmenovat na cokoli, pokud má příponu .sdf .)

Vytvoření tabulky

Na pásu karet klikněte na Nová tabulka. WebMatrix otevře návrháře tabulky na nové kartě. (Pokud není možnost Nová tabulka dostupná, zkontrolujte, jestli je nová databáze vybraná ve stromovém zobrazení vlevo.)

Do textového pole v horní části (kde vodoznak uvádí "Zadejte název tabulky") zadejte "Filmy".

Jednotlivé sloupce se definují v podokně pod názvem tabulky. Pro tabulku Movies v tomto kurzu vytvoříte jenom několik sloupců: ID, Title, Žánr a Year.

Do pole Název zadejte "ID". Když sem zadáte hodnotu, aktivují se všechny ovládací prvky pro nový sloupec.

Přejděte tabulátorem na seznam Datový typ a zvolte int. Tato hodnota určuje, že sloupec ID bude obsahovat celočíselná (číselná) data.

Poznámka

Už to tu nebudeme popisovat (moc), ale k navigaci v této mřížce můžete použít standardní klávesová gesta Windows. Můžete například pomocí tabulátoru mezi poli, jednoduše začít psát, abyste mohli vybrat položku v seznamu atd.

Klávesou Tab přejděte do pole Výchozí hodnota (to znamená, že ho nechte prázdné). Pomocí klávesy Tab přejděte na zaškrtávací políčko Je primární klíč a vyberte ho. Tato možnost informuje databázi, že sloupec ID bude obsahovat data, která identifikují jednotlivé řádky. (To znamená, že každý řádek bude mít ve sloupci ID jedinečnou hodnotu, kterou můžete použít k vyhledání daného řádku.)

Zvolte možnost Je identita . Tato možnost říká databázi, že by měla automaticky vygenerovat další pořadové číslo pro každý nový řádek. (Možnost Je identita funguje jenom v případě, že jste také vybrali možnost Je primární klíč .)

Klikněte na další řádek mřížky nebo dvakrát stiskněte klávesu Tab a dokončete aktuální řádek. Jedno gesto uloží aktuální řádek a spustí další. Všimněte si, že sloupec Výchozí hodnota teď má hodnotu Null. (Výchozí hodnota výchozí hodnoty je null, tak řečeno.)

Po dokončení definování nového sloupce ID bude návrhář vypadat jako na tomto obrázku:

Pokud chcete vytvořit další sloupec, klikněte do pole ve sloupci Název . Jako sloupec zadejte Název a jako hodnotu Datový typ vyberte nvarchar. Část "var" příkazu nvarchar informuje databázi, že data pro tento sloupec budou řetězcem, jehož velikost se může v jednotlivých záznamech lišit. (Předpona "n" představuje "národní", což znamená, že pole může obsahovat znaková data pro jakoukoli abecedu nebo systém zápisu – to znamená, že pole obsahuje data Unicode.)

Když zvolíte nvarchar, zobrazí se další pole, do kterého můžete zadat maximální délku pole. Zadejte 50 za předpokladu, že žádný název filmu, se kterým budete v tomto kurzu pracovat, nebude delší než 50 znaků.

Přeskočte Výchozí hodnota a zrušte zaškrtnutí políčka Povolit hodnoty Null . Nechcete, aby databáze umožňovala zadávání filmů, které nemají název.

Až budete hotovi a přejdete na další řádek, bude návrhář vypadat jako na tomto obrázku:

Opakováním těchto kroků vytvořte sloupec s názvem "Žánr", s výjimkou délky, která ho nastaví jenom na 30.

Vytvořte další sloupec s názvem Year( Rok). Jako datový typ zvolte nchar (ne nvarchar) a nastavte délku na 4. Pro rok použijete 4místné číslo, jako je "1995" nebo "2010", takže nepotřebujete sloupec s proměnlivou velikostí.

Hotový návrh vypadá takto:

Stiskněte Ctrl+S nebo klikněte na tlačítko Uložit na panelu nástrojů Rychlý přístup. Zavřením karty zavřete návrháře databáze.

Přidání ukázkových dat

Později v této sérii kurzů vytvoříte stránku, kde můžete zadat nové filmy ve formuláři. Prozatím ale můžete přidat ukázková data, která pak můžete zobrazit na stránce.

V pracovním prostoru Databáze v nástroji WebMatrix si všimněte stromové struktury, která zobrazuje soubor .sdf , který jste vytvořili dříve. Otevřete uzel pro nový soubor .sdf a pak otevřete uzel Tabulky .

Klikněte pravým tlačítkem na uzel Filmy a pak zvolte Data. WebMatrix otevře mřížku, do které můžete zadat data pro tabulku Filmy :

Klikněte na sloupec Název a zadejte "Když Harry potkal Sally". Přejděte do sloupce Žánr (můžete použít klávesu Tab) a zadejte "Romantic Comedy". Přejděte do sloupce Year (Rok ) a zadejte "1989":

Stiskněte Enter a webMatrix uloží nový film. Všimněte si, že sloupec ID je vyplněný.

Zadejte jiný film (například "Pryč s větrem", "Drama", "1939"). Sloupec ID se vyplní znovu:

Zadejte třetí film (například "Ghostbusters", "Comedy"). Jako experiment ponechte sloupec Year prázdný a stiskněte Enter. Vzhledem k tomu, že jste zrušili výběr možnosti Povolit hodnoty Null , zobrazí se v databázi chyba:

Kliknutím na OK se vraťte zpět a opravte položku (rok pro "Ghostbusters" je 1984) a stiskněte Enter.

Vyplňte několik filmů, dokud jich nebudete mít 8. (Zadání hodnoty 8 usnadní pozdější práci se stránkováním. Pokud je jich ale moc, zadejte prozatím jenom několik.) Na skutečných datech nezáleží.

Pokud jste zadali všechna videa bez chyb, hodnoty ID jsou sekvenční. Pokud jste se pokusili uložit neúplný záznam filmu, čísla ID nemusí být sekvenční. Pokud ano, je to v pořádku. Čísla nemají žádný vlastní význam a jediné, co je důležité, je, že jsou v tabulce Filmy jedinečné.

Zavřete kartu, která obsahuje návrháře databáze.

Teď můžete přepnout na zobrazení těchto dat na webové stránce.

Zobrazení dat na stránce pomocí pomocné rutiny WebGrid

K zobrazení dat na stránce použijete pomocnou rutinu WebGrid . Tato pomocná rutina vytvoří zobrazení v mřížce nebo tabulce (řádky a sloupce). Jak uvidíte, budete moct mřížku upřesnit pomocí formátování a dalších funkcí.

Abyste mohli mřížku spustit, budete muset napsat několik řádků kódu. Těchto pár řádků bude sloužit jako určitý vzor pro téměř veškerý přístup k datům, který v tomto kurzu děláte.

Poznámka

Ve skutečnosti máte mnoho možností pro zobrazení dat na stránce; pomocná WebGrid rutina je jen jedna. Zvolili jsme ho pro tento kurz, protože je to nejjednodušší způsob zobrazení dat a protože je přiměřeně flexibilní. V další sadě kurzů se dozvíte, jak používat více "ruční" způsob práce s daty na stránce, který vám umožní přímou kontrolu nad zobrazením dat.

V levém podokně nástroje WebMatrix klikněte na pracovní prostor Soubory .

Nová databáze, kterou jste vytvořili, je ve složce App_Data . Pokud složka ještě neexistuje, webMatrix ji pro novou databázi vytvořil. (Složka mohla existovat, pokud jste dříve nainstalovali pomocné rutiny.)

Ve stromovém zobrazení vyberte kořen webu. Musíte vybrat kořen webu. v opačném případě může být nový soubor přidán do složky App_Data.

Na pásu karet klikněte na Nový. V poli Zvolit typ souboru zvolte CSHTML.

V poli Název pojmenujte novou stránku "Movies.cshtml":

Klikněte na tlačítko OK . WebMatrix otevře nový soubor, ve kterém jsou některé kosterní prvky. Nejprve napíšete kód, abyste mohli získat data z databáze. Pak na stránku přidáte revize, které data skutečně zobrazí.

Zápis kódu dotazu na data

V horní části stránky zadejte mezi @{ znaky a } následující kód. (Nezapomeňte tento kód zadat mezi levou a pravou složenou závorku.)

var db = Database.Open("WebPagesMovies");
var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData);

První řádek otevře databázi, kterou jste vytvořili dříve, což je vždy první krok před provedením nějaké akce s databází. Zadejte Database.Open název metody databáze, která se má otevřít. Všimněte si, že do názvu nezahrnujete .sdf . Metoda Open předpokládá, že hledá soubor .sdf (tj. WebPagesMovies.sdf) a že se soubor .sdf nachází ve složce App_Data . (Dříve jsme si poznamenali, že složka App_Data je vyhrazená. Tento scénář je jedním z míst, kde ASP.NET o tomto názvu předpokládá.)

Po otevření databáze se odkaz na ni vloží do proměnné s názvem db. (Který by se dal pojmenovat jakkoliv.) Proměnná db je způsob, jak skončíte při interakci s databází.

Druhý řádek ve skutečnosti načte data databáze pomocí metody .Query Všimněte si, jak tento kód funguje: db Proměnná obsahuje odkaz na otevřenou databázi a metodu Query vyvoláte pomocí db proměnné (db.Query).

Samotný dotaz je příkazem SQL Select . (Podrobnější informace o SQL najdete ve vysvětlení později.) V příkazu identifikuje tabulku, Movies která se má dotazovat. Znak * určuje, že dotaz má vrátit všechny sloupce z tabulky. (Můžete také vypsat jednotlivé sloupce oddělené čárkami.)

Případné výsledky dotazu se vrátí a zpřístupní v selectedData proměnné . Proměnná může být opět pojmenována libovolným názvem.

Nakonec třetí řádek informuje ASP.NET, že chcete použít instanci pomocné rutiny WebGrid . Objekt pomocné rutiny vytvoříte (vytvoří se jeho instance) pomocí klíčového new slova a předáte mu výsledky dotazu prostřednictvím selectedData proměnné . Nový WebGrid objekt spolu s výsledky databázového dotazu se zpřístupní v grid proměnné . Tento výsledek budete potřebovat za chvíli, abyste data na stránce skutečně zobrazili.

V této fázi se databáze otevřela, získali jste požadovaná data a připravili WebGrid jste pomocníka s daty. Dalším je vytvoření kódu na stránce.

Tip

Structured Query Language (SQL)

SQL je jazyk, který se používá ve většině relačních databází ke správě dat v databázi. Obsahuje příkazy, které umožňují načíst a aktualizovat data a které umožňují vytvářet, upravovat a spravovat data v databázových tabulkách. SQL se liší od programovacího jazyka (například C#). Pomocí SQL sdělujete databázi, co chcete, a úkolem databáze je zjistit, jak získat data nebo provést úlohu. Tady jsou příklady některých příkazů SQL a jejich funkce:

Select * From Movies

SELECT ID, Name, Price FROM Product WHERE Price > 10.00 ORDER BY Name

První Select příkaz načte všechny sloupce (určené parametrem *) z tabulky Movies .

Druhý Select příkaz načte sloupce ID, Name a Price ze záznamů v tabulce Product , jejichž hodnota sloupce Price je větší než 10. Příkaz vrátí výsledky v abecedním pořadí na základě hodnot sloupce Název. Pokud kritériím ceny neodpovídají žádné záznamy, příkaz vrátí prázdnou sadu.

INSERT INTO Product (Name, Description, Price) VALUES ('Croissant', 'A flaky delight', 1.99)

Tento příkaz vloží nový záznam do tabulky Product a nastaví sloupec Name na "Croissant", sloupec Description na "A flaky delight" a price na 1,99.

Všimněte si, že když zadáváte nečíselnou hodnotu, je hodnota uzavřená v jednoduchých uvozovkách (nikoli v uvozovkách, jako v jazyce C#). Tyto uvozovky se používají u textových hodnot nebo hodnot kalendářních dat, ale ne u čísel.

DELETE FROM Product WHERE ExpirationDate < '01/01/2008'

Tento příkaz odstraní záznamy v tabulce Product , jejichž sloupec s datem vypršení platnosti je dřívější než 1. leden 2008. (Příkaz samozřejmě předpokládá, že tabulka Product obsahuje takový sloupec.) Datum se sem zadává ve formátu MM/DD/RRRR, ale mělo by být zadáno ve formátu, který se používá pro vaše národní prostředí.

Příkazy Insert a Delete nevrací sady výsledků. Místo toho vrátí číslo, které udává, kolik záznamů bylo příkazem ovlivněno.

U některých z těchto operací (například vkládání a odstraňování záznamů) musí mít proces, který operaci požaduje, příslušná oprávnění v databázi. Proto u produkčních databází často musíte při připojování k databázi zadat uživatelské jméno a heslo.

Existují desítky příkazů SQL, ale všechny se řídí vzorem, jako jsou příkazy, které vidíte tady. Pomocí příkazů SQL můžete vytvářet databázové tabulky, počítat počet záznamů v tabulce, počítat ceny a provádět mnoho dalších operací.

Přidání revizí k zobrazení dat

Uvnitř elementu <head> nastavte obsah elementu <title> na "Filmy":

<head>
    <meta charset="utf-8" />
    <title>Movies</title>
</head>

Do elementu <body> stránky přidejte následující:

<h1>Movies</h1>
<div>
    @grid.GetHtml()
</div>

Hotovo. Proměnná grid je hodnota, kterou jste vytvořili při vytváření objektu WebGrid v kódu dříve.

Ve stromovém zobrazení WebMatrix klikněte pravým tlačítkem na stránku a vyberte Spustit v prohlížeči. Zobrazí se něco podobného jako tato stránka:

Kliknutím na odkaz záhlaví sloupce ho seřadíte podle tohoto sloupce. Možnost řazení kliknutím na nadpis je funkce, která je součástí pomocné rutiny WebGrid .

Metoda GetHtml , jak její název napovídá, vygeneruje kód, který zobrazí data. Ve výchozím nastavení GetHtml metoda vygeneruje element HTML <table> . (Pokud chcete, můžete vykreslování ověřit tak, že se podíváte na zdroj stránky v prohlížeči.)

Změna vzhledu mřížky

Použití pomocníka WebGrid , jako jste to právě udělali, je snadné, ale výsledný displej je prostý. Pomocník WebGrid má nejrůznější možnosti, které vám umožní řídit způsob zobrazení dat. V tomto kurzu jich není moc, ale tato část vám poskytne představu o některých z těchto možností. Několik dalších možností bude popsáno v dalších kurzech v této sérii.

Určení jednotlivých sloupců, které se mají zobrazit

Začněte tím, že určíte, že chcete zobrazit jenom určité sloupce. Jak jste viděli, ve výchozím nastavení se v mřížce zobrazují všechny čtyři sloupce z tabulky Filmy .

V souboru Movies.cshtml nahraďte @grid.GetHtml() kód, který jste právě přidali, následujícím kódem:

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

Pokud chcete pomocníkovi sdělit, které sloupce má zobrazit, zahrnete columns parametr metody GetHtml a předáte kolekci sloupců. V kolekci zadáte každý sloupec, který se má zahrnout. Jednotlivé sloupce, které se mají zobrazit, určíte zahrnutím objektu grid.Column a předáte název požadovaného sloupce dat. (Tyto sloupce musí být zahrnuté do výsledků dotazu SQL – pomocná rutina WebGrid nemůže zobrazit sloupce, které dotaz nevrátil.)

V prohlížeči znovu spusťte stránku Movies.cshtml a tentokrát se zobrazí zobrazení podobné následujícímu (všimněte si, že se nezobrazuje žádný sloupec ID):

Změna vzhledu mřížky

Existuje ještě několik dalších možností pro zobrazení sloupců, z nichž některé budou prozkoumány v pozdějších kurzech v této sadě. Prozatím vás tato část seznámí se způsoby, jak můžete upravit styl mřížky jako celku.

Do oddílu <head> stránky těsně před uzavírací </head> značku přidejte následující <style> prvek:

<style type="text/css">
  .grid { margin: 4px; border-collapse: collapse; width: 600px; }
  .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
  .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
  .alt { background-color: #E8E8E8; color: #000; }
</style>

Tento kód CSS definuje třídy s názvem grid, headatd. Tyto definice stylů můžete také umístit do samostatného souboru .css a propojit ho se stránkou. (Ve skutečnosti to uděláte později v této sadě kurzů.) Pro usnadnění tohoto kurzu jsou ale na stejné stránce, na které se zobrazují data.

Teď můžete pomocnou rutinu WebGrid získat, aby tyto třídy stylů používala. Pomocná rutina má pro tento účel řadu vlastností (například tableStyle) – přiřadíte jim název třídy stylu CSS a tento název třídy se vykreslí jako součást kódu, který pomocník vykreslí.

grid.GetHtml Změňte kód tak, aby teď vypadal jako tento kód:

@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

Novinkou je, že jste do GetHtml metody přidali tableStyleparametry , headerStylea alternatingRowStyle . Tyto parametry byly nastaveny na názvy stylů CSS, které jste přidali před okamžikem.

Spusťte stránku a tentokrát uvidíte mřížku, která vypadá mnohem méně jednoduše než předtím:

Pokud chcete zjistit, co GetHtml metoda vygenerovala, můžete se podívat na zdroj stránky v prohlížeči. Nebudeme zde zacházet do podrobností, ale důležité je, že zadáním parametrů, jako tableStyleje , jste způsobili, že mřížka vygenerovala značky HTML takto:

<table class="grid">

Ke <table> značce byl class přidán atribut, který odkazuje na jedno z pravidel šablon stylů CSS, která jste přidali dříve. Tento kód ukazuje základní vzor – různé parametry metody GetHtml umožňují odkazovat na třídy CSS, které pak metoda vygeneruje společně se značkami. Co s třídami CSS uděláte, je jen na vás.

Přidání stránkování

Jako poslední úkol v tomto kurzu přidáte stránkování do mřížky. Právě teď není problém zobrazit všechny filmy najednou. Pokud byste ale přidali stovky filmů, zobrazení stránky by bylo dlouhé.

V kódu stránky změňte řádek, který vytváří WebGrid objekt, na následující kód:

var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

Jediný rozdíl oproti předchozí hodnotě spočívá v tom, že jste přidali rowsPerPage parametr, který je nastavený na hodnotu 3.

Spusťte stránku. V mřížce se zobrazují 3 řádky najednou a navíc navigační odkazy, které umožňují stránkovat filmy v databázi:

Připravujeme další

V dalším kurzu se dozvíte, jak pomocí kódu Razor a C# získat uživatelský vstup ve formuláři. Na stránku Filmy přidáte vyhledávací pole, abyste mohli najít filmy podle názvu nebo žánru.

Stránka kompletního seznamu filmů

@{
    var db = Database.Open("WebPagesMovies");
    var selectedData = db.Query("SELECT * FROM Movies");
    var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Movies</title>
        <style type="text/css">
          .grid { margin: 4px; border-collapse: collapse; width: 600px; }
          .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
          .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
          .alt { background-color: #E8E8E8; color: #000; }
        </style>
    </head>
    <body>
        <h1>Movies</h1>
        <div>
            @grid.GetHtml(
                tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column("Title"),
                    grid.Column("Genre"),
                    grid.Column("Year")
                )
            )
        </div>
    </body>
</html>

Další materiály

• Úvod do ASP.NET webového programování pomocí syntaxe Razor

PředchozíDalší