5. diel - Úprava template MVC v ASP.NET

V minulej lekcii, Spracovanie dát a validácie v ASP.NET MVC , sme si vysvetlili spracovanie dát z formulára a validácie. Od dnešného C# .NET tutoriálu začneme pracovať na jednoduchom blogu s databázou článkov a administráciou.

Založenie projektu

Vo Visual Studio môžeme okrem prázdneho projektu založiť tiež projekt, v ktorom sú už pripravené základné veci ako šablóny, menu, štýly, jQuery a podobne. Pretože by nás tento projekt zo začiatku skôr miatol, vychádzali sme vždy z projektu prázdneho. Teraz však už nie je dôvod začínať na zelenej lúke, základným princípom v ASP.NET už rozumieme a preto budeme chytrí a využijeme pripravené šablóny.

Založte si novú ASP.NET Web Application s názvom AspBlog. U výberu template zvolíme MVC a spôsob overenia by sme mali mať nastavený na Individual User Accounts.

Štruktúra ASP.NET MVC template

V Solution Exploreri vidíme pomerne komplikovanú štruktúru projektu. Poďme si ju aspoň zhruba popísať.

V priečinku Content sa nachádza statický (nemenný) obsah webu. Visual Studio nám dovnútra skopírovali tzv. Bootstrap. To je CSS framework, s ktorým prišiel Twitter a ktorý umožňuje veľmi jednoducho stylovať stránky pomocou predpripravených štýlov. Ďalej tu máme súbor Site.css, ktorý už štýlom našu konkrétnu stránku, tam budeme pridávať naše štýly.

Ďalšou dôležitou zložkou pre nás bude Scripts, tá slúži pre JavaScriptové súbory. Opäť tu máme už nakopírované základné skripty. Nájdeme tu populárne JS framework jQuery, ktorý ASP.NET používa najmä na validácie. Ďalej tu máme Modernizr, ktorý umožňuje používať HTML 5 aj na starých prehliadačoch.

Čo sa týka stránok, máme tu 2 kontrolery: HomeController s pohľadmi úvodnej stránky, kontaktné stránky a about stránky. Ďalej tu máme AccountController, kde je předgenerovaná registrácia a prihlasovanie užívateľov. V modeloch máme vygenerovaných niekoľko view-modelov pre prihlasovanie.

Keď aplikáciu spustíme, uvidíme, že toho máme už naozaj hotovo celkom dosť:

Je pripravené navigačné menu, registračné formuláre a podobne. Web je dokonca aj responzívne. Hoci by sme si mohli web pomerne jednoducho přeskinovat pomocou hotového schému, v praxi väčšinou dostanete hotový vzhľad od kodér / grafika a budete ho musieť na tento projekt zaštepiť. Práve tomu budeme venovať zvyšok dnešného dielu.

Mimochodom, určite ste si všimli, že Microsoft v projekte používa pomerne veľa otvorených technológií a neprichádza s vlastnými alternatívami, čo je asi dobre.

Úprava šablóny

Pre šablónu nebudeme chodiť ďaleko, ale vypožičiame si ju zo seriálu Webové stránky krok za krokom. Nakódovanie web si stiahnite v poslednom dieli (Nahrávanie webu na internet). Jedná sa o jednoduchý statický web v HTML 5 a CSS 3. Ak vám v jeho kóde nie je čokoľvek jasné, v seriáli je detailne popísaná jeho tvorba.

Web si minimálne upravíme pre naše účely a to tak, že do navigačného menu namiesto "O mne" vložíme "Články". Môžete si aj mierne upraviť obsah a vzhľad tak, aby sa vám blog páčil. Ja som to urobil nasledovne:

Obsah a vzhľad teraz postupne prenesieme do nášho projektu v ASP.NET.

Kopírovanie súborov

V projekte si vytvorte novú zložku Images a do nej nakopírujte obrázky z priečinka obrazkami v šablóne.

Prejdeme do súboru Site.css v priečinku Content v ASP.NET projektu, kde vymažeme štýlovanie body, zvyšok ponecháme. Do súboru teraz pridáme ešte všetky štýly zo súboru styl.css z HoBiho webu. V Site.css je teraz potrebné prepísať cesty k obrázkom, napr. Riadok:

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

Upravíme na:

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

Dve bodky musíme uviesť preto, že štýl je v priečinku Content a Images sú o zložku vyššie. Podobné riadky tam sú asi 4, všetky si ich upravte.

Úprava layoutu

Presunieme sa do Views / Shared / _Layout.cshtml. Toto je tzv. Layout stránky, ktorý obsahuje základný HTML štruktúru (hlavičku, menu, pätičku). Dovnútra sa renderuje aktívny View, teda napr. Kontaktnú stránka. Funkcionality je docielené pomocou súboru _ViewStart.cshtml, kde je súbor s layoutom nastavený.

My si teraz _Layout.cshtml upravíme tak, aby vyzeral ako index.html z HoBiho šablóny. Budeme upravovať iba časť body. V nej zmažeme div s navigačným menu a pätičku.

Do body teraz vložíme obsah body z HoBiho šablóny (zo súboru index.html). Na miesto, kam sa vkladá obsah, nesmieme zabudnúť premiestniť volanie RenderBody (). Podobným spôsobom vypíšeme aj titulok do nadpisu h1 a odkazy do menu.

Body bude v layoutu teraz vyzerať nejako 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>

Keď aplikáciu teraz spustíme, uvidíme, že sa podstránky naozaj vkladajú do našej šablóny.

Úprava obsahových stránok

Najprv sa presunieme do Home / Index.cshtml, kde odstránime všetko okrem nastavenia titulku. Teraz sem presunieme obsah elementu

z šablóny. Nezabudnite upraviť cestu k obrázkom. Na prvom riadku pri každej obsahovej stránky upravíme jej titulok. Index.cshtml vyzerá 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ýsledok:

Podobne si upravte kontaktnú stránku. Stránku About nebudeme potrebovať a preto jej View odstránime, rovnako ako jej metódu v HomeControlleru.

Naopak si pridajte 2 nové View do zložky Home: References.cshtml a Skills.cshtml a opäť im vložte obsah z šablóny. Články zatiaľ neriešiť nebudeme. HomeControlleru dodajte metódy pre tieto pohľady:

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

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

Môžete si skúsiť preklikať stránku pomocou navigačného menu, všetko okrem článkov by malo fungovať.

Šablónu máme teda pripravenú, v budúcej lekcii, Scaffolding a Entity Framework v ASP.NET MVC , si zobrazíme články z databázy. Projekt je ako vždy v prílohe k stiahnutiu so zdrojovými kódmi.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.