Lab 5: ASP.NET 4.5 Site Navigation

Transkript

1 Lab 5: ASP.NET 4.5 Site Navigation Enkel navigering är en viktig del av en modern webbapplikation. Eftersom en stor del av utvecklingstiden för en site används för att bygga menyer, trädstrukturer och andra navigationshjälpmedel och efter som en förändring i strukturen ständigt påverkar navigationsstrukturen så har Microsoft byggt in funktioner för att hantera detta i ASP.NET. Menu och TreeView controller förenklar arbetet med att bygga navigationsgränssnittet; SiteMapDataSource kontrollen möjliggör att förändringar i strukturen automatiskt slår egendom i navigationsgränssnittet och SiteMapPath kontrollen gör det enkelt att visa sökvägen till aktuell sida. I denna labb skall du använda dessa controller för att bygga en modern navigationskontroll för din webbsida. Genom att använda en kombination av Menu kontroller, SiteMapDataSource controller och SiteMapPath kontroller så skall du skapa ett databasdrivet navigationssystem som automatiskt reflekterar förändringar i strukturen. Du lär dig använda dessa så att du sedan kan använda dem i egna applikationer. Ungefär så här kommer sidan att se ut efter denna labb.

2 2 Labb förberedelser Om du inte har slutfört labb 2 och enablat databas cachning, gör så här: Hämta scriptfilen CacheSetup.cmd från kurswebbplatsen och öppna den i notepad. Ändra datornamnet i kommandosträngarna så att det stämmer med din dator. a. Öppna Visual Studio kommandoprompt. Alla Program Microsoft Visual Studio 2012 Visual Studio Tools Visual Studio Command Prompt. b. Navigera till katalogen där du sparade CacheSetup.cmd filen. c. Skriv CacheSetup. Innan du börjar med labb 5 är det lämpligt att ha läst kapitel 17 i boken.

3 3 Övning 1 Lägg till en navigationsmeny I denna övning skall du lägga till en navigationsmeny till din webbapplikation så att användare enkelt kan navigera mellan de olika sidorna. Först skall du lägga till lite fler sidor så att det finns lite fler sidor att navigera till. Sedan skall du skapa en XML site map, lägga till en Meny kontroll till din master page och ansluta din site map till Meny kontrollen med hjälp av en SiteMapDataSource kontroll. Uppgift 1. Kopiera koden från labb 4 och kopiera säkerhetsdatabasen. Detaljbeskrivning a. Kopiera alla filer från labb 4 till en ny katalog som du döper till Lab5. b. Kopiera ASPNETDB.MDF och aspnetdb_log.ldf från mappen C:\...\Lab4\App_Data till C:\...\Lab5\App_Data mappen. Databasen skapades när du körde ASP.NET Configuration tool i labb 4. Den innehåller säkerhets inställningarna för din webbapplikation inklusive användare, roller och rättigheter. 2. Öppna Webbsiten a. Starta Microsoft Visual Studio och välj File->Open Web Site och öppna C:\...\Lab5 site. 3. Lägg till en sida till webbsiten 4. Skapa en XML site map a. Högerklicka på C:\...\Lab5\ i Solution Explorer och välj Add New Item lägg till en sida med namn HotPicks.aspx. Välj Web Form som template och kryssa i Place code in separate file och rutan Select master page. b. När du uppmanas att ange master page, välj Site.master. c. Ändra titelattributet Page direktivet till Title= MyComics Hot Picks. d. Lägg till sidor med namnen Events.aspx, Forums.aspx, och FAQ.aspx på samma sätt till din webbsite. Ange titelattribut för sidorna på samma sätt som I punkt c till MyComics Events, MyComics Forums, och MyComics Frequently Asked Questions. a. Högerklicka på C:\...\Lab5\ i Solution Explorer och välj Add New Item och lägg till en fil med namnet Web.sitemap till siten. Välj Site Map som template. b. Redigera Web.sitemap så att den får följande hierarkiska struktur: <sitemapnode url="default.aspx" title="home"> <sitemapnode url="details.aspx" title="details" /> <sitemapnode url="secure/admin.aspx" title="admin" /> <sitemapnode url="hotpicks.aspx" title="hot Picks" /> <sitemapnode url="events.aspx" title="events" /> <sitemapnode url="forums.aspx" title="forums" /> <sitemapnode url="faq.aspx" title="faq" /> </sitemapnode> Förutsatt att ni namngivigt sidorna lika som jag

4 4 5. Lägg till en SiteMapDataSource kontroll a. Öppna Site.master i Design vyn. b. Placera markören i diven med id menu. c. Lägg till en SiteMapDataSource kontroll i diven. d. Ange SiteMapaDataSource kontrollens ShowStartingNode egenskap till False. 6. Lägg till en menykontroll a. Placera markören i diven som innehåller SiteMapDataSource (kan vara lättast att växla till kodläge för att hitta rätt med markören, och sedan växla tillbaka till design). b. Dra en meny kontroll till diven. c. Öppna Choose Data Source listan i Menu Tasks meny för att koppla SiteMapDataSource1 som datakälla för menyn. d. Klicka på menykontrollen så att den är vald. e. Ange följande egenskaper för menykontrollen: Egenskap EnableTheming Font-Name Font-Size ForeColor Orientation StaticHoverStyle-BackColor StaticHoverStyle-BorderColor StaticHoverStyle-BorderStyle StaticHoverStyle-BorderWidth StaticMenuItemStyle-ItemSpacing Värde False Verdana 10pt Black Vertical LightGray Gray Solid 1px 2px Width 100% 7. Prova navigationen a. Starta Default.aspx och kontrollera så att den innehåller en navigationsmeny som den nedan.

