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.
Struktura ASP.NET Web Forms template
V Solution Exploreru vidíme poměrně komplikovanou strukturu projektu. Pojďme si ji alespoň zhruba popsat.
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:
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ě:
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 ©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 StaticSelectedStyle.
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.
Ú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:
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 394x (19.87 MB)
Aplikace je včetně zdrojových kódů v jazyce C#