7. díl - Úprava administrace článků a editor v ASP.NET MVC

C# .NET ASP.NET MVC Úprava administrace článků a editor v ASP.NET MVC

V minulém dílu našeho seriálu tutoriálů o tvorbě webových aplikací v ASP.NET MVC jsme si představili scaffolding a entity framework. V dnešním dílu upravíme vygenerovanou administraci článků a přidáme jejich editor.

Úprava šablon

Nejprve upravíme jednotlivé cshtml šablony.

Index.cshtml

Pohled Index zobrazuje v tabulce seznam článků na blogu. Nastavíme zde titulek, odmažeme hlavičkový řádek a pro tabulku použijeme nějaké ID a CSS styl.

@model IEnumerable<AspBlog.Models.Article>

@{
    ViewBag.Title = "Seznam článků";
}

<p>
    @Html.ActionLink("Vytvořit nový", "Create")
</p>
<table id="clanky">

    @foreach (var item in Model)
    {
        <tr>
            <td>
                <h2>@Html.ActionLink(item.Title, "Details", new { id = item.Id })</h2>
                <p>@Html.DisplayFor(modelItem => item.Description)</p>
                <p>
                    @Html.ActionLink("Editovat", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Odstranit", "Delete", new { id = item.Id })
                </p>
            </td>
        </tr>
    }

</table>

Nejprve si definujeme, že modelem pohledu je článek a nastavíme titulek stránky pro layout. Třídu Html již dobře známe, je to tzv. helper, který nám pomáhá generovat Html kód. Metoda ActionLink() vygeneruje HTML odkaz (<a href="...">), v našem případě odkaz s titulkem článku, který směřuje na akci Details.

Metoda DisplayFor() nám umožňuje vypsat vlastnost nějakého objektu podle jejího typu. Mohli bychom samozřejmě místo @Html.Display­For(modelItem => item.Description) napsat jen @item.Description. Výhodou DisplayFor() je, že u některých typů umí před vypsáním provést nějaké formátování, např. u dat (datumů).

Odkazy na editaci a odstranění článku později vložíme ještě do podmínky zda je přihlášený administrátor, stejně tak ošetříme i odkaz pro vytvoření nového článku.

Výsledek:

Seznam článků v ASP.NET MVC

Details

Details je samotný výpis jednoho článku, který ořežeme do následující podoby:

@model AspBlog.Models.Article

@{
    ViewBag.Title = Model.Title;
}

@Html.Raw(Model.Content)

Metoda Raw() nám umožní vypsat obsah vlastnosti přesně tak, jak je. Neprovádí se převod na HTML entity a tím pádem je možné vkládat HTML kód. To může být v mnoha situacích nebezpečné, zde je to však nutné, protože text článku obsahuje HTML značky kvůli formátování textu. Bez Raw() by se HTML kód vypsat jako prostý text.

Výsledek:

Výpis článku z databáze v ASP.NET MVC

Delete

Mazací šablonu také zjednodušíme na minimum:

@model AspBlog.Models.Article

@{
    ViewBag.Title = "Odstranění článku";
}

<h3>Opravdu chcete vymazat článek @Model.Title?</h3>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()

    <div class="form-actions no-color centrovany">
        <input type="submit" value="Odstranit" class="btn btn-default" />
    </div>
}

Výsledek:

Odstranění článku z databáze v ASP.NET MVC

Create a Edit

Tyto pohledy budou zajímavější, jelikož se zde bude vyskytovat editor článků. Budeme používat WYSIWYG editor TinyMCE. Obskurní název WYSIWYG je zkratka z What You See Is What You Get, tedy "Jak to vypadá v editoru, tak to bude vypadat i na webu". Na stejném principu funguje např. MS Word, jak to naklikáme, tak to bude vypadat na papíře.

WYSIWYG editor vypadá opravdu pěkně a aplikace s ním se dobře prodává. S HTML kódem, který editor na pozadí generuje, je to o dost horší a proto mám raději spíše WYSIWYM editor, který používají weby jako např. Wikipedie. Zájemcům doporučím třeba MarkDown. Nicméně WYSIWYG je mainstream a měli byste ho minimálně vyzkoušet.

Ukažme si kompletní kód pohledu, který si záhy popíšeme:

@model AspBlog.Models.Article

@{
    ViewBag.Title = "Nový článek";
}

@section Scripts
{
    <script src="@Url.Content("//tinymce.cachefly.net/4.0/tinymce.min.js")"></script>
    <script src="@Url.Content("~/Scripts/initTinyMCE.js")"></script>
}

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.Label("Titulek", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Title, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Title)
            </div>
        </div>

        <div class="form-group">
            @Html.Label("Popisek", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.Description, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Description)
            </div>
        </div>

        <div class="form-group">
            @Html.TextAreaFor(model => model.Content)
            @Html.ValidationMessageFor(model => model.Content)
        </div>

        <div class="form-group">
            <div class="centrovany">
                <input type="submit" value="Vytvořit" class="btn btn-default" />
            </div>
        </div>
    </div>
}

V pohledu je potřeba načíst zmíněný editor TinyMCE, který je samozřejmě napsaný v JavaScriptu. ASP.NET MVC vkládá JavaScriptové soubory těsně před konec elementu body a toto vložení tedy naleznete v layoutu. My ale chceme editor načítat jen u pohledu Create a ne v layoutu, který je společný pro všechny podstránky. Proto zde definujeme sekci Scripts a do ní vložíme skripty specifické pro tento pohled. Jsou celkem dva, první odkazuje na online úložiště, kde se nachází TinyMCE, nemusíme jej tedy ani stahovat. Druhý skript obsahuje kód pro inicializaci TinyMCE a ve vaší aplikaci zatím přítomný není. Proto si do složky Scripts v Solution Exploreru přidejte nový s názvem initTinyMCE.

