Lekce 5 - Úprava template MVC v ASP.NET

C# .NET ASP.NET MVC Základy ASP.NET MVC Úprava template MVC v ASP.NET

Unicorn College ONEbit hosting 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, 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.

Template v ASP.NET MVC

Struktura ASP.NET MVC template

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

Struktura template v ASP.NET MVC

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:

Ukázka template webu v ASP.NET MVC

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ě:

HoBiho šablona pro ASP.NET MVC

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.

HoBiho šablona pro ASP.NET MVC

Ú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:

HoBiho šablona pro ASP.NETMVC

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.


 

Stáhnout

Staženo 598x (21.05 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?
18 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 (5)

 

 

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

Avatar
Jiří Kubiczek:29.9.2017 13:33

A jak napojím javascriptový Lightbox? :-) Díky.

 
Odpovědět 29.9.2017 13:33
Avatar
Ondrej Horák:12. února 11:14

Zdravím, mám problém pri úprave template. Vytvoril som si vlastný dizajn v PHP storm a snažím sa teraz ho dať do Visual Studia ale neberieme mi to niektoré štýly a niektoré áno. Viete mi s tým poradiť?

 
Odpovědět 12. února 11:14
Avatar
Vojta Lechovský:15. února 19:49

Proč v položkách seznamu voláme kontroler, proč tam nedáme jen odkaz? Třeba u článků je to v dalších lekcích potřeba, ale to je asi jediný případ, ne?

 
Odpovědět 15. února 19:49
Avatar
Odpovídá na Vojta Lechovský
Michal Štěpánek:16. února 8:41

Odkaz na "co"? Když chceš zobrazit nějakou stránku ze svého projektu, musíš mu říct, v kterém Controlleru se nachází, protože stránek se stejným názvem můžeš mít víc, odlišuješ je právě příslušností ke konkrétnímu Controlleru.

Odpovědět 16. února 8:41
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Odpovídá na Michal Štěpánek
Vojta Lechovský:16. února 13:59

Myslel jsem, že by v navigaci mohlo místo tohoto:

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

být toto:

<li><a href="index.html">Domů</a></li>
<li>@Html.ActionLink("Články", "Index", "Article")</li>
<li><a href="dovednosti.html">Dovednosti</a></li>
<li><a href="reference.html">Reference</a></li>
<li><a href="kontakt.html">Kontakt</a></li>

Nebo ne?

 
Odpovědět 16. února 13:59
Avatar
Odpovídá na Vojta Lechovský
Michal Štěpánek:16. února 14:03

Ne. Na koncovky souborů se tu nehraje a když na tý stránce mají být nějaká data, controller je zodpovědný za to, jaká data tam jsou...

Odpovědět 16. února 14:03
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Odpovídá na Michal Štěpánek
Vojta Lechovský:16. února 14:14

Na koncovky souborů se tu nehraje

To jsem nepochopil, co tím myslíš?

 
Odpovědět 16. února 14:14
Avatar
Odpovídá na Vojta Lechovský
Michal Štěpánek:16. února 14:18

Že koncovka .HTML se vyskytuje jen u statických webů dělaných v html. Tady se používá razor syntaxe a koncovka souborů je třeba *.cshtml.
Důležité ale je, že nespouštíš "stránku", ale zobrazuješ "view" právě pomocí controlleru. Od toho je to MVC...

Editováno 16. února 14:19
Odpovědět  +1 16. února 14:18
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
 
Odpovědět 16. února 14:19
Avatar
Odpovídá na Vojta Lechovský
Michal Štěpánek:16. února 14:20

A hlavně, ta koncovka se v prohlížeči ani nezobrazuje...

Odpovědět  +1 16. února 14:20
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
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