Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

Nový článek v ASP.NET Web Forms - ASP.NET Web Forms - Webové aplikace v C#

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

Nový článek v ASP.NET Web Forms - ASP.NET Web Forms - Webové aplikace v C#

A otevřete si jej:

Nový článek v ASP.NET Web Forms - ASP.NET Web Forms - Webové aplikace v C#

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:

Validace v FormView v ASP.NET Web Forms - ASP.NET Web Forms - Webové aplikace v C#

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.

Přidání reference v ASP.NET - ASP.NET Web Forms - Webové aplikace v C#

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

Přidání reference v ASP.NET - ASP.NET Web Forms - Webové aplikace v C#

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

FreeTextBox je WYSIWYG editor pro ASP.NET Web Forms - ASP.NET Web Forms - Webové aplikace v C#

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

Článek napsaný v WYSIWYG editoru v ASP.NET - ASP.NET Web Forms - Webové aplikace v C#

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

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

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

 

Předchozí článek
Zobrazování a administrace článků v ASP.NET
Všechny články v sekci
ASP.NET Web Forms - Webové aplikace v C#
Přeskočit článek
(nedoporučujeme)
Přihlašování uživatelů a role v ASP.NET
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
11 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity