Transcript Lab 5: ASP.NET 2.0 Site Navigation

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
Ö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 2. Öppna Webbsiten 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. 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 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 I @ 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”. 4. Skapa en XML site map 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
<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
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.
7. Prova navigationen Ange följande egenskaper för menykontrollen: Egenskap Värde EnableTheming False Font‐Name Verdana Font‐Size 10pt ForeColor Black Orientation Vertical StaticHoverStyle‐BackColor LightGray StaticHoverStyle‐BorderColor Gray StaticHoverStyle‐BorderStyle Solid StaticHoverStyle‐BorderWidth 1 StaticMenuItemStyle‐ItemSpacing 2 Width 100% 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
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
Ö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 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. 2. Aktivera “security trimming” i Web.config 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
Ö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
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
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.