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

C# .NET ASP.NET Web Forms Dokončení editoru č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 uvedli kontrolku FormView a načali administraci článků. Tu dnes 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

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

Nový článek v ASP.NET Web Forms

A otevřete si jej:

Nový článek v ASP.NET Web Forms

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

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

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

Přidání reference v ASP.NET

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

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

Článek napsaný v WYSIWYG editoru v ASP.NET

Projekt je se zdrojovými kódy v příloze a já se s vámi těším na příště.


 

Stáhnout

Staženo 229x (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 (4 hlasů) :
4444 4


 


Miniatura
Všechny články v sekci
ASP.NET Web Forms

 

 

Komentáře
Zobrazit starší komentáře (2)

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Pokud jsi tutoriály četl, tak bys měl vědět, že přesně to je v plánu pro další díly, psal jsem to tam.

Editováno 10.2.2014 16:20
Odpovědět 10.2.2014 16:20
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Tommy
Člen
Avatar
Tommy:

Niektoré veci som preskakoval, lebo som ich vedel. Asi tam to bolo schované.

Ale ďakujem za odpoveď.

 
Odpovědět 10.2.2014 16:22
Avatar
lastp
Redaktor
Avatar
lastp:

V žádném případě nepoužívejte FreeTextBox. Jeho vývoj byl ukončen v roce 2010 a obsahuje spoustu chyb, které už nikdy nebudou opraveny. Hlavní problém je, že FreeTextBox nefunguje v aktuální verzi Internet Exploreru. Kromě toho generuje příšerné HTML (například používá element FONT).

 
Odpovědět 15.2.2014 12:11
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na lastp
David Čápka:

Že je vývoj ukončený vím, v Exploreru toho nefunguje hodně, to bychom nemohli používat nic :P Máš nějakou lepší alternativu?

Odpovědět 18.2.2014 14:13
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Odpovídá na David Čápka
Michal Žůrek (misaz):

byl by zajímavý seriál o tvorbě takového doplňku. Možná někdy v budoucnu (čti: za minimálně půl roku) bych mohl něco sepsat i já, už jsem toho ale nasliboval moc...

Odpovědět  +1 18.2.2014 14:33
Nesnáším {}, proto se jim vyhýbám.
Avatar
lastp
Redaktor
Avatar
lastp:

Na editaci článků bych doporučil buď TinyMCE nebo CKEditor. Oba dva jsou open source, fungují ve všech prohlížečích a mají docela dost funkcí.

Editováno 19.2.2014 0:48
 
Odpovědět 19.2.2014 0:47
Avatar
mkub
Redaktor
Avatar
mkub:

ASP.NET je na rozdiel od PHP zalezitost predovsetkym Windows platformy, vlastne IIS, ako aj jeho jednoduhsia varianta MS Personal Web Server nativne pouziva jazyk ASP, cize pre Windows je ASP idealne riesenie

 
Odpovědět 19.2.2014 3:35
Avatar
gigi_l
Člen
Avatar
gigi_l:

Muzu se zeptat, pokud pouziji tedy jinou alternativu FreeTextBoxu, treba TinyMCE, jakym zpusobem se zde pouziva vkladani obrazku do clanku ? Musi se pro to pouzit nejaka dalsi komponenta, ktera mi zprostredkuje upload nekam na server, nebo se TinyMCE sama o vse postara?

Dekuji :-)

 
Odpovědět 19.2.2015 8:05
Avatar
Odpovídá na gigi_l
Michal Štěpánek:

Nejsem si jistý, ale myslím si že editor sám asi upload obrázku neprovede. Na to je třeba použít komponentu FileUpload...

Odpovědět 19.2.2015 9:34
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Petr Stastny
Redaktor
Avatar
Petr Stastny:

Ahoj, chtěl bych si na své stránky dát TinyMCE, ale potřebuji, aby fungoval jenom někde.

Všiml jsem si, že funguje taky u

<asp:TextBox TextMode="Multiline" ...>

tedy u ASPčkových textboxů s TextMode=Multiline.

Každopádně jsem prolezl stránky TinyMCE a objevil jsem několik scriptů, které by měly buď TinyMCE skrývat, nebo zobrazovat. Žádný nefungoval.

Neví někdo, co s tím?

 
Odpovědět 7. září 19:49
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 10 zpráv z 12. Zobrazit vše