5 5 1. Prova din XML site map genom att klicka på de olika valen ett i taget och se så att de går till rätt sidor. 2. Stäng webbläsaren och återvänd till Visual Studio 3. Om menyn ligger långt ut i kanten, lägg till följande kod i Master.css, under #menu: padding-left: 10px;

6 6 Övning 2 Lägg till säkerhetsanpassningar Säkerhetsanpassning ( Security trimming ) är en egenskap för XmlSiteMapProvider som gör det möjligt att visa eller dölja menyval beroende av användarens roll. I denna övning skall du applicera detta på siten MyComics, admin-länken skall endast visas om du är inloggad som administratör. Uppgift 1. Modifiera XML site map 2. Aktivera security trimming i Web.config Detaljbeskrivning a. Dubbelklicka på Web.sitemap i Solution Explorer för att öppna den för editering. b. Lägg till rollen admin genom att lägga till egenskapen roles= Administrators till noden för Admin.aspx i din Web.sitemap. <sitemapnode url="secure/admin.aspx" title="admin" roles="administrators" /> c. Spara och stäng Web.sitemap. a. Dubbelklicka på Web.config i Solution Explorer för att öppna den för editering. b. Lägg till följande till <system.web> delen i Web.config: <sitemap> <providers> <remove name="aspnetxmlsitemapprovider" /> <add name="aspnetxmlsitemapprovider" type="system.web.xmlsitemapprovider" securitytrimmingenabled="true" sitemapfile="web.sitemap" /> </providers> </sitemap> c. Stäng och spara web.config. 3. Visa navigationsmeny som vanlig användare 4. Visa navigationsmeny som administratör a. Öppna Default.aspx i webbläsaren. b. Titta på navigationsmenyn till vänster, Admin skall inte synas. c. Klicka på Login länken längst upp på sidan och logga in som vanlig användare. d. Admin skall fortfarande inte synas i menyn. a. Logga ut, logga sedan in igen som administrator med administratörskontot du skapade i labb4. b. Titta på navigationsmenyn till vänster, Admin skall nu synas i menyn. c. Stäng webbläsaren och återvänd till Visual Studio.

7 7 Övning 3 Lägg till site map path I den här övningen skall du lägga till en SiteMapPath kontroll till master page så att användaren kan se sökvägen till aktuell sida. Sedan skall du göra anpassningar av kontrollen så att den ser ut som och uppför sig som resten av sidan. Uppgift 1. Lägg till en tabell på master page Detaljbeskrivning a. Öppna Site.master i Source läget. b. Placera markören alldeles före diven med id content. c. Skapa två divar enligt nedan: <div id="r1"> </div> <div id="r2"> </div> Lägg till följande kod i Master.css: #r1 { height: 40px; width: 100%; background-color: #ececec; vertical-align: top; } #r2 { height: 10px; width: 100%; background-color: Gray; vertical-align:top; } 2. Lägg till en SiteMapPath kontroll. a. Lägg till en SiteMapPath kontroll på sidan, lägg den i diven r1 som du just skapade. b. Lägg till ett mellanrum till vänster om kontrollen så att den kommer ut en bit från kanten. Kan vara lättast att göra i kodläge med: c. Ange kontrollens EnableTheming egenskap till false. d. Ange fonten till 10-punkter, Verdana. e. Öppna Default.aspx och kolla så att Home visas ovanför sidans innehållsdel enligt nedan.

8 8 f. Logga in med adminkontot du skapade tidigare. Klicka sedan på Admin och kolla så att Home ändras till Home > Admin, enligt nedan. g. Stäng webbläsaren och återvänd till Visual Studio. 3. Anpassa SiteMapPath kontrollen a. Om du inte har någon lämplig liten bild (gärna en gif bild), ladda ner från någon gratissida på nätet och spara på din dator. b. Högerklicka på Images mappen i Solution Explorer och välj Add Existing Item. Välj bild för att kopiera den till din images mapp, c. Markera SiteMapPath kontrollen i design (i master page). Klicka på pilen i övre högra hörnet för att visa SiteMapPath Tasks menyn. Klicka på Edit Templates. d. Välj PathSeparatorTemplate I dropdown listen med namnet Display. e. Dra en Image kontroll från verktygslisten och släpp den i PathSeparatorTemplate boxen. f. Ange bildens ImageAlign egenskap till Middle och dess ImageUrl egenskap till

9 9 ~/Images/filnamn.gif. g. Klicka på pilen i övre högra hörnet på PathSeparatorTemplate boxen för att visa SiteMapPath Tasks menyn igen. Klicka på End Template Editing för att avsluta editeringsläget. h. Öppna applikationen och gå till Admin sidan. Kontrollera så att SiteMapPath avgränsarna har ändrats till den bild du valt. Något liknande nedan.