Akce! Dobij si body, napiš nám do zpráv "Přes léto se to naučím!" a dobijeme ti ještě navíc 50% z této částky! Sleva na výuku platí do 22.6.2018.

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

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

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Scaffolding a Entity Framework v ASP.NET MVC, jsme si představili scaffolding a entity framework. V dnešním C# .NET tutoriá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 :) V příští lekci, Migrace a uživatelské role v ASP.NET MVC, 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 515x (21.48 MB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
16 hlasů
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 sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Všechny články v sekci
Základy ASP.NET MVC
Aktivity (4)

 

 

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

Avatar
vajkuba1234
Člen
Avatar
vajkuba1234:31.8.2017 1:57

Jak vypada tvuj model? Mas tam povoleno HTML?

Odpovědět 31.8.2017 1:57
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
Pepan
Člen
Avatar
Pepan:31.8.2017 17:13

using System;
using System.Collec­tions.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Componen­tModel.DataAn­notations;
using System.Componen­tModel.DataAn­notations.Sche­ma;

namespace Ortodont.Models
{
public class About
{
public int Id { get; set; }
[AllowHtml]
public string Content { get; set; }
}
}

 
Odpovědět 31.8.2017 17:13
Avatar
vajkuba1234
Člen
Avatar
Odpovídá na Pepan
vajkuba1234:31.8.2017 18:03

Kod vkladej pomoci ikonky </>. Pouzivej tlacitko Odpovedet. Pridej screen, jak to presne u tebe vypada.

Odpovědět 31.8.2017 18:03
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
Pepan
Člen
Avatar
Pepan:31.8.2017 20:18

Prikladam screen

 
Odpovědět 31.8.2017 20:18
Avatar
vajkuba1234
Člen
Avatar
Odpovídá na Pepan
vajkuba1234:2.9.2017 16:08

Vazne je tak slozite pouzit tlacitko odpovedet? Pres tlacitko pro vlozeni zdrojoveho kodu sem hod view, kde toto vypisujes.

Odpovědět  +1 2.9.2017 16:08
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
Michal Znamenáček:5.9.2017 9:25

David Čápka Bude i díl ohledně ASP.net MVC a propojení s databází? :) Díky moc :-)

Odpovědět 5.9.2017 9:25
Kdo se umí smát sám sobě, má právo smát se všemu ostatnímu, co mu k smíchu připadá - Jan Werich
Avatar
vajkuba1234
Člen
Avatar
Odpovídá na Michal Znamenáček
vajkuba1234:6.9.2017 23:11

Uz tady prece je

Editováno 6.9.2017 23:11
Odpovědět  +1 6.9.2017 23:11
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
Odpovídá na vajkuba1234
Michal Znamenáček:6.9.2017 23:12

Jo díky za odpověď pohledal jsem a našel :-)

Odpovědět 6.9.2017 23:12
Kdo se umí smát sám sobě, má právo smát se všemu ostatnímu, co mu k smíchu připadá - Jan Werich
Avatar
cerny.mat.01
Redaktor
Avatar
Odpovídá na Pepan
cerny.mat.01:5. března 19:24

Ahoj, Vyřešil jsi to nějak? Mám stejný problém. Díky

 
Odpovědět 5. března 19:24
Avatar
vajkuba1234
Člen
Avatar
Odpovídá na cerny.mat.01
vajkuba1234:6. března 12:19

Precti si poradne tutorial. Na neco jsi zapomnel.

Odpovědět 6. března 12:19
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
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 28. Zobrazit vše