.NET Anketa – 4.část

V poslední části našeho povídání o anketě ve Visual Basic .NET dokončíme část pro administraci této komponenty.

Dnes nás čeká úvod do komponenty Repeater. Zbývá také implementace funkcí pro přidání, editaci a mazání anket a jednotlivých otázek. Grafická část je už v podstatě hotová. Vysvětlíme si lépe HTML kód uvedený na konci minulého dílu, jehož výklad jsem trochu ošidil.

CodeBehind

Před tím, než začneme se samotnými příklady, zabředneme trošičku do teorie. ASP.NET totiž umožňuje ještě jeden způsob vytváření stránek, které úplně separují logickou část stránky (kód VB) a HTML šablonu. Kód je umístněn v samostatném souboru a implementuje novou třídu, která dědí ze třídy System.Web.UI.Page. Šablona zůstává i nadále v ASPX souboru, neobsahuje už ale žádné server-side skripty. Náš soubor s kódem můžeme přeložit pomocí Visual Studia .NET, nebo pomocí příkazové řádky pokud máte .NET Framework:

vbc.exe mujkod.vb /target:library /r:System.Web.dll /r:System.dll

Pokud váš program využívá i jiné knihovny, specifikujete je pomocí přepínače /r . Více informací o programech a utilitách .NET Frameworku naleznete v prvním dílu tohoto seriálu o .NET.

Jedna knihovna může obsahovat více tříd, to znamená, že v jedné dll může být kód pro celou aplikaci obsahující libovolný počet stránek.

Jak propojíme ASPX šablonu s našim kódem? Velice jednoduše pomocí direktivy @Page:

<%@ Page Language="vb" Codebehind="WebForm1.aspx.vb" Inherits="mojePagetrida"%>

Naší dll knihovnu umístníme do podadresáře bin\ virtuálního adresáře aplikace. ASP.NET nahraje automaticky všechny knihovny v tomto adresáři pro použití v aplikaci.

CodeBehind je výborný z důvodu úplné separace kódu od šablony do dvou samostatných souborů. V praxi například umožňuje vašemu designérovi pracovat na šabloně, zatímco programátor vytváří kód aplikace. Umožňuje to také dodávat zákazníkovi zkompilované dll bez přístupu ke zdrojovému kódu aplikace. Nevýhodou je, že je nutné kód po každé změně manuálně přeložit do dll knihovny. ASP.NET kompiluje automaticky jenom kód uložený v ASPX souboru. Abychom si CodeBehind lépe procvičili, budou dnešní ukázky využívat tohoto konceptu.

Repeater

Začněme tedy komponentou Repeater. Ta slouží podobně jako DataGrid k zobrazení dat z datového zdroje. Repeater nám ale na rozdíl od DataGridu umožňuje mnohem větší volnost ve vzhledu výsledného zobrazení. Na příkladu se to vždy pochopí nejrychleji, zkusme tedy jednoduchý Repeater. V příkladech budu opět používat třídu DBLayer, stejně jak v minulém dílu, abychom se mohli plně soustředit na problém Repeateru:

 

Klepněte pro větší obrázek
ukázat příklad

V příkladu je vidět zjednodušená syntaxe Repeateru. Pomocí značky <ItemTemplate> vytvoříme šablonu, která může obsahovat libovolné HTML a další komponenty. Tato šablona je pak zobrazena pro každý záznam v datovém zdroji.

V Repeateru je možné podobně jako u DataGridu vyvolávat události u jednotlivých položek a "probublávat" je ven přes událost ItemCommand. Jak na to jsme si ukázali v jednom z předchozích dílů.

Pokračujme tedy samotným výkladem administrační části.

Prohlížení vs. Editace

Poté, co uživatel vybere cílovou anketu v DataGridu Topics (levá tabulka obsahující seznam všech anket), vykreslíme v pravé části detailní informace o dané anketě. HTML kód pro tuto část vypadá tedy:

