Lekce 8 - Dokončení editoru článků v ASP.NET

V minulé lekci, Zobrazování a administrace článků v ASP.NET, jsme si uvedli kontrolku FormView a načali administraci článků.

Tu dnes v C# .NET tutoriálu dokončíme.

Odeslání HTML na server

Do pole s obsahem článku budeme sazmořejmě zadávat HTML tagy. Jakmile se však takto vyplněný editační formulář pokusíme potvrdit, narazíme na problém, kterým je ochrana ASP.NET proti XSS útokům. ASP.NET v základním nastavení zamítne jakýkoli HTML kód, který odešleme formulářem. Abychom mohli odeslat HTML kód článku, musíme tuto ochranu vypnout, samozřejmě jen pro tuto jednu podstránku s editorem.

Nejprve musíme změnit validační mód. Pokud používáte nějakou starou verzi .NETu (< 4.0), tak tento krok dělat nemusíte.

Přejdeme do souboru Web.config, kde najdeme element httpRuntime, kterému přidáme atribut requestValida­tionMode="2.0". Pokud tam element není, vytvořte ho s tímto atributem v sekci system.web. Můj element vypadá takto:

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

Nyní již budeme schopni validaci vypnout. To uděláme na prvním řádku v souboru Clanek.aspx, kde elementu Page přidáme atribut ValidateReques­t="false":

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

Když nyní formulář s HTML odešlete, článek se opravdu zedituje. Zkuste si to.

InsertItemTemplate

Zbývá již jen upravit šablonu FormView pro vkládání nového záznamu. Ta bude velmi podobná té editační. Vlastně bude úplně stejná, až na tlačítka 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álně bychom si mohli vytvořit UserComponent a ten použít 2x, abychom se vyhnuli duplicitnímu kódu, ale tím se zatím nebudeme zatěžovat.

Můžete si zkusit přidat nový článek (otevřete si kterýkoli existující a dole zvolte odkaz New):

A následně se podívejte do seznamu článků, zda tam opravdu je:

A otevřete si jej:

Případně ho můžete dále zeditovat.

Validace

Administrační sekci chybí již jen validace. Tu máme probranou a nemusíme se s ní tedy nijak extra zaobírat, kód EditItemTemplate upravíme do následující 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>

Titulek a URL jsou nyní povinná pole. Do URL jdou zapsat jen malá písmena, čísla a pomlčky.

Stejně upravíte i InsertItemTemplate.

Zkusme si nyní zadat nějaké nesmyslné hodnoty:

Administraci článků máme tedy hotovou, zbývá ji již jen zabezpečit přihlašováním, ale tomu se budeme věnovat až příště. Na konec si ještě ukažme takový bonus.

FreeTextBox

Protože editor článků založený pouze na TextBoxu pro zadávání HTML není příliš použitelný, přidáme si do naší aplikace WYSIWYG editor. WYSIWYG je zkratka z What You See Is What You Get, tedy "jak se to zobrazuje, tak to bude vypadat". ASP.NET v základu nic takového nemá a proto použijeme kontrolku třetí strany, která se jmenuje FreeTextBox.

Stažení

Kontrolku stáhneme z webu http://www.freetextbox.com/. Po rozbalení uvnitř nalezneme složku framework-x, kde X je odpovídající verze vašeho .NET frameworku. Já jsem použil verzi 4. Dll z této složky překopírujeme do složky bin v našem projektu (musíte si projekt otevřít v průzkumníku).

Přidání reference

V Solution Exploreru klikneme pravým tlačítkem na References a přidáme novou.

Pomocí tlačítka Browse... vybereme naše dll a potvrdíme.

Vložení do stránky

Na druhý řádek v šabloně Clanek.aspx vložíme následující kód:

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

Tím jsme zaregistrovali nový jmenný prostor FTB.

Konečně v našich šablonách zaměníme u obsahu asp:TextBox za FTB:FreeTextBox. Atribut MultiLine odstraníme.

Editor nyní vypadá následovně:

A my můžeme konečně napsat nějaké pořádné články

Projekt je se zdrojovými kódy v příloze a já se s vámi těším na příští lekci, Přihlašování uživatelů a role v ASP.NET.

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