Lab 5: ASP.NET 2.0 Site Navigation

Transkript

1 Lab 5: ASP.NET 2.0 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 meyer, trädstrukturer och andra navigations hjä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 2.0. 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 sedan Redovisning Redovisas som en enkel labbrapport med koden som en bifogad textfil. Labb förberedelser Om du inte har slutfört labb 2 och enablat databas cachning, gör så här: a. Hämta scriptfilen CacheSetup.cmd från min hemsida och öppna den i notepad. Ändra datornamnet i kommandosträngarna så att det stämmer med din dator. b. Öppna Visual Studio komandoprompt. Alla Program Microsoft Visual Studio 2005 Visual Studio Tools Visual Studio Command Prompt. c. Navigera till katalogen där du sparade CacheSetup.cmd filen. d. Skriv CacheSetup.

2 2 Ö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 samt säkerhetsdatabas Beskrivning a. Kopiera alla filer från labb 4 till en ny katalog som du döper till labb5. b. Kontrolers så att ASPNETDB.MDF och aspnetdb_log.ldf från mappen C:\...\Lab4\App_Data följt med till C:\...\Lab5\App_Data mappen. 2. Öppna Webbsiten c. 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 lag 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 lag 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="favorites.aspx" title="favorites" />

3 3 <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 5. Lägg till en SiteMapDataSource kontroll a. Öppna Site.master i Design vyn. b. Placera markören I den ljusgrå tabellcellen som löper vertikalt längs vänster sida (se nedan) och ange cellens VAlign egenskap till top. c. Lägg till en SiteMapDataSource kontroll I cellen. d. Ange SiteMapaDataSource kontrollens ShowStartingNode egenskap till False. 6. Lägg till en menykontroll a. Placera markören I den tabellcell som innehåller SiteMapDataSource och välj Layout >Insert Table från menyn för att lägga till 1 ra och 1 kollumn under SiteMapDataSource enligt nedan (observera att Cell padding är angiven till 6):

4 4 b. Placera markören i tabellen som du just skapat. Ange tabellens VAlign egenskap till top och dess Width egenskap till 100%. (Om inte egenskaperna visas, högerklicka i cellen och välj properties) c. Dra en meny kontroll till tabellcellen. d. Öppna Choose Data Source listan i Menu Tasks meny för att koppla SiteMapDataSource1 som datakälla för menyn. e. Klicka på menykontrollen så att den är vald. f. Ange följande egenskaper för menykontrollen: Egenskap EnableTheming Font Name Font Size ForeColor Orientation StaticHoverStyle BackColor StaticHoverStyle BorderColor StaticHoverStyle BorderStyle Värde False Verdana 10pt Black Vertical LightGray Gray Solid StaticHoverStyle BorderWidth 1 StaticMenuItemStyle ItemSpacing 2 Width 100% 7. Prova navigationen a. Starta Default.aspx och kontrollera så att den innehåller en navigationsmeny som den nedan. Kontrollera även att bakgrunden bakom de enskilda valen får en mörkt grå bakgrund när markören håls över dem.

5 5 1. Prova din XML site map genom att klicka på de olika valen ett I tagen och se så att de går till rätt sidor. 2. Stäng webbläsaren och återvänd till Visual Studio

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 3. Visa navigationsmeny som vanlig användare 4. Visa navigationsmeny som administratör Beskrivning 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. 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 beskrivning a. Öppna Site.master i Design view. b. Placera markören tillvänster om ContentPlaceHolder kontrollen och använd Layout >Insert Table kommandot för att infoga en tabell med 2 rader och 1 kolumn enligt nedan: c. Om ContentPlaceHolder kontrollen inte befinner sig under tabellen så flytta den: d. Ange den översta radens höjd till 32, dess brädd till 100% och dess bakgrundsfärg till #ececec (eller någon annan färg ni föredrar. e. Ange den nedersta radens höjd till 1, brädd till 100% och dess bakgrund till Gray.

8 8 2. Lägg till en SiteMapPath kontroll. a. Lägg till en SiteMapPath kontroll på sidan, lä g den I den översta tabellraden I tabellen du just skapade. b. Lägg till ett mellanrum till vänster om kontrollen så att den kommer ut en bit från tabellens vänstra kant. c. Ange kontrollens EnableTheming egenskap till false. d. Ange fonten till 10 punkter, Verdana. e. Öppna Default.aspx och kola så att Home visas ovanför sidans innehålls del enligt nedan. f. Logga in med användarkontot du skapade tidigare. Klicka sedan på något av de andra menyvalen och kola så att Home ändras till exempelvis Home > Hot Picks, enligt nedan. g. Sä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 mitt webbkonto och spara på datorn. 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 (du kommer väl ihåg var du sparat bilderna?) c. Markera SiteMapPath kontrollen i design (I master page). Klicka på pilen i övre

9 9 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 slap den i PathSeparatorTemplate boxen. f. Ange bildens ImageAlign egenskap till Middle och dess ImageUrl egenskap till ~/Images/filnamn.gif. g. Klicka på pilen i övre högra hornet 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 exempelvis Events sidan. Kontrollera så att SiteMapPath avgränsarna har ändrats till den bild du valt. Något likande nedan.