Inicializace WYSIWYG editoru TinyMCE v ASP.NET MVC

Do skriptu vložíme následující kód:

tinymce.init({
    selector: "textarea[id*=Content]",
    entities: "160,nbsp",
    entity_encoding: "named",
    entity_encoding: "raw",
});

Voláme TinyMCE, kterému předáváme nastavení. Selektorem označíme elementy na stránce, které mají fungovat jako editor. V našem případě je to textarea s id Content. Pro určení id jsme použili selektor *=, což umožňuje mít před Id ještě nějaký prefix. Entities nastavuje jaké znaky se mají převádět na HTML entity, další nastavení zapne převod pouze vyjmenovaných znaků na HTML entity. Důvodem tohoto nastavení je, že TinyMCE jinak převádí na entity české diakritické znaky, což je poměrně nepříjemné.

Vraťme se zpět k pohledu Create. Jelikož ASP.NET neví, která pole představují krátký a která dlouhý text, vynutíme si příslušný editor pomocí funkcí TextAreaFor() a TextBoxFor(). Titulek budeme zadávat jen v TextBoxu, naopak článek budeme psát v TextArea. Zbytek je jen nějaké CSS a měl by být jasný.

Výsledek je působivý:

TinyMCE WYSIWYG editor v ASP.NET MVC

Podobně jako Create si upravte i pohled Edit. Odeslat formulář s editorem vám v tuto chvíli nepůjde kvůli ochraně ASP.NET proti XSS útoku. Aby se mohl do nějaké vlastnosti modelu vložit HTML kód, musíme ji explicitně označit atributem [AllowHtml]. Upravme tedy náš model:

public class Article
{
        public int Id { get; set; }
        [AllowHtml]
        public string Content { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
}

Nyní můžete opravdu napsat svůj první příspěvek na svůj první blog :) Příště přidáme validaci a zpřístupníme administraci pouze administrátorům. Dnešní projekt je ke stažení níže.


 

Stáhnout

Staženo 382x (21.48 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 (9 hlasů) :
55555


 


Miniatura
Všechny články v sekci
Základy ASP.NET MVC

 

 

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

Avatar
BlugW
Redaktor
Avatar
BlugW:

Napr. http://programujte.com/
Pulka věcí od co tam vysvětluje mi ani v VS 13 nefungovala.
Někdy tam nejsou ani náhledy.

Editováno 15.3.2014 14:01
Odpovědět 15.3.2014 13:58
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
fidko.tomas
Člen
Avatar
Odpovídá na BlugW
fidko.tomas:

Tam je ale tutorial len k MVC 1, alebo 2, nie ? Okrem toho je to len prepis jednej kapitoly istej knihy. Osobne sa MVC ucim z knihy Pro ASP.NET MVC 4, ale nie vzdy som schopny vsetko do detailu v AJ pochopit :/

 
Odpovědět 15.3.2014 14:03
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na BlugW
Jan Vargovský:

Divíš se, když je tam ten seriál přes 5 let starý? Ta technologie se vyvíjí a už jsi u MVC 5 a tam je ještě MVC 1. Pak se nediv, že ti to nefunguje.

 
Odpovědět 15.3.2014 14:04
Avatar
BlugW
Redaktor
Avatar
Odpovídá na Jan Vargovský
BlugW:

Nikde jinde jsem v CZ nic dobrého nenašel, kromě na devbooku.

Odpovědět 15.3.2014 14:31
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na BlugW
Jan Vargovský:

Jsi programátor, na češtinu si nezvykej :)

 
Odpovědět  +5 15.3.2014 14:37
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Jan Vargovský
David Čápka:

Devadesátá léta jsou pryč, není důvod, proč by nemohl najít aktuální informace v češtině. Sice si musí umět vygooglit konkrétní problém na stacku, ale učit se kompletně framework z angličtiny je přežitek.

Odpovědět  +2 15.3.2014 16:23
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
vajkuba1234
Člen
Avatar
vajkuba1234:

Ahoj, zajímalo by mě, jakým způsobem mohu do článku přidat obrázek. Lze to vyřešit přes nějaký plugin do editoru (jak?) či se musí zasáhnout do samotné aplikace (jak?). Děkuji za odpověď. :)

Odpovědět 3.4.2014 1:10
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
vajkuba1234
Člen
Avatar
vajkuba1234:

Ahoj David Čápka, věděl by sis, prosím, rady s mým dotazem, který je položen hned před tímto? Děkuji

Odpovědět 3.4.2014 20:36
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
Andrej Farkaš:

Taká haluz..skúsil som pridal k článku property Created, ale tú som nemenil pri Edite, keď som dal save, tak tam bol DateTime.MinValue. Ako zabezpečiť, aby tam bola tá hodnota, ktorá sa načíta z databázy?

Odpovědět 24.4.2014 19:28
Live. Love. Learn.
Avatar
svizensky
Člen
Avatar
svizensky:

TIP: Jak nastavit pro TinyMCE češtinu:

1.
Z URL: http://www.tinymce.com/i18n/index.php si stáhněte file CS.JS
2.
Ten (cs.js) pak přidejte do projektu [záložka Scripts] - Samozřejmě i na příslušné místo na disku
3.
přidejte si do Views (Edit,Create) řádek:
<script src="@Url.Con­tent("~/Scrip­ts/cs.js")"></scr­ipt>
4.
Spusťte a budete editovat CONTENT v českém prostředí.

(Přidávám i ten cs.js file)....

 
Odpovědět  +2 12.6.2014 13:17
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 16. Zobrazit vše