7. diel - Zobrazovanie a administrácia článkov v ASP.NET

V minulej lekcii, Výpis článkov z databázy v ASP.NET , sme si založili databázu článkov a zobrazili ich zoznam pomocou kontrolky datalist. Články v tomto zozname sa odkazovali na stránku Clanek.aspx, ktoré odovzdávali parameter v QueryString s URL článku, ktorý sa má zobraziť. V dnešnom C# .NET tutoriálu naprogramujeme práve stránku Clanek.aspx.

Pridajte si k projektu nový Web Form with Master Page, ktorý pomenujte Clanek.aspx.

Z ToolBox na formulár pretiahneme kontrolku FormView. Tá nám umožňuje zobrazovať a aj administrovať jednu určitú položku z databázy.

Nastavenie DataSource

Presunieme sa do Design a pomocou šípky vpravo pri FormView nastavíme DataSource na New DataSource.

Tým sa nám vyvolá nám poznáme okno pre vytvorenie nového zdroja údajov. Vyberieme Database a ID zdroja zvolíme ako ClanekDataSource.

V ďalšom okne zvolíme náš ConnectionString, ktorý sme si nechali vytvoriť minule.

Ďalej ako tabuľku vyberieme Clanok, zaujímať nás budú všetky stĺpce. K dopytu pridáme klauzulu WHERE pomocou rovnomenného tlačidla. Tým opodmínkujeme ktoré články chceme zobraziť.

Podmienku aplikujeme na stĺpec Url. Operátor necháme na znamienko rovnosti a ako zdroj údajov zvolíme QueryString. To je parameter z URL adresy. Do QueryString field vyplníme názov parametra, čo je clanek. Pomocou tlačidla Add podmienku pridáme a formulár potvrdíme.

Pomocou tlačidla Advanced ... si následne necháme automaticky vygenerovať aj SQL príkazy pre vloženie a editáciu článku.

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

Vygenerovalo sa nám pomerne dosť kódu. Samotný FormView v sebe teraz obsahuje 3 šablóny: EditItemTemplate, InsertItemTemplate a ItemTemplate. Podľa názvu asi tušíte, že prvá je pre editáciu, preto v nej sú textbox. Tá druhá je pre vkladanie a tretí pre výpis.

Úprava šablón

Všetky 3 šablóny si postupne upravíme. Začnime s šablónou pre výpis záznamu.

ItemTemplate

Pri výpise článkov nás určite nebude zaujímať jeho Id a Popis. Zaujímať nás nebude ani titulok, pretože ten budeme chcieť nastaviť celej stránke namiesto toho, aby sme ho niekam vypísali. Táto 3 polia z šablóny odstránime. Obsah vypíšeme jednoducho do zvyšného priestoru pomocou Eval, Bind sa používa pre obojsmerné previazanie hodnôt, ktoré v tomto prípade nechceme.

Kód ItemTemplate bude vyzerať nasledovne:

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

Nastavenie titulku stránky

Ako už bolo povedané, titulok stránky Clanek.aspx budeme chcieť nastavovať dynamicky podľa článku, ktorý je vo FormView zrovna načítaný. Najprv úplne odstránime nastavenie titulku na prvom riadku šablóny Clanky.aspx:

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

Titulok budeme chcieť nastaviť zo stĺpčeku titulok toho databázového riadku (záznamu), ktorý je načítaný vo FormView. Tento riadok je prístupný pod vlastností DataItem. Tá je dostupná iba v udalosti Data_Bound.

FormView nastavíme ID na ClanekFormView a naklikne mu udalosť DataBound. To urobíme v Property oknu, kde prejdeme ikonou blesku na udalosti.

Do udalosti vložíme nasledujúci kód:

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

Najprv načítame DataRowView z FormView. Tým máme zobrazovaný databázový riadok. Ak nejaký existuje, nastavíme titulok stránky na hodnotu stĺpca Titulok.

Môžete si aplikáciu spustiť a otvoriť nejaký článok:

Máme teda zobrazený prvý článok z databázy. Ukazuje sa jeho titulok a text. Ja som tam toho textu príliš nedal, to môžete napraviť hneď ako sprevádzkujeme editor.

EditItemTemplate

Presunieme sa do editačné šablóny kontrolky FormView. Tu odstránime stĺpec Id, pretože ten nebudeme nikdy meniť. TextBoxům s obsahom a popisom nastavíme vlastnosť TextMode na Multiline. Elementy sa tým zmení z bežného inputu na viacerých riadkov textarea. Pretože vygenerovaný formulár nie je príliš vábny, vložíme ho do tabuľky a kontrolkám nastavíme veľkosť. Samozrejme by sa to dalo urobiť aj čisto cez CSS.

EditTemplate bude po úprave vyzerať 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>

Keď sa presunieme na konkrétny článok a pod ním klikneme na odkaz Edit, zobrazí sa nám vygenerovaný Editor článkov:

Formulár zatiaľ nepôjde odoslať, čo vyriešime zas v budúcej lekcii, Dokončenie editora článkov v ASP.NET . Dnešné zdrojové kódy nájdete v prílohe.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.