5. díl - Úprava template MVC v ASP.NET

C# .NET ASP.NET MVC Úprava template MVC v ASP.NET

V minulém dílu našeho seriálu tutoriálů o tvorbě webových aplikací v ASP.NET MVC jsme si vysvětlili zpracování dat z formuláře a validace. Od dnešního dí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.

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, příště 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 418x (21.05 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 (10 hlasů) :
4.94.94.94.94.9


 


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

 

 

Komentáře

Avatar
BlugW
Redaktor
Avatar
BlugW:

Konečně, na tohle jsem čekal :)

Odpovědět 12.3.2014 21:23
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
Majkel
Člen
Avatar
Majkel:

Co přesně tady znamená element

<article></article> ?
 
Odpovědět 17.4.2015 12:35
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovědět 17.4.2015 12:37
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
Odpovídá na Majkel
Ondřej Štorc:

Podívej se na to co jsou to HTML5 tagy.. A už jen z překladu to značí že uvnitř toho tagu bude nějaký článek

Odpovědět 17.4.2015 12:37
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
srdosm
Člen
Avatar
srdosm:

:-D Bíťa

 
Odpovědět 25.4.2015 22:50
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 5 zpráv z 5.