Grundkurs asp.net del 2 - webforms
Förord
I det förra kapitlet tittade vi väldigt kort på vad .NET är för något, hur det är uppbyggt och vad ASP+ har för roll i detta. Vi konstaterade att ASP+ är, enkelt sett, ett antal klasser i .NET ramverket. Vi ska nu titta vidare på vissa av dessa klasser, och se vad man kan göra med ASP+.
Web Forms
Av dessa klasser som bildar ASP+ finns det väldigt olika varianter. Det finns de som hanterar säkerhet, vissa sköter kommunikationen (som t ex Request och Response) och sen finns det UI-klasserna. Det är dessa som sköter presentationen av ASP+ applikationen. Applikationen presenteras i form av webbsidor, vilka i ASP+ kallas för Web Forms. Dessa kan jämföras med WinForms, som är vidareutvecklingen på Visual Basics formulär. Precis som WinForms och VB6 formulär så är Web Forms kompilerade program med funktionalitet att visa upp ett gränssnitt. Ett Web Form är alltså inte en HTML-sida med lite skriptkod för att påverka utseendet på den, utan ett program som skapar en HTML-sida vilken skickas till klienten (besökaren). Detta innebär dessutom att man kan få en fullständig separation mellan kod och gränssnitt. Detta ska vi se mer på i ett senare kapitel. Till att börja med kommer vi dock inte att utnyttja detta.I kapitel 1 visade jag en enkel 'Hello, World'-sida. Denna bestod inte av något annat än HTML och lite ASP+ kod som skrev ut Hello, World. Nu ska vi gå vidare och börja titta på det viktigaste på ett Web Form, nämligen serverkontroller. Serverkontroller används för att skapa gränssnittet på ett Web Form. De skapar HTML vilken sedan visas i klientens browser, och kan dessutom skapa olika HTML för olika klienter. De innehåller även funktionalitet för att bevara tillstånd (eng. state) och för att skapa händelser på servern beroende på händelser som inträffar hos klienten. Slutligen är de, precis som alla andra klasser i NET, enkelt utbyggbara. Om de inte fungerar som man önskar så är det bara att ärva in dem i en egen kontroll och ändra det man vill.
- HTML kontroller: Dessa finns under System.Web.UI.HtmlControls och ärver alla (direkt eller indirekt) från klassen HtmlControl. Dessa är egentligen inget annat än vanliga HTML-taggar, med attributet runat="server". Detta gör att applikationen kommer att skapa en kontroll för taggen, vilken är fullt programmerbar på servern. Dessa har egentligen inget annat syfte än att göra det enkelt att migrera ASP-applikationer till ASP+, och jag kommer därför inte att prata mer om dem i denna kurs.
- Webbkontroller: Dessa finns under System.Web.UI.WebControls och ärver från WebControl. Vissa av dessa motsvarar vanliga formkontroller (t ex TextBox och Button), medan vissa har en högre nivå av abstraktion (t ex Calendar och DataGrid) och skapar mer än en HTML-tagg som output.
Webbkontroller
Webbkontroller innehåller mycket funktionalitet som gör det enkelt att utveckla med dem, bl a följande:- En konsekvent och enhetlig objektmodell. Basklassen WebControl har ett antal properties som är gemensamma för alla kontroller, t ex BackColor, Font, Enabled etc. Det innebär att alla webbkontroller har dessa properties (eftersom de ärver från WebControl).
- Automatisk igenkänning av browser. Webbkontroller skapar som sagt HTML som output till klienten. De innehåller dessutom funktionalitet för att automatiskt kontrollera vilken funktionalitet som stöds av klientbrowsern, och att skapa olika output för olika klienter. Mer om detta i kapitel 3.
- Databindning. Det finns flera kontroller, som t ex DataGrid, som kan användas för att visa datan i en datakälla, t ex en SQL Server databas eller en XML-fil.
I PDC Preview versionen av .NET/ASP+ medföljer det knappt 30 webbkontroller. Några fler kommer att tillkomma i den slutliga version 1, men inte så många. En är t ex en XML-kontroll, med funktionalitet att automatiskt visa en xml-fil tillsammans med ett xsl-style sheet. Dessa (blivande) drygt 30 kontroller kommer dock att följas av en storm 3-parts kontroller, av vilka flera kommer att vara påbyggnader/förbättringar av de som levereras med .NET.
För att skapa en webbkontroll på en ASP+ sida behöver man bara skriva den tagg som motsvarar kontrollen. Alla kontroller föregås av ett prefix, ett s k namespace, vilket visar vilken komponent som innehåller funktionaliteten för kontrollen. Alla webbkontroller som ingår i .NET som standard har prefixet asp. Andra prefix kan heta vad som helst, bara man beskriver vilken komponent det prefixet står för. Dessutom måste alla webbkontroller ha attributet runat med värdet "server" i sig, eftersom de ska skötas av ASP+ på servern. T ex skulle en webbkontroll för en textbox i ASP+ se ut så här:
Notera att taggen är korrekt avslutad. Eftersom det är XML som beskriver taggen så krävs det att man följer reglerna för korrekt formatterad XML, vilket i sin tur kräver att taggar avslutas. Det hade alltså även fungerat bra med
<%@ Register TagPrefix="hedgate" Namespace="Hedgate.CommonControls" %>
En enkel applikation
Nu är vi redo att skapa en ASP+ applikation. Vi ska skapa en inloggningssida till en site. Man ska logga in med användarnamn och lösenord, bägge måste fyllas i. Sidan ska posta till sig själv och kontrollera användarnamn/lösen. Om allt går bra (användarnamnet är foo och lösenordet är bar) så ska man meddelas om detta, annars ska man få ett felmeddelande samt få försöka igen. Tyvärr kan ni inte se detta 'in action', eftersom det skulle kräva en webbserver med .NET installerat (vilket jag ej har tillgång till på Internet), men vi kan åtminstone titta på koden och se vad den innehåller. Vi ska använda följande kontroller:- TextBox
För inmatning av användarnamn/lösenord - RequiredFieldValidator
Dessa kontroller 'kopplas till' andra kontroller och ser till att de fylls i på korrekt sätt - Button
En knapp för att skicka inloggningsuppgifter - Label
Ett fält på webbsidan för att skriva status till klienten
<%@ Page Language="VB" %>
<script runat="server">
Public Sub SubmitBtn_Click(Sender As Object, E As EventArgs)
If (Page.IsValid) Then
If (Request.Form("username")="foo" AND Request.Form("password")="bar") Then
status.Text = "OK"
Else
status.Text = "Fel användarnamn och/eller lösenord. Försök igen"
End If
End If
End Sub
</script>
ASP+ - inloggningssida
Logga in med användarnamn och lösenord
Låt oss gå genom koden. Vi hoppar över inledningen med koden så länge, och tittar istället på själva formuläret med webbkontrollerna. Först kommer en textbox för användarnamn. Denna har ljusgrå bakgrund med svart text. Mot denna ligger en RequiredFieldValidator kontroll kopplad. Detta innebär att om man försöker att skicka formuläret, utan att ha uppfyllt det villkor som kontrollen validerar med, så kommer den att skriva ut felmeddelandet som står i attributet ErrorMessage. Detta kommer att skrivas ut bredvid textboxen, eftersom valideringskontrollen är placerad där i detta fallet. Därefter kommer en textbox för lösenordet. På samma sätt har denna en valideringskontroll kopplad mot sig. Notera attributet Mode="Password", vilket gör att textboxen beter sig som en < input type="password"> tagg istället för en vanlig < input type="text">.
Sedan kommer en knapp för att skicka inloggningsinformationen och en label att skriva ut status på. Notera knappens OnClick-händelse. Detta är kopplingen till kodsnutten överst, den procedur som utför kontrollen av användarnamn/lösenord. Allt detta sker på servern, eftersom det är webbkontroller med runat="server" attribut, samt proceduren ligger i script-taggar med samma attribut. Det är alltså inte någon sorts JavaScript-hanterare som kör igång på klienten, utan 'riktig', kompilerad kod som exekveras på servern. En Button kontroll i ASP+ motsvarar en < input type="submit"> tagg i HTML. Det betyder att när man klickar på knappen så kommer formuläret att postas till servern, och där kommer knappens Click-händelse att inträffa.
Proceduren som hanterar denna Click-händelse är alltså den som kallats SubmitBtn_Click. Den kunde dock hetat vad som helst, eftersom den är 'sammankopplad' med vad den ska göra genom knappens OnClick-händelse, inte genom sitt namn. Det första denna procedur gör är att genomföra testet If (Page.IsValid) Then. Om alla valideringskontroller som finns på en sida (de två RequiredFieldValidator-kontrollerna i detta fallet) meddelar att det som de ska validera är OK så blir detta test sant. Om någon, eller alla, av dem meddelar något fel så blir testet falskt, i vilket fall proceduren avslutas. Annars går den vidare in och testar värdet på formvariablerna "username" och "password". I detta exemplet testas de mot två hårdkodade strängar, men de skulle lika gärna kunna testas mot t ex en databas genom ADO+.
Om dessa värden motsvarar de hårdkodade strängarna så ändras Text-attributet i Label kontrollen status (vilket är tomt när sidan laddas första gången) till strängen "OK", annars till ett meddelande som beskriver att man fyllt i fel.
Sammanfattning kapitel 2
I kapitel 2 har vi sett att en Web Form är byggs upp med serverkontroller. Dessa är olika kontroller vilka kör på servern, och resulterar i att HTML-kod skickas till klienten. Denna HTML-kod kan vara olika beroende på vad som inträffar under exekveringen på servern, vilken typ av klient det är samt vilka attribut dessa kontroller har. För att verkligen poängtera det, klienternas browsers får aldrig något annat än HTML, JavaScript (om de stöder det) och annan 'vanlig' teknik de stöder. En < asp:TextBox Mode="Password" runat="server" /> kontroll i ASP+ sidan resulterar i en < input type="password"> tagg i den HTML output som skickas till klientens browser.I kapitel 3 ska vi titta mer på vilka övriga webbkontroller som finns och vad man kan använda dem till. Vi ska också se exempel på hur olika output kan skapas för olika klienter.
Kursen är även publicerad på Hedgate.NET.
Var denna artikeln användbar?
Om du gör någon intressant som grund av detta material så skicka gärna det med ett mail eller bifoga en länk till mig så presenterar jag detta som ytterligare exempelfiler för kursen. Om detta innehållet är felaktigt eller du lärt dig fler finesser så skriv gärna en rad eller varför inte en egen kurs baserat på dina erfarenheter. Sänd gärna in kommentarer till denna kurs./Christoffer Hedgate
0 Kommentarer