Sidrenderingsmodellen

Kapitel 3 Sidrenderingsmodellen I detta kapitel: Rendering av kontroller som taggar Paketera användargränssnitt som komponenter Lägga till kontroller med Visual Studio Sammanfattning Kapitel 3 snabbreferens När du gått igenom detta kapitel kommer du att kunna Arbeta direkt med serverbaserade kontrolltaggar Skapa en webbplats i Visual Studio Arbeta med webbformulär och serverbaserade kontroller i Visual Studio Arbeta med post-backhändelser i Visual Studio Detta kapitel går igenom kärnan i ASP.NET:s renderingsmodell för webbformulär (Web Forms): kontrollerna. Som vi kommer att se bearbetar System.Web.UI.Page renderingsprocessen genom att bryta upp den i små komponenter som går under namnet serverbaserade kontroller. Under vår resa genom ASP.NET:s kontrollmodell ska vi inrikta oss på den grundläggande arkitekturen bakom kontrollerna. Vi börjar med att titta på den html-kod som behövs för att rendera kontrollerna i webbläsaren. Därefter går vi snabbt igenom hur det går till att visa kontroller med klassisk ASP (och några av de problem det innebär). Detta lägger grunden för kommande kapitel, i vilka vi ska granska hur man via kontroller får tillgång till anpassad rendering, användarkontroller, några av de vanligaste användargränssnittskontrollerna och de nya kontroller som finns i ASP.NET 2.0. Vi börjar med ASP.NET:s renderingsmodell. Rendering av kontroller som taggar Som vi såg när vi gick igenom webbformulär, handlar utvecklingen av ett webbaserat användargränssnitt helt och hållet om att skicka rätt taggar till webbläsaren. Till exempel, föreställ dig att du vill att tillämpningens användargränssnitt ska se ut som det i Bild 3-1.

62 ASP.NET 2.0 steg för steg Bild 3-1 Några html-taggar renderade som kontroller i Internet Explorer För att få fram detta i klientens webbläsare, måste man förse en htmlström med korrekta taggar så att webbläsaren kan rita upp de avsedda kontrollerna på skärmen. Lista 3-1 visar en del av den html som gör jobbet. Om du vill köra denna sida, heter filen BunchOfControls.htm och finns i de kodexempel som hör till kapitlet. För att köra filen sparar du den i en virtuell katalog och surfar till den. Lista 3-1 <h2> Sida i HTML </h2> <form method="post" action="bunchofcontrols.htm" id="form1"> <span>skriv i mig</span> <input name="textinfo" type="text" id="textinfo" /> <BR> <select name="selectitems" id="ddl"> <option value="post 1">Post 1</option> <option value="post 2">Post 2</option> <option value="post 3">Post 3</option> <option value="post 4">Post 4</option> </select> <BR> <input type="submit" name="pressme" value="klicka på mig!" id="pressme" /> </form> Självfallet antyder närvaron av kontroller att innehållet ska vara dynamiskt, därför bör denna html sammanställas programmatiskt. Klassisk

Kapitel 3 Sidrenderingsmodellen 63 ASP har vad som krävs för att rendera dynamiskt innehåll. Emellertid förlitar sig klassisk ASP på rå html för rendering av sitt innehåll. Detta innebär att en sida som BunchOfControls.htm skulle se ut ungefär som i Lista 3-2 om den skrevs om i klassisk ASP. Bild 3-2 visar hur ASP-sidan ser ut i Internet Explorer. Lista 3-2 <%@ Language="javascript" %> <h2> Sida i klassisk ASP </h2> <form> <span>type in me</span> <input name="textinfo" type="text" id="textinfo" /> <BR> <select name="selectitems" id="ddl"> <option value="post 1">Post 1</option> <option value="post 2">Post 2</option> <option value="post 3">Post 3</option> <option value="post 4">Post 4</option> </select> <BR> <input type="submit" name="pressme" value="klicka på mig!" id="pressme" /> <p> <% if (Request("textinfo")!= "") { %> Textrutan innehöll detta: <%=Request("textinfo") %> <br> Och detta fanns i alternativkontrollen: <%=Request("selectitems") %> <% } %> </p> </form>

64 ASP.NET 2.0 steg för steg Bild 3-2 ASP-sidan i Lista 3-2 ser ut så här i Internet Explorer. Lägg märke till att när man väljer en post i alternativkontrollen, svarar sidan genom att tala om vilken post man valde. Detta demonstrerar ASP:s stöd för dynamiskt innehåll. Observera att även om klassisk ASP erbjuder ett sätt att definiera sidans innehåll under körning, måste man fortfarande skapa en hel del av sidan med hjälp av rå html. Dessutom återställs alltid posterna mellan knapptryckningarna (vi ska gå igenom detta när vi undersöker tillståndet View längre fram). ASP.NET lägger till ett lager indirekt adressering mellan den råa html-koden och den uppritade sidan detta lager är ASP.NET:s serverbaserade kontroller. Serverbaserade kontroller eliminerar mycket av det slitgöra som går hand i hand med utveckling av webbaserade gränssnitt i klassisk ASP. Paketera användargränssnitt som komponenter Möjligheten att bygga användargränssnitt bestående av komponenter är en av de huvudsakliga orsakerna till att producera komponenter. I vanlig Windows-programmering användes ursprungligen VBX:er (Visual Basic Controls) till att bygga användargränssnitt. Detta var förstås mer än ett decennium sedan. Under mitten och sent nittiotal, samt tidigt 2000-tal, var ActiveX-kontroller den teknik som gällde för att bygga användar-

Kapitel 3 Sidrenderingsmodellen 65 gränssnittskomponenter. Den nuvarande standarden för att skapa kontroller i modulbyggda användargränssnitt heter Windows Forms. Under slutet av nittiotalet dök ActiveX-kontroller upp som ett sätt att rendera webbaserade användargränssnitt med hjälp av komponenter. Tanken var att när en ActiveX-kontroll användes i en sida, skulle den laddas ner när användaren surfade till sidan. Vid nittiotalets mitt vann Java-applets en del popularitet som ett sätt att paketera GUIkomponenter för distribution över nätet. Emellertid kräver bägge teknikerna en ganska utförlig infrastruktur på användarens dator (COMmodellen för ActiveX och Java Virtual Machine för Java-applets). När man utvecklar en webbplats, kan man inte räkna med att det ska finnas en speciell infrastruktur på klientens maskin för att användargränssnittet ska fungera. För att fungera hos största möjliga antal klienter bör man bygga användargränssnittet med html, vilket innebär att alla GUIkomponenter måste skapas på servern. Som vi tidigare sett, har ASP.NET ett helt nytt sätt att hantera webbsidor. ASP.NET:s infrastruktur omfattar en väldefinierad rörledning genom vilken anropen rinner. När ett anrop når servern, initierar ASP.NET en hanterare (en realisering av IHttpHandler) som tar sig an anropet. Som vi kommer att se i ett senare kapitel, är hanteringsstrukturen fantastiskt flexibel. Man kan skriva vilken kod man vill för att hantera anropet. Klassen System.Web.UI.Page realiserar IHttpHandler genom att angripa renderingen på ett objektorienterat sätt. Det vill säga, alla kontroller som visas i en webbsida som skickats av ASP.NET, är på något vis renderad av en serverbaserad kontroll. Låt oss reda ut hur detta går till. Sidan med ASP.NET Vi provar att förvandla föregående webbsida till en ASP.NETtillämpning. 1. Skapa en fil med namnet BunchOfControls.aspx. 2. Lägg till koden från Lista 3-3 i filen. Lista 3-3 <%@ Page Language=C# %> <script runat="server"> protected void Page_Load(object sender, EventArgs ea) { ddl.items.add("post 1"); ddl.items.add("post 2"); ddl.items.add("post 3"); ddl.items.add("post 4"); }

66 ASP.NET 2.0 steg för steg </script > <h2> Page in ASP.NET </h2> <form id="form1" runat="server" > <asp:label Text="Skriv i mig" runat="server" /> <asp:textbox id="textinfo" runat="server" /> <BR> <asp:dropdownlist id="ddl" runat="server" /> <BR> <asp:button id="pressme" Text="Klicka på mig!" runat="server" /> </form> 3. Spara filen i en virtuell katalog (antingen skapar du en ny, eller också använder du den från de tidigare övningarna). Många av de element som finns i klassisk ASP känns igen här. Anvisningen Page finns högst upp. Nytt för ASP.NET är anvisningen Language, som talar om att all kod som påträffas av ASP.NET:s körningsmodul ska tolkas som C#. Det finns ett serverbaserat skriptblock som hanterar händelsen Page_Load. Efter skriptblocket följer html-taggen <form>. Observera att <form> har ett attribut med namnet runat, som är inställt på server. Attributet runat=server talar om för ASP.NET:s körningsmodul att den ska hantera den delen av sidan genom att generera en serverbaserad kontroll. Genom att inkludera attributet runat=server i kontrolltaggen, skapar ASP.NET:s körningsmodul en implicit instans av kontrollen i minnet. Den resulterande sammanställningen innehåller en medlemsvariabel av samma typ och namn som den kontroll som listas i sidan. Lägg märke till att ASP.NET-koden anger att den DropDownList som har namnet ddl ska köras på servern. För att komma åt kodblocket (här skrivet inline) programmatiskt, behöver kodblocket bara referera till kombinationsrutan DropDownList som ddl. Exemplet ovan använder medlemsvariabeln till att lägga till poster i kombinationsrutan. För att komma åt kontrollen med code-behind, deklarerar man variabeln DropDownList explicit som ddl. Detta är nödvändigt eftersom ASP.NET härleder code beside-klassen från System.Web.UI.Page. Visual Studio gör detta automatiskt, vilket vi snart ska få se. Längre ner i ASP.NET-koden kan man se att även de andra elementen (etiketten (Label), textrutan (TextBox), kombinationsrutan (Drop- DownList) och knappen (Button)) utgörs av serverbaserade kontroller. Var och en av dessa kontroller har till uppgift att lägga till en liten bit html i svaret. Varje gång en serverbaserad kontroll placeras i sidan, lägger ASP.NET till en instans av kontrollen i ett kontrollträd som sidan håller i minnet. Kontrollträdet avslöjar att varje element innesluts i en av dessa

Kapitel 3 Sidrenderingsmodellen 67 serverbaserade kontroller till och med titeltexten som verkar flyta omkring högst upp i sidan. Sidans renderingsmodell För att förstå hur ASP.NET:s renderingsmodell fungerar, ska vi köra sidan igen fast denna gång slår vi på spårningsmekanismen. Vi ska ta en närmare titt på spårning när vi går igenom ASP.NET:s diagnostikfunktioner. För tillfället räcker det med insikten att ASP.NET dumpar anropets och svarets fullständiga innehåll om attributet Trace ställs in på true. Så här ser sidanvisningen ut med spårning aktiverat: <% Page Language=C# trace=true %> Bild 3-3 visar hur sidan ser ut med spårning aktiverat. Bild 3-3 Aspx-filen från Lista 3-3 i Internet Explorer. Om du granskar den råa text som genereras av svaret (genom att välja Visa Källa i Internet Explorer), kommer du att se att ASP.NET skickar ut ganska ordinär html-kod. Lista 3-4 <h2> Sida i ASP.NET </h2>

68 ASP.NET 2.0 steg för steg <form name="form1" method="post" action="bunchofcontrols.aspx" id="form1"> <div> <input type="hidden" name=" VIEWSTATE" id=" VIEWSTATE" value="/wepdwullteyodmxmzcwnjapzbycagepzbycagupegqpfgrmagecagidfgq QBQZQb3N0IDEFBlBvc3QgMWcQBQZQb3N0IDIFBlBvc3QgMmcQBQZQb3N0IDMFBlB vc3qgm2cqbqzqb3n0idqfblbvc3qgngdkzgtfwkjjfemh9txfewzbs0tnb/7uuq= =" /> </div> <span>skriv i mig</span> <input name="textinfo" type="text" id="textinfo" /> <BR> <select name="ddl" id="ddl"> <option value="post 1">Post 1</option> <option value="post 2">Post 2</option> <option value="post 3">Post 3</option> <option value="post 4">Post 4</option> </select> <BR> <input type="submit" name="pressme" value="klicka på mig!" id="pressme" /> </form> Som du ser, finns det inga attribut av typen runat=server i den uppritade sidan. Det beror på att attributet runat=server används till att tala om för ASP.NET hur sidans kontrollträd ska byggas upp. Sidans kontrollträd När egenskapen Trace aktiverats, matar ASP.NET ut massvis med information i form av en sidspårning. Om du rullar ner en liten bit, kan du se att en del av spårningen består av sidans kontrollträd. Bild 3-4 visar hur spårningen av föregående sida ser ut, med fokus på kontrollträdet.

Kapitel 3 Sidrenderingsmodellen 69 Bild 3-4 ASP.NET-sidans kontrollträd visas i sidspårningen. Högst upp i spårningen av kontrollträdet finns en post med namnet Page. Detta är i själva verket objektet Web.UI.Page som körs i minnet. Under den finns det en hel drös med poster. Du känner säkert igen namnen på några av dem från ASP.NET-källkoden. Lägg märke till posterna Form1, textinfo och pressme. Dessa namn är tagna direkt från den ursprungliga aspx-filen. Det som händer är att ASP.NET bryter ner sidrenderingsarkitekturen till små, lätthanterliga bitar. Varje post i listan ovan härstammar från klassen System.Web.UI.Control. När System.Web.UI.Control vill rita upp sidan, går den helt enkelt igenom kontrollträdet och ber varje kontroll att rita upp sig själv. Till exempel, när ASP.NET:s körningsmodul ber den serverbaserade kontrollen TextBox att rita upp sig själv, lägger TextBox till följande html-kod i den utdataström som skickas till webbläsaren: <input name= textinfo type= text id= textinfo /> Detta fungerar på samma sätt med andra kontroller. Till exempel ansvarar kombinationsrutan DropDownList för att skicka ut taggarna select och option (option representerar den samling poster som innesluts i kombinationsrutan).

70 ASP.NET 2.0 steg för steg <select name="ddl" id="ddl"> <option value="post 1">Post 1</option> <option value="post 2">Post 2</option> <option value="post 3">Post 3</option> <option value="post 4">Post 4</option> </select> När du nu förstår hur dessa taggar fungerar, ska vi se hur man hanterar dem i Visual Studio. Lägga till kontroller med Visual Studio Visual Studio (i samarbete med ASP.NET) är väldigt bra på att dölja webbutvecklingens verkliga natur från utvecklaren. Som vi sett i tidigare kapitel, har webbutvecklingen sina rötter i sjuttiotalets terminalstordator-arkitektur. Numera är dock terminalen en sofistikerad webbläsare, beräkningsplattformen en webbserver (eller kanske en webbfarm), och användarna finns över hela världen. När en klient tar emot ett svar från en server får den egentligen inget annat än en stillbild av serverns tillstånd. Detta beror på att webbanvändargränssnittet är uppbyggt av ett märkspråk som skickas över ett anslutningslöst protokoll. När man bygger webbtillämpningar med Visual Studio, känns det nästan som att man utvecklar ett skrivbordsbaserat program. Använder man Visual Studio, behöver man inte lägga ner så mycket tid på att skriva ASP-kod. Designern är ett utmärkt verktyg för att visuellt designa ett webbaserat användargränssnitt. Bygga en sida med Visual Studio För att se hur detta går till, ska vi utveckla en enkel sida som använder serverbaserade kontroller. Sidan kommer ungefär att se ut som de sidor vi tidigare jobbat med. 1. Skapa en webbsida för att laborera med kontroller. Använd Visual Studio till att skapa en ny webbplats (File New Web Site). Döp webbplatsen till ControlORama. 2. Använd designern. Visual Studio visar default.aspx. I designläget växlar du till designvyn, se nedan.

Kapitel 3 Sidrenderingsmodellen 71 Den ASP.NET-kod som genereras av Visual Studio innehåller en htmltagg av typen <div> i sidans kropp. Om du skriver in lite text i designvyn, kommer du att se lite text högst upp i sidan. Följande bild visar hur designvyn ser ut.

72 ASP.NET 2.0 steg för steg För att redigera sidans textformat måste du visa sidans egenskaper. Markera texten, högerklicka på den och välj Properties på menyn. Därefter markerar du egenskapen Style i dialogrutan Properties. Du kommer att se en liten knapp med tre punkter ( ) i fältet Property. Klicka på knappen för att öppna dialogrutan Style Builder. Style Builder ställer in attributen för taggen <div>; här kan du ange hur texten ska visas. Följande bild visar hur dialogrutan Style Builder ser ut.

Kapitel 3 Sidrenderingsmodellen 73 3. Öppna verktygslådan. Därefter lägger du till en etikett. Flytta pekaren till fliken Toolbox, i Visual Studios vänstra sida. Detta kommer att öppna verktygslådan enligt bilden nedan:

74 ASP.NET 2.0 steg för steg 4. Lägg till etiketten. Dra ut en etikett (label) och släpp den på sidan. Se nedan:

Kapitel 3 Sidrenderingsmodellen 75 5. Redigera etikettens innehåll. För att redigera etikettens innehåll, måste kontrollens egenskaper visas. Kan du inte se dem, högerklickar du på etiketten och väljer Properties på menyn. Följande bild visar egenskapsfönstret:

76 ASP.NET 2.0 steg för steg Du kan nu manipulera etikettens utseende efter önskemål. Exemplets etikett använder teckensnittet Times New Roman, och texten Skriv i mig. 6. Lägg till en textruta. Härnäst klickar du på en textruta (TextBox) och släpper den bredvid etiketten. 7. Lägg till en kombinationsruta. Lägg till en kombinationsruta genom att klicka på DropDownList och släppa den på sidan. Nedanstående bild visar hur kombinationsrutan ser ut i designern. Observera menyn för redigering av datakälla och för att lägga till poster.

Kapitel 3 Sidrenderingsmodellen 77 Så snart kontrollen har placerats i sidan, ger Visual Studio dig möjlighet att lägga till poster i kombinationsrutan. Välj Edit Items på den lokala menyn. Dialogrutan ListItem Collection Editor visas, se bild:

78 ASP.NET 2.0 steg för steg Varje gång du klickar på knappen Add, lägger ListItem Collection Editor till en ny post i kombinationsrutans samling. Du kan redigera det namn som visas (egenskapen Text); du kan lägga till ett motsvarande värde i egenskapen Value. Till exempel, i en tillämpning för att hålla reda på inventarier, kanske man vill inkludera produktnamn som Text-egenskap och en affärsspecifik produktkod i Value-fältet. Bägge delar av posten går att hämta under körning. Förse kombinationsrutan med flera poster. 8. Lägg till en knapp i sidan. Detta gör du genom att klicka på en knapp (Button) i verktygslådan och släppa den på sidan. Följande bild visar hur kontrollen ser ut. Förse knappen med meningsfull text genom att redigera egenskapen Text. Innan vi går vidare ska vi ta en titt på den källkod som genererats av Visual Studio. Utöver en etikett, en textruta, en kombinationsruta och en knapp, har Visual Studio lagt till fyra nya medlemsvariabler i koden. Innehållet i aspx-filen (inuti taggen form) ser nu ut ungefär som i Lista 3-5.

Kapitel 3 Sidrenderingsmodellen 79 Lista 3-5 <form id="form1" runat="server"> <div> En sida i Visual Studio<br /> <asp:label ID="Label1" runat="server" Text="Skriv i mig" Font-Names="Times New Roman" FontSize= Small > </asp:label> <asp:textbox ID="TextBox1" runat="server"></asp:textbox> <br /> <asp:dropdownlist ID="DropDownList1" runat="server"> <asp:listitem>post 1</asp:ListItem> <asp:listitem>post 2</asp:ListItem> <asp:listitem>post 3</asp:ListItem> <asp:listitem>post 4</asp:ListItem> </asp:dropdownlist><br /> <asp:button ID="Button1" runat="server" Text="Klicka på mig" /> </div> </form> Notera att varje ASP.NET-tagg som körs på servern förses med ett IDattribut. Detta är det attribut som identifierar kontrollen under exekveringen. Vi kommer att använda oss av den inom kort. 9. Förse knappen med en händelsehanterare. Till sist, för att knappen ska göra något, måste du lägga till en händelsehanterare i sidan så att den svarar när du klickar på knappen. Det lättaste sättet är att dubbelklicka på knappen i designläget. Visual Studio genererar då en funktion som hanterar knapptryckningen, och visar denna kod i källkodsfönstret. Här kan du lägga till kod som utför något när knappen trycks ner. Följande bild visar hur koden ser ut i kodredigeraren.

