8. diel - Dokončenie editora článkov v ASP.NET

V minulej lekcii, Zobrazovanie a administrácia článkov v ASP.NET , sme si uviedli kontrolku FormView a načal administráciu článkov. Tú dnes v C# .NET tutoriálu dokončíme.

Odoslanie HTML na server

Do poľa s obsahom článku budeme sazmořejmě zadávať HTML tagy. Akonáhle sa však takto vyplnený editačný formulár pokúsime potvrdiť, narazíme na problém, ktorým je ochrana ASP.NET proti XSS útokom. ASP.NET v základnom nastavení odmietne akýkoľvek HTML kód, ktorý odošleme formulárom. Aby sme mohli odoslať HTML kód článku, musíme túto ochranu vypnúť, samozrejme len pre túto jednu podstránku s editorom.

Najprv musíme zmeniť validačný mód. Ak používate nejakú starú verziu .NET (<4.0), tak tento krok robiť nemusíte.

Prejdeme do súboru Web.config, kde nájdeme element httpRuntime, ktorému pridáme atribút requestValida­tionMode = "2.0". Ak tam element nie je, vytvorte ho s týmto atribútom v sekcii system.web. Môj element vyzerá takto:

<httpRuntime targetFramework="4.5" requestValidationMode="2.0" />

Teraz už budeme schopní validáciu vypnúť. To urobíme na prvom riadku v súbore Clanek.aspx, kde elementu Page pridáme atribút ValidateRequest = "false":

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

Keď teraz formulár s HTML odošlete, článok sa naozaj zeditujete. Skúste si to.

InsertItemTemplate

Zostáva už len upraviť šablónu FormView pre vkladanie nového záznamu. Tá bude veľmi podobná tej editačné. Vlastne bude úplne rovnaká, až na tlačidlá dole.

<InsertItemTemplate>
     <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="InsertButton" runat="server" CausesValidation="True" CommandName="Insert" Text="Insert" />
    &nbsp;<asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
</InsertItemTemplate>

Ideálne by sme si mohli vytvoriť UserComponent a ten použiť 2x, aby sme sa vyhli duplicitnému kódu, ale tým sa zatiaľ nebudeme zaťažovať.

Môžete si skúsiť pridať nový článok (otvorte si ktorýkoľvek existujúci a dole zvoľte odkaz New):

A následne sa pozrite do zoznamu článkov, či tam naozaj je:

A otvorte si ho:

Prípadne ho môžete ďalej zeditovať.

Validácia

Administračné sekcii chýba už len validácie. Tu máme prebranú a nemusíme sa s ňou teda nijako extra zaoberať, kód EditItemTemplate upravíme do nasledujúcej podoby:

<EditItemTemplate>
    <asp:ValidationSummary ID="ValidationSummary1" style="color: red;" runat="server" />
    <table>
        <tr>
            <td>Titulek</td>
            <td><asp:TextBox Width="500" ID="TitulekTextBox" runat="server" Text='<%# Bind("Titulek") %>' />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Musíte vyplnit titulek" ControlToValidate="TitulekTextBox" Text="*"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td>Url</td>
            <td>
                <asp:TextBox Width="500" ID="UrlTextBox" runat="server" Text='<%# Bind("Url") %>' />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Musíte vyplnit URL" Text="*" ControlToValidate="UrlTextBox"></asp:RequiredFieldValidator>
                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="URL nemá požadovaný formát" Text="*" ControlToValidate="UrlTextBox" ValidationExpression="^[a-z0-9\-]+$"></asp:RegularExpressionValidator>
            </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>

Titulok a URL sú teraz povinné polia. Do URL idú zapísať len malé písmená, čísla a pomlčky.

Rovnako upravíte aj InsertItemTemplate.

Skúsme si teraz zadať nejaké nezmyselné hodnoty:

Administráciu článkov máme teda hotovú, zostáva ju už len zabezpečiť prihlasovaním, ale tomu sa budeme venovať až nabudúce. Na koniec si ešte ukážme taký bonus.

FreeTextBox

Pretože editor článkov založený iba na textbox pre zadávanie HTML nie je príliš použiteľný, pridáme si do našej aplikácie WYSIWYG editor. WYSIWYG je skratka z What You See Is What You Get, teda "ako sa to zobrazuje, tak to bude vyzerať". ASP.NET v základe nič také nemá a preto použijeme kontrolku tretej strany, ktorá sa volá FreeTextBox.

Stiahnutie

Kontrolku stiahneme z webu http://www.freetextbox.com/. Po rozbalení vnútri nájdeme zložku framework-x, kde X je zodpovedajúca verzia vášho .NET frameworku. Ja som použil verziu 4. Dll z tejto zložky prekopíruje do zložky bin v našom projekte (musíte si projekt otvoriť v prieskumníkovi).

Pridanie referencie

V Solution Exploreri klikneme pravým tlačidlom na References a pridáme novú.

Pomocou tlačidla Browse ... vyberieme naše dll a potvrdíme.

Vloženie do stránky

Na druhý riadok v šablóne Clanek.aspx vložíme nasledujúci kód:

<%@ Register TagPrefix="FTB" Namespace="FreeTextBoxControls" Assembly="FreeTextBox" %>

Tým sme zaregistrovali nový menný priestor FTB.

Konečne v našich šablónach zameníme u obsahu asp: TextBox za FTB: FreeTextBox. Atribút Multiline odstránime.

Editor teraz vyzerá nasledovne:

A my môžeme konečne napísať nejaké poriadne články

Projekt je so zdrojovými kódmi v prílohe a ja sa s vami teším na budúci lekciu, Prihlasovanie užívateľov a role v ASP.NET .

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