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

C# .NET ASP.NET Web Forms Úprava template Web Forms v ASP.NET

V minulém dílu našeho seriálu tutoriálů o tvorbě webových aplikací v ASP.NET jsme si vysvětlili jak funguje MasterPage a kontrolky pro navigaci, zejména Menu. 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 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

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

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

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

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://devbook.cz">DEVBOOK.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

Ú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 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 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.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>
        <div class="cistic"></div>

</asp:Content>

Výsledek:

HoBiho šablona pro ASP.NET Web Forms

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, 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 314x (19.87 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 (4 hlasů) :
4.254.254.254.25 4.25


 


Miniatura
Předchozí článek
MasterPage a navigace v ASP.NET
Miniatura
Všechny články v sekci
ASP.NET Web Forms
Miniatura
Následující článek
Výpis článků z databáze v ASP.NET

 

 

Komentáře

Avatar
cmaja
Člen
Avatar
cmaja:

Koukám na zeď, co je za novinky a je tu tento díl. Ten je špicový. Podle tutoriálu pro HTML5 a CSS3 jsem si vytvořil stránku, která je stejná jak v tom tutoriálu, zatím jsem ji nevyvěsil na net. Jakmile si projdu JavaScript, tak se vrhnu na ASP.NET. Teď trochu předbíhám, ale chtěl jsem se zeptat, jak by bylo složité vytvořit vedlejší navigační menu v ASP.NET. Které by bylo na levé straně od článku. V horním hlavním menu by byly jednotlivé sekce (např. pěstování, programování, vaření, ….). A vedlejší menu by sloužilo k navigaci mezi články v dané sekci. Šlo by to nějak zakomponovat do nějakého zdejší dílu tutoriálu?

Odpovědět  +1 30.1.2014 22:48
"Jen dvě věci jsou nekonečné - vesmír a lidská hloupost. Tím prvním si ovšem nejsem tak jist" ALBERT EINSTEIN
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na cmaja
David Čápka:

Ahoj, do toho menu bys potom vložil výsledek nějakého databázového dotazu na článku v dané sekci. Taková navigace mi ale přijde divná, lepší je mít jen jedno menu. V seriálu přímo tohle nebude, ale když si ho pročteš do konce, budeš to schopný udělat sám.

Odpovědět 31.1.2014 9:14
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
Malldoren
Člen
Avatar
Malldoren:

Celkově super seriál! :) A mám dva dotazy, jak zprovozním lightbox a... v sedmým díle píšeš že si založíme (znovu) clanky.aspx neměl si namysli clanek.aspx? Mě to docela zmátlo :)

 
Odpovědět 23.2.2014 10:20
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Malldoren
David Čápka:

Lightbox je použit v místním HTML seriálu, nalezneš ho v HTML sekci - Web krok za krokem.

Odpovědět 21.3.2014 16:27
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
dan.azo
Člen
Avatar
dan.azo:

Ahoj, nevíte někdo, proč, když přepíšu v CSS souboru ty odkazy na obrázky na správnou cestu, po rozjetí náhledu v prohlížeči ty obrázky nezobrazují? V ,,syrovém" náhledu přímo ve VS tam jsou z CSSka všechny..

Editováno 9.5.2015 10:32
 
Odpovědět 9.5.2015 10:32
Avatar
Odpovídá na dan.azo
Michal Štěpánek:

Asi jsi je nepřepsal všude...

Odpovědět 9.5.2015 16:47
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 6 zpráv z 6.