<asp:label id=TopicName runat="server" Visible="<%#Not(ModeEdit) %>"/>
<asp:textbox CssClass="formTitle" id=TopicNameInput runat="server" Visible="<%#ModeEdit %>"/>
<asp:label id=TopicDescription runat="server" Visible="<%#Not(ModeEdit) %>"/>
<asp:textbox CssClass="formSubtitle" id=TopicDescriptionInput runat="server" Visible="<%#ModeEdit %>"/>

<asp:repeater id=PollControl runat="server">
<ItemTemplate>
  <input type=hidden id="POLLquestionID" value=`<%# DataBinder.Eval(Container.DataItem, "ID") %>` runat=server/>
  <asp:Label Runat=server CssClass="elementText" Text=`<%#(DataBinder.Eval(Container.DataItem, "Question")) %>` Visible="<%#not(ModeEdit)%>"/>
  <asp:TextBox CssClass="formText" ID=QuestionInput Text=`<%#DataBinder.Eval(Container.DataItem, "Question")  %>` Runat=server Visible="<%#ModeEdit%>"/>
  <asp:Image id=ImageButton1 runat="server" ImageUrl="img/bar.gif" Width=`<%# WebControls.Unit.Parse(2*Cint(DataBinder.Eval(Container.DataItem, "Hits"))) %>` Height="8px"/>

  <asp:Image id="ImageButton2" runat="server" ImageUrl="img/bar_end.gif" Width="5px" Height="8px" />
  <asp:Label CssClass="elementText" id="Linkbutton2" Runat="server" Text=`<%#(DataBinder.Eval(Container.DataItem, "Hits")&"%")%>`/>
valign="middle" align="right">
  <asp:ImageButton ImageUrl="img/delete.gif" AlternateText="Smazat odpověď" CommandName="Delete" ID="DeleteQuestionButton" Visible="<%#Not(ModeEdit)%>" Runat=server />
</ItemTemplate>
</asp:repeater>

<asp:linkbutton id=NewQuestionButton Visible="<%#Not(ModeEdit)%>" CssClass="elementLink" Text="Přidat odpověď" Runat="server"/>

Celkove hlasovalo <B><asp:label id=TotalVotes Runat="server"/></B>lidí

Formátovací HTML značky (Table,TR,TD) jsem pro jednoduchost vynechal, kompletní zdrojový kód si můžete stáhnout.

Můžete si všimnout, že políčka jako název ankety a její popis jsou vlastně zobrazena dvakrát. Na stránce máme totiž 2 módy - prohlížecí a editovací.

Jaký je aktuální mód, to určuje lokální proměnná EditMode, která nabývá hodnot true a false. V prohlížecím módu se zobrazí pouze nápisy (Label), v editovací zase jenom TextBox (Label zůstane skryt pomocí vlastnosti Visible=false):

<asp:label id=TopicName runat="server" Visible="<%#Not(ModeEdit) %>"/>
<asp:textbox CssClass="formTitle" id=TopicNameInput runat="server" Visible="<%#ModeEdit %>"/>

Tímto docílíme jednoduchého přepínání mezi prohlížecím a editovacím módem například pomocí funkce EditButton_Click, která je spuštěna při zmáčknutí tlačítka Upravit:

Sub EditButton_Click(sender As System.Object, e As System.EventArgs) Handles EditButton.Click
  ModeEdit = True
  FillPoll()
End Sub

Funkce FillPoll nedělá nic více, než že připraví datový zdroj a zavolá funkci DataBind() pro anketu zobrazenou v levé části.

Přidávání a mazání jednotlivých otázek

Přidávání otázek je zajištěno tlačítkem NewQuestionButton, které je typu LinkButton. LinkButton funguje stejně jako normální tlačítko, je ale zobrazeno pomocí hyperlinku. Po kliknutí na tlačítko se vyvolá funkce:

Sub NewQuestionButton_Click(sender As System.Object, e As System.EventArgs) Handles NewQuestionButton.Click
  ExecuteSQLNonQuery("INSERT INTO POLLQuestion(Question,POLLtopicID) VALUES (`Další odpovi ...`," & GetTopicID() & ");")
  ModeEdit = False
  FillPoll()
