2. Lage ASP.NET sider

Transkript

1 Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Lage ASP.NET sider Grethe Sandstrak Lærestoffet er utviklet for faget LV199D Web-programmering med ASP.NET 2. Lage ASP.NET sider Resymé: I denne leksjonen skal vi lage enkle ASP.NET sider. Innhold 2.1. INNLEDNING LAGE ASP.NET SIDER Web-skjema ASP.NET kode Visning av gjestebok i nettleser Viewstate VISUAL BASIC.NET OG C#.NET C#.NET Visual Basic.NET En minikalkulator i ASP.NET Innledning I denne leksjonen skal vi se nærmere på oppbyggingen av en ASP.NET side. Vi ser på de enkelte delene en slik side består av og hvordan vi skiller mellom HTML-kode og ASP.NET kode. Videre ser vi på hva de enkelte kodebitene betyr og hva som foregår i kulissene. Til sist i leksjonen skal vi se litt på programmeringsspråkene C#.NET og Visual Basic.NET som er de vi forholder oss til i dette kurset Lage ASP.NET sider I første leksjon presenterte vi et par enkle eksempler på ASP.NET kode. Vi skal nå gå inn å se litt nærmere på en ASP.NET side og hvilke deler denne består av. Under følger et eksempel på en ASP.NET side for en temporær gjestebok gjestebok.aspx. Siden fungerer slik at en bruker kan legge inn flere innlegg som adskilles med en horisontallinje (<hr>). Gjesteboken er ikke så veldig nyttig iom at den er temporær: dvs at den

2 Lage ASP.NET sider side 2 av 14 virker kun i en og samme nettleser (har ingen evne til å kommunisere med andre brukere/nettlesere) og innholdet forsvinner idet du stenger nettleseren. Slik ser fila gjestebok.aspx ut: VB-kode: C#-kode:

3 Lage ASP.NET sider side 3 av 14 Vi ser at det er mange likheter med en vanlig HTML-side som inneholder et skjema. La oss først se på den aller første linjen i koden: <%@ Page Language = "VB" %> Dette er et Sidedirektiv som lar deg inkludere spesielle instruksjoner til ASP.NET om hvordan denne siden skal behandles. I dette tilfellet spesifiserer vi hvilket programmeringsspråk som vil bli benyttet som standard på denne siden. Vi kan her velge bla mellom C# og VB.NET Web-skjema Vi kjenner igjen elementene fra HTML-skjema, <form>-tag og opprettelse av kontroller en tekstboks, en knapp og et ledetekstfelt. Legg merke til at vi i form-taggen ikke har spesifisert noen metode eller handling slik vi gjør i for eksempel ASP-sider, for å fortelle skjemaet hvor den skal sende/behandle inndataene. <form runat = "server"> Når dette ikke er spesifisert kalles samme side på nytt skjemaet sender info til seg selv (postback). Dermed kan vi legge inn ASP.NET kode som behandle inndataene. Et nytt element i form-taggen er runat = server, denne setningen forteller ASP.NET at du vil tjeneren skal holde oversikten over skjemaet, vi kaller dette for et Web-skjema. Om setningen utelates vil skjemaet oppføre seg som et vanlig HTML-skjema. Merk at du ikke kan skrive runat = client da vil du få en feilmelding Parser error message: the runat attribute can only have the value server. Vil du lage vanlig HTMLskjema utelater du altså bare runat-setningen.vi skal komme tilbake til mer om web-skjema i leksjon 4. I Web-skjemaet (mellom <form> og </form>-taggene blir det opprettet fire web-kontroller: En vanlig tekstboks, en tekstboks over flere linjer(multiline) tilsvarer textarea i HTML, en ledetekst og en trykknapp. Alle kontrollene er merket med attributtet runat = server. En vanlig nybegynnerfeil er å glemme denne runat-setningen, da vil disse bli sendt direkte tilbake til klienten i stedet for å bli behandlet korrekt av tjeneren. I og med at nettlesere ignorerer alle tagger de ikke kjenner, så vil de ikke bli vist til brukeren. <asp:textbox id = "tbnavn" runat = "server"/> <asp:textbox id = "tbkommentarer" TextMode = "multiline" rows=5 runat="server"/> <asp:button id="btknapp" Text="Legg til kommentar" OnClick="knappe_klikk" runat ="server" /> <asp:label id = "lblinnlegg" runat = "server"/> Vi ser likhetene til tilsvarende HTML-kontroller (<input name= tbnavn type = text id = tbnavn >). Hver enkelt web-kontroll har sin egen unike id, slik at vi kan referere til den andre steder i ASP.NET siden. Legg merke til hvordan vi gir disse navn: Alle textbokser har navn som starter med tb etterfulgt av et beskrivende navn for hva den inneholder, for eksempel tbnavn. Knapper har navn som starter bt og ledetekster har navn som starter med lbl. Merk at vi følger lærebokas notasjon, kanskje har du lært noe annet tidligere?

