Lekce 7 - Úprava template MVC v ASP.NET

V minulé lekci, Zpracování dat a validace v ASP.NET MVC, jsme si vysvětlili zpracování dat z formuláře a validace.

Od dnešního C# .NET tutoriálu začneme pracovat na jednoduchém blogu s databází článků a administrací.

Založení projektu

Ve Visual Studio můžeme kromě prázdného projektu založit také projekt, ve kterém jsou již připraveny základní věci jako šablony, menu, styly, jQuery a podobně. Protože by nás tento projekt ze začátku spíše mátl, vycházeli jsme vždy z projektu prázdného. Nyní však již není důvod začínat na zelené louce, základním principům v ASP.NET již rozumíme a proto budeme chytří a využijeme připravené šablony.

Založte si novou ASP.NET Web Application s názvem AspBlog. U výběru template zvolíme MVC a způsob ověření bychom měli mít nastavený na Individual User Accounts.

Struktura ASP.NET MVC template

V Solution Exploreru vidíme poměrně komplikovanou strukturu projektu. Pojďme si ji alespoň zhruba popsat.

Ve složce Content se nachází statický (neměnný) obsah webu. Visual Studio nám dovnitř nakopírovalo tzv. bootstrap. To je CSS framework, se kterým přišel Twitter a který umožňuje velmi jednoduše stylovat stránky pomocí předpřipravených stylů. Dále zde máme soubor Site.css, který již styluje naši konkrétní stránku, tam budeme přidávat naše styly.

Další důležitou složkou pro nás bude Scripts, ta slouží pro JavaScriptové soubory. Opět zde máme již nakopírované základní skripty. Nalezneme zde populární JS framework jQuery, který ASP.NET používá zejména na validace. Dále zde máme Modernizr, který umožňuje používat HTML 5 i na starých prohlížečích.

Co se týče stránek, máme zde 2 kontrolery: HomeController s pohledy úvodní stránky, kontaktní stránky a about stránky. Dále zde máme AccountController, kde je předgenerovaná registrace a přihlašování uživatelů. V modelech máme vygenerovaných několik view-modelů pro přihlašování.

Když aplikaci spustíme, uvidíme, že toho máme již opravdu hotovo docela dost:

Je připravené navigační menu, registrační formuláře a podobně. Web je dokonce i responzivní. Ačkoli bychom si mohli web poměrně jednoduše přeskinovat pomocí hotového schéma, v praxi většinou dostanete hotový vzhled od kodéra/grafika a budete ho muset na tento projekt naroubovat. Právě tomu budeme věnovat zbytek dnešního dílu.

Mimochodem, jistě jste si všimli, že Microsoft v projektu používá poměrně hodně otevřených technologií a nepřichází s vlastními alternativami, což je asi dobře.

Úprava šablony

Pro šablonu nebudeme chodit daleko, ale vypůjčíme si ji ze seriálu Webové stránky krok za krokem. Nakódovaný web si stáhněte v posledním dílu (Nahrání webu na internet). Jedná se o jednoduchý statický web v HTML 5 a CSS 3. Pokud vám v jeho kódu není cokoli jasné, v seriálu je detailně popsána jeho tvorba.

Web si minimálně upravíme pro naše účely a to tak, že do navigačního menu místo "O mně" vložíme "Články". Můžete si i mírně upravit obsah a vzhled tak, aby se vám blog líbil. Já jsem to udělal následovně:

Obsah a vzhled nyní postupně přeneseme do našeho projektu v ASP.NET.

Kopírování souborů

V projektu si vytvořte novou složku Images a do ní nakopírujte obrázky ze složky obrazky v šabloně.

Přejdeme do souboru Site.css ve složce Content v ASP.NET projektu, kde vymažeme stylování body, zbytek ponecháme. Do souboru nyní přidáme ještě všechny styly ze souboru styl.css z HoBiho webu. V Site.css je nyní třeba přepsat cesty k obrázkům, např. řádek:

background: url('obrazky/pozadi_sede.png') #1c2228;

Upravíme na:

background: url('../Images/pozadi_sede.png') #1c2228;

Dvě tečky musíme uvést proto, že styl je ve složce Content a Images jsou o složku výše. Podobné řádky tam jsou asi 4, všechny si je upravte.

Úprava layoutu

Přesuneme se do Views/Shared/_La­yout.cshtml. Toto je tzv. layout stránky, který obsahuje základní HTML strukturu (hlavičku, menu, patičku). Dovnitř se renderuje aktivní View, tedy např. kontaktní stránka. Funkcionality je docíleno pomocí souboru _ViewStart.cshtml, kde je soubor s layoutem nastavený.

My si nyní _Layout.cshtml upravíme tak, aby vypadal jako index.html z HoBiho šablony. Budeme upravovat pouze část body. V ní smažeme div s navigačním menu a patičku.

Do body nyní vložíme obsah body z HoBiho šablony (ze souboru index.html). Na místo, kam se vkládá obsah, nesmíme zapomenout přemístit volání RenderBody(). Podobným způsobem vypíšeme i titulek do nadpisu h1 a odkazy do menu.

Body bude v layoutu nyní vypadat nějak takto:

<body>
    <header>
        <div id="logo"><h1>HoBi</h1></div>
        <nav>
            <ul>
                <li>@Html.ActionLink("Domů", "Index", "Home")</li>
                <li>@Html.ActionLink("Články", "Index", "Article")</li>
                <li>@Html.ActionLink("Dovednosti", "Skills", "Home")</li>
                <li>@Html.ActionLink("Reference", "References", "Home")</li>
                <li>@Html.ActionLink("Kontakt", "Contact", "Home")</li>
            </ul>
        </nav>
    </header>

    <article>
        <div id="centrovac">
            <header>
                <h1>@ViewBag.Title</h1>
            </header>

            <section>
                <div class="container body-content">
                    @RenderBody()
                </div>
            </section>
            <div class="cistic"></div>
        </div>
    </article>

    <footer>
        Vytvořil &copy;HoBi 2014 pro <a href="http://devbook.cz">DEVBOOK.CZ</a>
    </footer>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

Když aplikaci nyní spustíme, uvidíme, že se podstránky opravdu vkládají do naší šablony.

Úprava obsahových stránek

Nejprve se přesuneme do Home/Index.cshtml, kde odstraníme vše kromě nastavení titulku. Nyní sem přesuneme obsah elementu <section> z šablony. Nezapomeňte upravit cestu k obrázkům. Na prvním řádku u každé obsahové stránky upravíme její titulek. Index.cshtml vypadá asi takto:

<p>Jmenuji se Honza Bittner a toto je můj osobní blog. V současné době jsem zaměstnán jako HTML/JS developer webového studia. Mimo to působím jako redaktor na programátorské sociální síti Devbook.cz.</p>

<p class="centrovany"><img src="../Images/avatar.png" alt="Programátor HoBi" /></p>

<p>Blog je naprogramovaný v C# .NET s použitím webového frameworku ASP.NET MVC. Komunikuje s databází pomocí EntityFrameworku, ze které se tímto způsobem zobrazují články, což si můžete vyzkoušet v záložce články. Obsahuje také jednoduchou administraci s přihlašováním.</p>

<p>Blog vznikl jako ukázková práce k seriálu na programátorské síti <a href="http://www.devbook.cz">devbook.cz</a>, kde je také detailně popsaný postup k jeho vytvoření. Jedná se o rozšíření statického portfolia webdesignera HoBiho.</p>

Výsledek:

Podobně si upravte kontaktní stránku. Stránku About nebudeme potřebovat a proto její View odstraníme, stejně jako její metodu v HomeControlleru.

Naopak si přidejte 2 nové View do složky Home: References.cshtml a Skills.cshtml a opět jim vložte obsah z šablony. Články zatím neřešit nebudeme. HomeControlleru dodejte metody pro tyto pohledy:

public ActionResult Skills()
{
    return View();
}

public ActionResult References()
{
    return View();
}

Můžete si zkusit proklikat stránku pomocí navigačního menu, vše kromě článků by mělo fungovat.

Šablonu máme tedy připravenou.

V příští lekci, Scaffolding a Entity Framework v ASP.NET MVC, si zobrazíme články z databáze. Projekt je jako vždy v příloze ke stažení se zdrojovými kódy.

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