80 ASP.NET 2.0 steg för steg Den kod som visas ovan svarar på knapptryckningen genom att skicka text till utdataströmmen via objektet Response. Den text som kommer genom Response.Write är den första text klientens webbläsare ser, och kommer därför att visas högst upp i sidan. Lägg märke till att Response använder medlemsvariabeln från TextBox1 i sidans klass, vilket visar att kontrollerna finns tillgängliga under körningen. Så här ser sidan ut i klientens webbläsare:

Kapitel 3 Sidrenderingsmodellen 81 För att testa sidans kontroller surfar du till den genom att välja Debug Start Without Debugging på huvudmenyn. Layoutöverväganden När du byggde din sida kanske du märkte att layouten flödade. Det vill säga, varje gång du släppte en kontroll på sidan, tvingade designern den på plats bredvid den tidigare kontrollen. Om du har arbetat med tidigare versioner av Visual Studio, märker du säkert att detta är något nytt. Visual Studio 2003 var den första versionen som använde absolut positionering för element i en sida (vilket är vad man är van vid om man utvecklat rika klienter eller standardprogram i Windows). För att ändra layoutalternativen för en webbsida i Visual Studio 2005, väljer du Layout Position Auto-position Options. Följande bild visar dialogrutan för positioneringsalternativ.

82 ASP.NET 2.0 steg för steg Aktiverar du absolut positionering placerar Visual Studio ut dina kontroller där du vill ha dem, istället för att begränsa dig till en flödeslayout. När absolut positionering är aktiverat, lägger Visual Studio till positioneringsalternativ i kontrollernas egenskaper när de placeras ut på sidan. Sammanfattning Klassen System.Web.UI.Page innehåller en samling serverbaserade kontroller. Allt som tar sig fram till klientens webbläsare genererades på något sätt av en serverbaserad kontroll. Till och med den text som finns i sidan renderades med hjälp av en LiteralControl. När ASP.NET:s körningsmodul kompilerar en sida, skannar den aspx-filen efter taggar som säger runat=server och lägger till en medlemsvariabel som representerar den kontrollen i sidans kontrollträd. Allting paketeras som kontroller när ASP.NET hittar text i sidan, paketeras den med en LiteralControl. När det är dags att rendera sidan, går ASP.NET igenom kontrollistan och ber varje kontroll att rendera sig själv. Visual Studio innehåller en användbar designer, med vilken man kan dra och släppa kontroller på en sida. Utvecklingsmiljön får det att kännas som om man utvecklar en vanlig skrivbordstillämpning, trots att användargränssnittet representeras av html som skickas över http. I nästa kapitel ska vi gå igenom anpassade kontroller.

Kapitel 3 Sidrenderingsmodellen 83 Kapitel 3 snabbreferens För att Växla mellan aspx-källkod och designläget Lägga till en serverbaserad kontroll i en sida Ändra en utplacerad kontrolls egenskaper Slå på spårning Ändra storleken på en serverbaserad kontroll Lägga till en hanterare för en kontrolls standardhändelse Lägga till en hanterare för en kontrolls händelse (förutom standardhändelsen) Gör du så här Flikarna Design och Source finns i redigeringsfönstrets nedre, vänstra del Öppna verktygslådan genom att välja View Toolbox Klicka på kontrollen i verktygslådan Dra kontrollen till sidan Kontrollera att sidredigeraren är i designläget (Design mode) Markera den kontroll vars egenskaper du vill ändra Välj den egenskap som ska ändras i egenskapsfönstret I källkodsläget redigerar du anvisningen Page så att den lyder trace=true Eller Välj elementet från kombinationsrutan högst upp i egenskapsfönstret Ställ in egenskapen Trace till True Markera kontrollen genom att klicka på den Klicka på något av de handtag som finns runt kontrollen. Håll ner musknappen och dra i kontrollen tills den fått rätt storlek Dubbelklicka på den kontroll som ska hantera händelsen Klicka på knappen Events (blixten) i dialogrutan Properties Välj den händelse du vill lägga till

84 ASP.NET 2.0 steg för steg Ändra sidans layoutkaraktär Dubbelklicka i den högra panelen bredvid egenskapen i dialogrutan Properties. Visual Studio genererar då ett namn till hanteraren ELLER Skriv in ett namn för hanteraren Visual Studio lägger till en hanterare Välj Layout på huvudmenyn Välj mellan Absolute, Static, Relative eller något av de mer detaljerade alternativen i dialogrutan Auto-position Options.