Lekce 7 - Zobrazování a administrace článků v ASP.NET

V minulé lekci, Výpis článků z databáze v ASP.NET, jsme si založili databázi článků a zobrazili jejich seznam pomocí kontrolky DataList. Články v tomto seznamu se odkazovaly na stránku Clanek.aspx, které předávaly parametr v QueryString s URL článku, který se má zobrazit.

V dnešním C# .NET tutoriálu naprogramujeme právě stránku Clanek.aspx.

Přidejte si k projektu nový Web Form with Master Page, který pojmenujte Clanek.aspx.

Z ToolBoxu na formulář přetáhneme kontrolku FormView. Ta nám umožňuje zobrazovat a i administrovat jednu určitou položku z databáze.

Nastavení DataSource

Přesuneme se do Design a pomocí šipky vpravo u FormView nastavíme DataSource na New DataSource.

Tím se nám vyvolá nám známe okno pro vytvoření nového zdroje dat. Vybereme Database a ID zdroje zvolíme jako ClanekDataSource.

V dalším okně zvolíme náš ConnectionString, který jsme si nechali vytvořit minule.

Dále jako tabulku vybereme Clanek, zajímat nás budou všechny sloupce. K dotazu přidáme klauzuli WHERE pomocí stejnojmenného tlačítka. Tím opodmínkujeme které články chceme zobrazit.

Podmínku aplikujeme na sloupec Url. Operátor necháme na rovnítko a jako zdroj dat zvolíme QueryString. To je parametr z URL adresy. Do QueryString field vyplníme název parametru, což je clanek. Pomocí tlačítka Add podmínku přidáme a formulář potvrdíme.

Pomocí tlačítka Advanced... si následně necháme automaticky vygenerovat i SQL příkazy pro vložení a editaci článku.

Vše potvrdíme a dokončíme.

Vygenerovalo se nám poměrně dost kódu. Samotný FormView v sobě nyní obsahuje 3 šablony: EditItemTemplate, InsertItemTemplate a ItemTemplate. Podle názvu asi tušíte, že první je pro editaci, proto v ní jsou TextBoxy. Ta druhá je pro vkládání a třetí pro výpis.

Úprava šablon

Všechny 3 šablony si postupně upravíme. Začněme s šablonou pro výpis záznamu.

ItemTemplate

Při výpisu článků nás určitě nebude zajímat jeho Id a Popis. Zajímat nás nebude ani titulek, jelikož ten budeme chtít nastavit celé stránce místo toho, abychom ho někam vypsali. Tato 3 pole z šablony odstraníme. Obsah vypíšeme jednoduše do zbylého prostoru pomocí Eval, Bind se používá pro obousměrné provázání hodnot, které v tomto případě nechceme.

Kód ItemTemplate bude vypadat následovně:

<ItemTemplate>
    <%# Eval("Obsah") %>
    <asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit" />
    &nbsp;<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete" />
    &nbsp;<asp:LinkButton ID="NewButton" runat="server" CausesValidation="False" CommandName="New" Text="New" />
</ItemTemplate>

Nastavení titulku stránky

Jak již bylo řečeno, titulek stránky Clanek.aspx budeme chtít nastavovat dynamicky podle článku, který je ve FormView zrovna načtený. Nejprve úplně odstraníme nastavení titulku na prvním řádku šablony Clanky.aspx:

<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Clanek.aspx.cs" Inherits="AspBlog.Clanek" %>

Titulek budeme chtít nastavit ze sloupečku Titulek toho databázového řádku (záznamu), který je načtený ve FormView. Tento řádek je přístupný pod vlastností DataItem. Ta je dostupná pouze v události Data_Bound.

FormView nastavíme ID na ClanekFormView a naklikneme mu událost DataBound. To uděláme v Property oknu, kde přejdeme ikonou blesku na události.

Do události vložíme následující kód:

protected void ClanekFormView_DataBound(object sender, EventArgs e)
{
    DataRowView radek = (DataRowView)ClanekFormView.DataItem;
    if (radek != null)
    {
        Title = radek.Row["Titulek"].ToString();
    }
}

Nejprve načteme DataRowView z FormView. Tím máme zobrazovaný databázový řádek. Pokud nějaký existuje, nastavíme titulek stránky na hodnotu sloupce Titulek.

Můžete si aplikaci spustit a otevřít nějaký článek:

Máme tedy zobrazený první článek z databáze. Ukazuje se jeho titulek a text. Já jsem tam toho textu příliš nedal, to můžete napravit hned jak zprovozníme editor.

EditItemTemplate

Přesuneme se do editační šablony kontrolky FormView. Zde odstraníme sloupec Id, protože ten nebudeme nikdy měnit. TextBoxům s obsahem a popisem nastavíme vlastnost TextMode na MultiLine. Elementy se tím změní z běžného inputu na víceřádkovou textarea. Protože vygenerovaný formulář není příliš vábný, vložíme ho do tabulky a kontrolkám nastavíme velikost. Samozřejmě by se to dalo udělat i čistě přes CSS.

EditTemplate bude po úpravě vypadat takto:

<EditItemTemplate>
    <table>
        <tr>
            <td>Titulek</td>
            <td><asp:TextBox Width="500" ID="TitulekTextBox" runat="server" Text='<%# Bind("Titulek") %>' /></td>
        </tr>
        <tr>
            <td>Url</td>
            <td><asp:TextBox Width="500" ID="UrlTextBox" runat="server" Text='<%# Bind("Url") %>' /></td>
        </tr>
        <tr>
            <td>Popis</td>
            <td><asp:TextBox Width="500" TextMode="MultiLine" ID="PopisTextBox" runat="server" Text='<%# Bind("Popis") %>' /></td>
        </tr>
        <tr>
            <td>Obsah</td>
            <td><asp:TextBox Width="500" Height="300" TextMode="MultiLine" ID="ObsahTextBox" runat="server" Text='<%# Bind("Obsah") %>' /></td>
        </tr>
    </table>
    <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="Update" />
    &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
</EditItemTemplate>

Když se přesuneme na konkrétní článek a pod ním klikneme na odkaz Edit, zobrazí se nám vygenerovaný Editor článků:

Formulář zatím nepůjde odeslat.

To vyřešíme zas v příští lekci, Dokončení editoru článků v ASP.NET. Dnešní zdrojové kódy naleznete v příloze.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.