4 Lage ASP.NET sider side 4 av 14 Når det gjelder knappen som er opprettet så har den et ekstra attributt: OnClick = "knappe_klikk". Dette ligner en del på klientside script for de som har kjennskap til det. Knappen har en hendelse (event) ved navn OnClick som inntrer når knappen klikkes på. Ved klikk på knappen vil ASP.NET kjøre prosedyren knappe_klikk. I motsetning til klientside script så er det tjeneren som behandler disse hendelsene og avgjør hva som skal gjøres. En hendelse kan også være et tastetrykk eller et menyvalg. Merk at ASP.NET er nøye på at tagger avsluttes: som for eksempel <form> </form>. Det samme gjelder når du oppretter kontroller: <asp:textbox id = "tbnavn" runat = "server"/> (lovlig kortform for : <asp:textbox id = "tbnavn" runat = "server"> </asp:textbox> ASP.NET kode Det er to måter å lage ASP.NET kode, enten i en kode-deklarasjons blokk eller i en kodeoversettelsesblokk (eng: code render block). På denne måten er det enkelt å se hva som er ASP.NET kode og hva som HTML. Kode-deklarasjons blokk En deklarsjonsblokk er i motsetning til ren HTML-kode, ikke avgrenset til den aktuelle siden, den inneholder også programkode som skal kjøres på tjeneren. Deklarasjonsblokka er kompilert til maskinkode, kompilert kode blir utført raskere og mer stabilt enn om du skulle bruke kode som tolkes under kjøring, som for eksempel kode-oversettelses- blokker (code render, forklart lenger ned i teksten). La oss se på en slik deklarasjonsblokk: Du har vært vant til å bruke script-taggen til klientside scripting. Ved å legge til setningen runat = server inni script-taggen sier vi at det er tjeneren som skal kjøre scriptet. <script runat = "server"> </script> Dette er en deklarasjons blokk. Programkoden inni scriptet prosesseres dynamisk koden kompileres og kjøres av tjeneren. Inni script-taggen finner vi metoden knappe_klikk. Hver gang denne metoden kalles vil innholdet i ledetekstfeltet lblinnlegg oppdateres. Feltet oppdateres slik at først skrives det en horisontal linje(<hr>), deretter kommer innholdet i tekstboksene tbnavn og tbkommentar med en blank linje (<p>) mellom seg, til sist kommer eventuelle tidligere innlegg (innholdet av lblinnlegg). VB sub knappe_klikk(obj as object, e as eventargs) lblinnlegg.text = "<hr> +tbnavn.text+"<p>"+tbkommentarer.text+lblinnlegg.text end sub C# protected void knappe_klikk(object sender, EventArgs e) { lblinnlegg.text = "<hr>"+ tbnavn.text+"<p>"+ tbkommentar.text+lblinnlegg.text; }

5 Lage ASP.NET sider side 5 av 14 Kode- oversettelsesblokk En oversettelsesblokk er som nevnt over, avgrenset til å gjelde bare på denne siden. Den omsluttes av taggene: <% %>. I gjestebok-eksemplet er følgende linje med: VB <% Response.Write("Grethe's Temporære gjestebok! ") %> Denne setningen sier at vi har et objekt kalt Response, og vi bruker dette objektet sin metode Write for å skrive ut tekst i nettleseren. Det er fullt mulig å legge inn HTML-tagger i teksten vi ønsker å skrive ut, for eksempel slik: C# <% Response.Write("<b>Grethe's Temporære gjestebok! </b> "); %> Slike oversettelsesblokker kan plasseres innimellom vanlig HTML-kode hvor det er hensiktsmessig. Response og andre objekter blir mer inngående forklart i leksjon 3. Hva er best? Vi har altså to ulike metoder å skrive ASP.NET kode på i en ASP.NET side i en deklarasjonsblokk eller i en oversettelsesblokk. Den første metoden er klart å foretrekke, fordi den er raskere (kompilert kode) og eliminerer såkalt spagetti-programmering, som kan oppstå om vi dytter inn oversettelsesblokker overalt i ASP.NET siden. Det vi må tenke på ved utvikling av en ASP.NET side, er at det skal være lett å skille mellom HTML-kode og ASP.NET kode. Det skal være enkelt å rette opp eventuelle feil og legge til nye elementer. Dette kan oppnås ved å bruke deklarasjonsblokker i størst mulig grad. Hva skjer i kulissene? I forrige leksjon ble det vist en figur over hva som skjer på tjenersiden når den mottar en forespørsel fra en klient. Vi gjør denne litt mer detaljert for å vise hva ASP.NET gjør med forespørselen, se Figur 2-1.

6 Lage ASP.NET sider side 6 av 14 Figur 2-1 Hva gjør ASP.NET med forespørsler Første gang en klient sender forespørsel til tjeneren om å vise en side, vil ASP.NET kompilere nødvendig kode (alle deklarasjonsblokker), når det er gjort går ASP.NET videre og behandler eventuelle hendelser og kjører programkoden. Til sist oversettes resultatet av kjøringa til HTML-kode (for eksempel <asp:textbox> gjøres om til en HTML- inputboks), som da returneres til klienten via web-tjeneren (IIS). Du har sikkert merket at når du laster en side første gang, så oppstår det en liten forsinkelse, men når du kommer tilbake for andre gang går det en del raskere. Dette er nettopp fordi at koden kompileres kun ved første visning. Selv om det oppstår en liten forsinkelse første gang siden vises, vil man få økt ytelse ved senere forespørsler, så lenge koden for siden ikke er endret da må den kompileres på nytt, selv om endringene som er gjort er minimale Visning av gjestebok i nettleser Figur 2-2 viser hvordan fila gjestebok.aspx presenteres i en nettleser første gang og etter å ha lagt til to nye innlegg.

7 Lage ASP.NET sider side 7 av 14 Figur 2-2 Eksempel på kjøring av gjestebok.aspx Viewstate I utgangspunktet er http en tilstandsløs protokoll, det betyr at hver forespørsel til tjeneren er uavhengig av alle andre. Dette innebærer et problem for programmereren, for med en gang klienten sender en ny forespørsel sendes informasjon til tjeneren for deretter å glemmes. Ofte er det beholv for å huske denne informasjonen og dette kan gjøres på flere måter: Cookies Sesjoner Skjulte felt (hidden) I ASP.NET finnes det et innebygd skjult felt som heter Viewstate. Dette feltet beskriver hvordan et objekt ser ut i et bestemt øyeblikk. Hvis vi ser på gjestebok eksemplet og bildet til høyre i Figur 2-2, så vil viewstate inneholde all informasjon som klienten har skrevet inn i de ulike kontrollene: tekstboksen tbnavn inneholder teksten Svend, knappen btknapp indikerer om den er trykket på eller ikke, osv. Hvis du fyller ut et HTML-skjema og kommer tilbake til det senere, så er sjansen stor for at de feltene du fylte ut er tomme, dette fordi at disse ikke har tillatelse til å overvåke viewstate eller lignende informasjon. ASP.NET holder automatisk oversikten over viewstate til alle elementer som inneholder attributtet runat = server. Det lages da et skjult felt (hidden) som inneholder de aktuelle verdiene. Vi ser litt næremere på gjestebokfila vi har laget i denne leksjonen. Vi har åpnet den

8 Lage ASP.NET sider side 8 av 14 i en nettleser og skrevet inn verdiene som vist til høyre i Figur 2-2. Deretter velger vi Vis kilde (view source) i Internet Explorer for å se på koden slik den fremstår for klienten: HTML <html><title>grethes temporære gjestebok</title> <body> Grethe's Temporære gjestebok! <form name="_ctl0" method="post" action="gjestebok.aspx" id="_ctl0"> <input type="hidden" name=" VIEWSTATE" value="ddwxote0ndy4ode2o3q8o2w8atwwpjs+o2w8ddw7bdxppdc+oz47bdx0pha8cdxspfrlehq7pjts PFw8aHJcPlN2ZW5kXDxwXD5KYSwgaWtrZSBzYW50Pw0KXDxoclw+R3JldGhlXDxwXD5EZXR0ZSB2YXIgamF tbwvuigfduhkhdqo7pj47pjs7pjs+pjs+pjs+hx8avt7pdrbkggy1f7hzudm+aiy=" /> <B>Brukernavn:</B> <input name="tbnavn" type="text" value="svend" id="tbnavn" /> <p> <b>kommentarer:</b> <br> <textarea name="tbkommentarer" rows="5" id="tbkommentarer">ja, ikke sant? </textarea> <br> <input type="submit" name="btknapp" value="legg til kommentar" id="btknapp" /> <span id="lblinnlegg"><hr>svend<p>ja, ikke sant? <hr>grethe<p>dette var jammen gã y! </span> </form> </body></html> Vi ser at dette ikke den samme koden som vi opprinnelig skrev inn. For det første er deklarasjonsblokka er borte (<script>) dette var som vi husker kode som kompileres og kjøres på tjeneren. Videre legger vi merke til at <form> - blokka har endret seg en del. Der vi skrev: <Form runat = server > står det nå: <form name="_ctl0" method="post" action="gjestebok.aspx" id="_ctl0"> Merk: dersom du setter id-attributtet til formen slik vi har vist i C#-koden, <Form id= form1 runat = server >, så vil vi name og id vises som form1. En annen forandring er at ASP.NET kontrollene er gjort om til HTML-kontroller, for eksempel linjen: <asp:textbox id = "tbkommentarer" TextMode = "multiline" rows=5 runat = "server" /> Er nå blitt til: <textarea name="tbkommentarer" rows="5" id="tbkommentarer">ja,ikke sant? </textarea> Det som var en multiline tekstboks i ASP.NET koden, er nå et tekstområde + at innholdet i tekstfeltet er blitt en del av siden (teksten: Ja, ikke sant? ). Hvordan er dette mulig? Som nevnt over, inneholder det noe kryptiske, skjulte feltet viewstate alle aktuelle verdier for en side. Dette feltet er en del av klientens forespørsel til tjeneren og blir oppdateret med eventuelle nye verdier av tjeneren før det returneres som en del av responsen til klienten.

9 Lage ASP.NET sider side 9 av 14 <input type="hidden" name=" VIEWSTATE" value="ddwxote0ndy4ode2o3q8o2w8atwwpjs+o2w8ddw7bdxppdc+oz47bdx0pha8cdxspfrlehq7pjts PFw8aHJcPlN2ZW5kXDxwXD5KYSwgaWtrZSBzYW50Pw0KXDxoclw+R3JldGhlXDxwXD5EZXR0ZSB2YXIgamF tbwvuigfduhkhdqo7pj47pjs7pjs+pjs+pjs+hx8avt7pdrbkggy1f7hzudm+aiy=" /> Viewstate vil inneholde alle de inndata som er skrevet inn i de ulike feltene ved postback forespørsel (altså ikke første gang siden lastes, og bare hvis siden kaller seg selv). Hvis du forlater gjesteboken og besøker en annen side for eksempel for så å gå tilbake til gjesteboken, ved å trykke på Tilbake (Back)-knappen og deretter oppdater/refresh i nettleseren, så vil de siste inndata du skrev huskes. Merk at hvis du derimot skriver inn adressen til siden (url) på nytt, så blir det oppfattet som en ny sesjon og du får opp bare blanke felter. Denne funksjonaliteten ved ASP.NET er spesielt gunstig på web-sider hvor en bruker skal fylle ut et registrerings skjema med flere obligatoriske felter. Hvis en bruker forsøker å sende et skjema uten å ha fylt ut alle nødvendige felt, ønsker vi å skrive en feilmelding til vedkommende for så å presentere skjema på nytt med de data brukeren allerede har skrevet inn. Å la brukeren være nødt til å skrive inn alle data på nytt når feil oppstår, kan være en stor kilde til frustrasjon for brukeren og det ønsker vi å unngå Visual Basic.NET og C#.NET I dette kurset er det mulig å bruke enten C# eller VB som programmeringsspråk. Under lesing i læreboka vær obs på at programeksemplene er laget i både i VB.NET og C# C#.NET C# (uttales C- sharp) er et programmeringsspråk i C-familien. C# har sin bakgrunn i C og C++ og prøver å kombinere det beste fra C, C++, Java og også MS Visual Basic. Programmeringsspråket er designet spesielt for.net plattformen av Microsoft. Dette for å gjøre det enklere for programmerere å ta i bruk denne plattformen. For de som har programmert i C++ eller Java før, vil man se likhetene mellom de ulike programmeringsspråkene og kunne dra veksler på tidligere erfaringer når man setter seg inn C#. C# er et hendelsesstyrt, objektorientert og visuelt programmeringsspråk Visual Basic.NET VB.NET er et programmeringsspråk som har vært i bruk i mange år. Første versjon av Visual Basic kom 1991 og er etterfølgeren til Basic. Basic står for Beginners All-purpose Symbolic Instruction Code. Bakgrunnen for å lage språket var å gjøre det lettere for nybegynnere å programmere. VB.NET er siste utvidelse av språket og støttes fult ut av.net rammeverk og CLR. Forholdsvis mange ASP.NET utviklere benytter seg av dette språket og det er enkelt å lære. Frisk gjerne opp kunnskapen om VB.NET (variabler, datatyper, tabeller, operatorer, kontrollstrukturer, funksjoner, klasser, arv) og ta deretter en titt på de to neste eksemplene i leksjonen et lite og enkelt eksempel og et litt større for å dekke litt flere temaer En minikalkulator i ASP.NET La oss se på et lite programeksempel fila Minikalkis.aspx. Vi ser at denne siden består kun av en deklarasjonsblokk (script) med VB.NET kode. Hver gang siden lastes kjøres

10 Lage ASP.NET sider side 10 av 14 programkoden. Det opprettes tre globale variabler, en tekststreng og to tall og inni metoden page_load skrives regnestykke med svar ut i nettleseren: VB <%@ Page Language = "VB" %> <script runat = "server"> Dim Tekst as String = "<b>velkommen til Grethes minikalkis :)</b><br /><br />" Dim A as integer = 2 Dim B as integer = 3 sub page_load(obj as object, e as eventargs) Response.Write(Tekst) Response.Write("Et lite regnestykke: ") Response.Write(A & " * " & B & " = " & A*B) end sub </script> <html><head><title>minikalkis</title></head> <body></body></html> C# <%@ Page Language = "C#" %> <script runat = "server"> String tekst = "<b>velkommen til Grethes minikalkis :)</b><br /><br />"; int a = 2; int b = 3; Protected Page_Load(object sender, EventArgs e) { Response.Write(Tekst); Response.Write("Et lite regnestykke: "); Response.Write(a + " * " + b + " = " + a*b); } </script> <html><head><title>minikalkis</title></head> <body></body></html> En klient som sender en forespørsel etter denne siden, vil motta følgende HTML-kode. Merk spesielt hvor Response.Write setningene havner hen i HTML-fila.: <b>velkommen til Grethes minikalkis :)</b><br /><br />Et lite regnestykke: 2 * 3 = 6 <html><head><title>minikalkis</title></head> <body></body></html> Dette resulterer i følgende visning i nettleser:

11 Lage ASP.NET sider side 11 av 14 Figur 2-3 Minikalkis enkel utgave Når det gjelder navnekonvensjon for variabler, så er en ofte brukt notasjon i VB.NET å bruke et prefiks som indikerer datatypen til den bestemte variabelen (læreboka følger denne standarden): For eksempel i eksemplet over så ville det stå: Dim strtekst as String = <b>hei</b> Dim inta as Integer = 2 Det er også viktig å gi variablene beskrivende navn slik at det er lett å huske hva de skal brukes til. Et siste punkt vi skal minne om er at det er ikke uten videre lov å blande tall og tekst i for eksempel et regnestykke. VB hjelper oss litt på vei her, men i C# må vi parse om teksten til tall. Vi utvider minikalkisen til å la klienten lese inn to tall fra tastaturet: Figur 2-4 Minikalkis med innlesing fra klient Ny utgave av fila minikalkis.aspx følger under. Legg merke følgende endringer: Metoden i Script-blokka har endret navn til Beregn_Knapp (kjøres dermed ikke hvergang siden lastes. Kun når knappen er trykket på.) Det er lagt til HTML-kode. VB <%@ Page Language = "VB" %> <script runat = "server">

12 Lage ASP.NET sider side 12 av 14 Dim A as integer Dim B as integer sub Beregn_Knapp(obj as object, e as eventargs) A = tbtall1.text her foregår automatisk parsing av tekst til tall B = tbtall2.text Response.Write("<p>Et lite regnestykke: ") Response.Write(A & " * " & B & " = " & A*B) end sub </script> <html><title>minikalkis</title> <body> <p><b>velkommen til Grethes minikalkis :)</b><br /> <form runat = "server"> Skriv inn tall 1: <asp:textbox id="tbtall1" runat = "server"/> <br /> Skriv inn tall 2: <asp:textbox id="tbtall2" runat = "server"/> <asp:button id="btberegn" Text = "Utfør beregning" OnClick= "Beregn_Knapp" runat = "server" /> </form> </body></html> C# <%@ Page Language = "C#" %> <script runat="server"> private int a; private int b; protected void Beregn_Knapp(object sender, EventArgs e) { a = int.parse(tbtall1.text); b = int.parse(tbtall2.text); Response.Write("<p>Et lite regnestykke: "); Response.Write(a + " * " + b + " = " + a * b + "<br />"); } </script> <html> <head><title>minikalkis</title></head> <body> <b>velkommen til Grethes minikalkis :)</b> <form id="form1" runat = "server"> Skriv inn tall 1: <asp:textbox id="tbtall1" runat = "server"/> <br /><br /> Skriv inn tall 2: <asp:textbox id="tbtall2" runat = "server"/><br /><br /> <asp:button id="btberegn" Text = "Utfør beregning" OnClick= "Beregn_Knapp" runat = "server" /> </form></body></html> La oss til sist lage et litt større eksempel med en mer intelligent kalkulator som kan regne med flere regnearter. Bruker får skrive inn to tall og regneart (+,-,* eller /). Ved å trykke på en