End Sub

Ta vloží do databáze odpovídající otázku a nastaví prohlížecí mód.

Mazání je jenom o trochu složitější. Musíme totiž zjistit ID otázky, kterou chceme smazat.

Sub PollControl_ItemCommand(sender As Object,e As RepeaterCommandEventArgs) Handles PollControl.ItemCommand

  Dim QuestionIDhidden As HtmlInputHidden
  QuestionIDhidden = CType(e.Item.FindControl("POLLquestionID"), HtmlInputHidden)
  If e.CommandName = "Delete" Then
    ExecuteSQLNonQuery("DELETE FROM POLLhit WHERE POLLquestionID=" & QuestionIDhidden.Value & ";")
    ExecuteSQLNonQuery("DELETE FROM POLLquestion WHERE ID=" & QuestionIDhidden.Value & ";")
  End If
  ModeEdit = False
  FillPoll()
End Sub

Repeater předá této funkci v parametru e mimo jiné i záznam, který událost vyvolal:

e.Item

V tomto záznamu nám stačí vyhledat objekt POLLquestionID pomocí fukce FindControl. Ten je, jak můžete vidět z HTML kódu skrytý(hidden) input obsahující ID aktuální otázky. Po přetypování na typ HtmlInputHidden můžeme pomocí vlastnosti Value získat dané ID. Poté už velice jednoduše smažeme otázku a vyčistíme databázi také od hlasů dané této otázce:

QuestionIDhidden.Value

ASP.NET definuje pro většinu HTML tagů typy jako například HtmlInputHidden, které nám umožňují velice lehce manipulovat na straně serveru s vlastnostmi těchto objektů. Musíme do HTML definice pouze přidat parametr runat=server, podle které ASP.NET zjistí, že má pro daný tag vytvořit odpovídající objekt s názvem shodným s ID tagu.

Editace

Ukázali jsme si již, jak se formulář přepne do editovacího režimu - to znamená, že se místo nápisů (Label) zobrazí textová políčka (TextBox) umožňující změnu údajů. Nyní nám zbývá vytvořit funkce, které zajistí uložení změněných údajů do databáze:

Sub SaveButton_Click(sender As System.Object, e As System.EventArgs) Handles SaveButton.Click

  `nejdříve uložme název(Name) a popis (Description) z formuláře. TextBoxy TopicNameInput a TopicDescriptionInput

  ExecuteSQLNonQuery("UPDATE POLLtopic SET Name=`" & TopicNameInput.Text & "`,Description=`" & TopicDescriptionInput.Text & "` WHERE ID=" & GetTopicID() & ";")

  Dim row As RepeaterItem
  Dim QuestionInput As TextBox
  Dim QuestionIDhidden As HtmlInputHidden

  `nyní uložíme změny ve všech otázkách

  For Each row In PollControl.Items
    QuestionInput = CType(row.FindControl("QuestionInput"), TextBox)
    QuestionIDhidden = CType(row.FindControl("POLLquestionID"), HtmlInputHidden)
    ExecuteSQLNonQuery("UPDATE POLLquestion SET Question=`" & QuestionInput.Text & "` WHERE ID= " & QuestionIDhidden.Value & ";")
  Next

  ModeEdit = False
  FillTopics()
  FillPoll()
End Sub

Samotná funkce se skládá ze dvou logických částí - v první uložíme nadpis a popis do tabulky POLLtopic. Poté procházíme celý Repeater po záznamech (Items) a z každého vyhledáme ID aktuální otázky a samotný text otázky, které následně uložíme do databáze. Nakonec znovu obnovíme data z databáze a nastavíme prohlížecí mód. Musíme znovu načíst i data do DataGridu Topics v levé části, protože uživatel mohl změnit název ankety.

Podobná funkce je i pro smazání celé ankety, podrobněji ji zde ale rozebírat nebudu, myšlenka je stejná a provedení také velice podobné.

