Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

V minulé lekci, MasterPage a navigace v ASP.NET, jsme si vysvětlili jak funguje MasterPage a kontrolky pro navigaci, zejména Menu.

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 MasterPage, 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 Web Forms.

Template v ASP.NET Web Forms - ASP.NET Web Forms - Webové aplikace v C#

Struktura ASP.NET Web Forms template

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

Struktura template v ASP.NET Web Forms - ASP.NET Web Forms - Webové aplikace v C#

Ve složce Account se nachází část webu s přihlášením a správou účtů. Té si zatím nebudeme všímat.

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 MasterPage (jednu klasickou a jednu pro mobilní zařízení). Obsahové stránky v projektu nalezneme 3: About, Contact a Default.

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

Ukázka template webu v ASP.NET Web Forms - ASP.NET Web Forms - Webové aplikace v C#

Vidíme, že je připravené navigační menu, Registrační formuláře a podobně. 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 Web Forms - ASP.NET Web Forms - Webové aplikace v C#

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

Dále označíme obsah souboru styl.css a tím nahradíme obsah souboru Site.css ve složce Content v projektu. 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 Site.Master

Přesuneme se do Site.Master, kterou upravíme tak, aby vypadala jako index.html z šablony. Budeme upravovat pouze část body. V ní smažeme vše kromě formu a ScriptManageru, který je v něm vložený. Odstraníme tedy navigační menu a obsahový div.

Do body nyní vložíme obsah body z šablony (ze souboru index.html) a to tak, aby byl tento obsah uvnitř formu, pod ScriptManagerem. Na místo, kam se vkládá obsah, nesmíme zapomenout vložit placeholder.

Body bude v MasterPage vypadat 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šimněte si, že jsem upravil i odkazy v navigačním menu, aby odkazovaly na jednotlivé podstránky s příponou .aspx. Podbarvení položky s aktuální stránkou zatím opomeneme. Kdybyste si ho do webu chtěli dodělat, musíte již k navigaci použít kontrolku Menu, kde lze nastavit vlastnost StaticSelected­Style.

Další změnou je obsah nadpisu H1, kam se nyní vypisuje titulek aktuální obsahové stránky. V section se nalézá placeholder, který do ní vkládá obsahové stránky.

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

HoBiho šablona pro ASP.NET Web Forms - ASP.NET Web Forms - Webové aplikace v C#

Úprava obsahových stránek

Nejprve se přesuneme do Default.aspx, kde odstraníme obsah elementu Content a do něj 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. Default.aspx vypadá 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ýsledek:

HoBiho šablona pro ASP.NET Web Forms - ASP.NET Web Forms - Webové aplikace v C#

Podobně si upravte kontaktní stránku. Stránku About.aspx nebudeme potřebovat a proto ji odstraníme. Naopak si přidejte 3 nové obsahové stránky: Clanky.aspx, Dovednosti.apsx a Reference.aspx a opět jim vložte obsah z šablony. Již víte, že je přidáte jako Web Form with Master Page. Můžete si zkusit, že na ně jde opravdu přecházet pomocí menu.

Šablonu máme tedy připravenou.

V příští lekci, Výpis článků z databáze v ASP.NET, 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š.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 393x (19.87 MB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

Předchozí článek
MasterPage a navigace v ASP.NET
Všechny články v sekci
ASP.NET Web Forms - Webové aplikace v C#
Přeskočit článek
(nedoporučujeme)
Výpis článků z databáze v ASP.NET
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
15 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity