5. diel - Úprava template Web Forms v ASP.NET

V minulej lekcii, Masterpage a navigácia v ASP.NET , sme si vysvetlili ako funguje masterpage a kontrolky pre navigáciu, najmä Menu. 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 masterpage, š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 Web Forms.

Štruktúra ASP.NET Web Forms template

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

V priečinku Account sa nachádza časť webu s prihlásením a správou účtov. Tej si zatiaľ nebudeme všímať.

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 masterpage (jednu klasickú a jednu pre mobilné zariadenia). Obsahové stránky v projekte nájdeme 3: About, Contact a Default.

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

Vidíme, že je pripravené navigačné menu, registračné formuláre a podobne. 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.

Ďalej označíme obsah súboru styl.css a tým nahradíme obsah súboru Site.css v zložke Content v projekte. 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 Site.Master

Presunieme sa do Site.Master, ktorú upravíme tak, aby vyzerala ako index.html z šablóny. Budeme upravovať iba časť body. V nej zmažeme všetko okrem formu a ScriptManageru, ktorý je v ňom vložený. Odstránime teda navigačné menu a obsahový div.

Do body teraz vložíme obsah body z šablóny (zo súboru index.html) a to tak, aby bol tento obsah vnútri formu, pod ScriptManagerem. Na miesto, kam sa vkladá obsah, nesmieme zabudnúť vložiť placeholder.

Body bude v masterpage vyzerať asi takto:

<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <header>
            <div id="logo"><h1>HoBi</h1></div>
            <nav>
                <ul>
                    <li><a href="Default.aspx">Domů</a></li>
                    <li><a href="Clanky.aspx">Články</a></li>
                    <li><a href="Dovednosti.aspx">Dovednosti</a></li>
                    <li><a href="Reference.aspx">Reference</a></li>
                    <li><a href="Contact.aspx">Kontakt</a></li>
                </ul>
            </nav>
        </header>

        <article>
            <div id="centrovac">
                <header>
                    <h1><%: Page.Title %></h1>
                </header>

                <section>

                    <asp:ContentPlaceHolder ID="MainContent" runat="server">
                    </asp:ContentPlaceHolder>

                </section>
                <div class="cistic"></div>
            </div>
        </article>


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

    </form>
</body>

Všimnite si, že som upravil aj odkazy v navigačnom menu, aby odkazovali na jednotlivé podstránky s príponou .aspx. Podfarbenie položky s aktuálnou stránkou zatiaľ zabudneme. Keby ste si ho do webu chceli dorobiť, musíte už k navigácii použiť kontrolku Menu, kde možno nastaviť vlastnosť StaticSelected­Style.

Ďalšou zmenou je obsah nadpise H1, kam sa teraz vypisuje titulok aktuálnej obsahovej stránky. V section sa nachádza placeholder, ktorý do nej vkladá obsahovej stránky.

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 Default.aspx, kde odstránime obsah elementu Content a doň 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. Default.aspx vyzerá asi takto:

<%@ Page Title="O mně" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AspBlog._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <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 ITnetwork.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 Web Forms. Komunikuje s databází, 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.itnetwork.cz">itnetwork.cz</a>, kde je také detailně popsaný postup k jeho vytvoření. Jedná se o rozšíření statického portfolia webdesignera HoBiho.</p>
    <div class="cistic"></div>

</asp:Content>

výsledok:

Podobne si upravte kontaktnú stránku. Stránku About.aspx nebudeme potrebovať a preto ju odstránime. Naopak si pridajte 3 nové obsahové stránky: Clanky.aspx, Dovednosti.apsx a Reference.aspx a opäť im vložte obsah z šablóny. Už viete, že je pridáte ako Web Form with Master Page. Môžete si skúsiť, že na nich ide naozaj prechádzať pomocou menu.

Šablónu máme teda pripravenú, v budúcej lekcii, Výpis článkov z databázy v ASP.NET , 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š.