Zobrazení ankety

Jak tedy vypadá použití celé komponenty i s administračním modulem v praxi? Pomocí administračního systému vytvoříme ankety, které budeme chtít použít na našich stránkách. Do nich pak vložíme komponentu PollControl, a zadáme parametr TopicID, který určuje anketu pro zobrazení na stránce:

<zive:PollControl runat="server" TopicID=1/>

Závěr

Výsledný kód obsahující jak komponentu Ankety, tak i administrační systém, si můžete stáhnout zde. Co zbývá udělat pro reálné nasazení naší komponenty do živého systému:

  • Odstranit možné chyby a nedostatky
  • Optimalizovat kód
  • Vylepšit dokumentaci

Proto bych čtenáře chtěl pobídnout ke stažení zdrojových souborů, a jeho vyzkoušení. Já sám budu na komponentě dále pracovat, někdy v budoucnu se ještě setkáme a doplníme všechny chybějící střípky, tak aby byla jednoduše použitelná pro kohokoliv, kdo se rozhodne mít modul ankety na svých stránkách.

Příště začneme dělat na komponentě zobrazující články. Ta by měla umožňovat více uživatelských rolí a odpovídajících přístupových práv.

Diskuze (6) Další článek: MandrakeLinux 8.1 na 1CD

Témata článku: Software, Programování, Ankety, Nota, Jednotlivá značka, Label, Celá knihovna, Hidden, Hits, Výsledné zobrazení, Podobný objekt, Code, Jednoduché přepínání, Výsledné dílo, Anketa, Repeater


Určitě si přečtěte

26 užitečných rozšíření pro Chrome: Naučte prohlížeč nové věci

26 užitečných rozšíření pro Chrome: Naučte prohlížeč nové věci

** Prohlížeč Chrome obsahuje širokou škálu funkcí, neumí ale všechno ** Jeho schopnosti můžete rozšířit pomocí rozšíření ** Vybrali jsme pro vás zajímavé a užitečné doplňky

Karel Kilián | 47

Karel Kilián
Doplňky do prohlížečeChromeProhlížeče
Cableporn: Podívejte se na úžasná díla umělců z podnikových serveroven

Cableporn: Podívejte se na úžasná díla umělců z podnikových serveroven

** Uspořádání kabelů můžete vnímat i jako podivný druh umění ** To nejkrásnější se skrývá v datacentrech a serverovnách ** Podívejte se na skutečné „cableporn“ z optiky i kroucené dvojlinky

Vojtěch Malý | 53

Vojtěch Malý
DatacentraServery
Jak se šíří Covid v Česku: Čerstvá data, semafor PES, mapy okresů a obcí. Každý den aktualizované grafy

Jak se šíří Covid v Česku: Čerstvá data, semafor PES, mapy okresů a obcí. Každý den aktualizované grafy

** Vývoj COVID-19 v Česku: nakažení, úmrtí, testovaní, hospitalizovaní ** Mapa podle okresů, přehled podle věku, situace v Evropě i ve světě ** Každý den aktualizované grafy a mapy

Marek Lutonský | 172

Marek Lutonský
COVID-19Koronavirus
Čekali jsme skoro šest let. Android Auto jede do Česka i na Slovensko
Lukáš Václavík
Android AutoNavigaceGoogle
Nejlepší notebooky do 10 000 korun: Co má ještě smysl kupovat. A co ne?

Nejlepší notebooky do 10 000 korun: Co má ještě smysl kupovat. A co ne?

** Notebooky s cenou do deseti tisíc korun jsou plné kompromisů ** Existuje několik modelů dobře použitelných pro nenáročné použití ** Vhodnou alternativou jsou tablety nebo repasované počítače

David Polesný | 94

David Polesný
Jak vybrat notebookNotebooky

Aktuální číslo časopisu Computer

Megatest rychlých Wi-Fi 6 routerů

Jak ztišit počítač

Velký test mATX skříní