13 Lage ASP.NET sider side 13 av 14 knapp beregnes ønsket regnestykke. I Script-blokka foregår all beregning i en prosedyre. For å utføre selve beregningen er det laget en funksjon/metode Beregn som tar seg av dette. Merk at det ikke er tatt særlige hensyn i forhold til at bruker taster inn feil inndata. Det kastes et unntak ved inntasting av feil regneart dette unntaket fanges imidlertid ikke opp. Inntasting av ugyldige tall behandles ikke. Mer om unntakshåndtering senere i kurset. VB <%@ Page Language = "VB" %> <script runat = "server"> Dim A as integer Dim B as integer Dim Regneart as String Dim Sum as Double sub Beregn_Knapp(obj as object, e as eventargs) A = tbtall1.text B = tbtall2.text Regneart = tbregneart.text Sum = Beregn(A,B,Regneart) Response.Write("<p>Et lite regnestykke: ") Response.Write(A & " " & Regneart & " " & B & " = " & Sum) end sub function Beregn(A as integer, B as integer, Regneart as String) as Double Select Case Regneart Case "+" Return A+B Case "-" Return A-B Case "*" Return A*B Case "/" Return A/B Case Else Throw New ArithmeticException("Ugyldig regneart") End Select end function </script> C# <%@ Page Language="C#" %> <script runat="server"> private int a; private int b; private char regneart; private double sum; protected void Beregn_Knapp(object sender, EventArgs e) { a = int.parse(tbtall1.text); b = int.parse(tbtall2.text); regneart = char.parse(tbregneart.text); Response.Write("<p>Et lite regnestykke: "); sum = beregn(a, b, regneart);

14 Lage ASP.NET sider side 14 av 14 Response.Write(a + " " + regneart + " " + b + " = " + sum + "<br />"); } protected double beregn(int a, int b, char regneart) { switch(regneart) { case '+': return a+b; case '-': return a-b; case '*' : return a*b; case '/' : return a/b; default : throw new ArgumentException("Ugyldig regneart"); } } </script> HTML <html> <head><title>minikalkis</title></head> <body> <b>velkommen til Grethes minikalkis :)</b> <form id="form1" runat = "server"> Skriv inn tall 1: <asp:textbox id="tbtall1" runat = "server"/> <br /><br /> Skriv inn tall 2: <asp:textbox id="tbtall2" runat = "server"/><br /> Skriv inn regneart (+, -, * eller /): <asp:textbox id="tbregneart" runat = "server"/><br /> <asp:button id="btberegn" Text = "Utfør beregning" OnClick= "Beregn_Knapp" runat = "server" /> </form></body></html> To eksempler på visning av siden i en nettleser: