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

C# .NET ASP.NET Web Forms Zobrazování a administrace článků v ASP.NET

V minulém dílu našeho seriálu tutoriálů o tvorbě webových aplikací 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 dí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.

Přidání DataSource FormView v ASP.NET Web Forms

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.

Tvorba DataSource pro FormView v ASP.NET Web Forms

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

Tvorba DataSource pro FormView v ASP.NET Web Forms

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.

Tvorba DataSource pro FormView v ASP.NET Web Forms

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.

Tvorba DataSource pro FormView v ASP.NET Web Forms

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

Tvorba DataSource pro FormView v ASP.NET Web Forms

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:

Zobrazení článku z databáze v ASP.NET Web Forms

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

Editace FormView v ASP.NET Web Forms

Formulář zatím nepůjde odeslat, což vyřešíme zas příště. Dnešní zdrojové kódy naleznete v příloze.


 

Stáhnout

Staženo 238x (20.46 MB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (3 hlasů) :
55555


 


Miniatura
Všechny články v sekci
ASP.NET Web Forms
Miniatura
Následující článek
Dokončení editoru článků v ASP.NET

 

 

Komentáře

Avatar
Ondrca
Redaktor
Avatar
Ondrca:

Ahoj, jak funguje/jak si to C# bere tu adresu Clanek.aspx?cla­nek=....
Prosím o vysvětlení

Odpovědět 19.2.2014 14:42
Zase jsem o něco chytřejší
Avatar
Ondrca
Redaktor
Avatar
Ondrca:

Promiňte, že píšu 2 posty za sebou, ale můžete mi poradit proč mi VS hází HTTPexception?

An exception of type 'System.Web.HttpException' occurred in System.Web.dll but was not handled in user code

Additional information: DataBinding: System.Data.DataRowView neobsahuje vlastnost daného názvu Url.

Díky moc

Editováno 19.2.2014 14:57
Odpovědět 19.2.2014 14:54
Zase jsem o něco chytřejší
Avatar
Ondřej Štorc:

Ahoj, chtěl bych se zeptat jak mám vyřešit problém typu že uživatel zadá adresu Clanek?clanek=blbos­tnaentou, tak se mu zobrazí prázdná stránka. Jak bych to mohl ošetřit?

Odpovědět 22.2.2014 14:55
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Ondřej Štorc
David Čápka:

Můžeš se podívat do nějaké vlastnosti FormView (je tma myslím nějaký datarow), jestli v ní jsou data a pokud ne, tak přesměrovat.

Odpovědět  +1 21.3.2014 17:21
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.