ASP.NET Tutorial, Part 3 - Et brugbart eksempel

ASP.NET Tutorial, Part 3 - Et brugbart eksempel

Inden vi kaster os over teorien for alvor, er det måske på sin plads at vise et større og mere sammenhængende eksempel på en ASP.NET-side. Vi kommer ind på områder vi endnu ikke har snakket om, men frygt ikke. Vi kommer til det senere.

Eksemplet har til formål at vise flere ting. For det første hvor nemt det er at komme fra ingenting til en hel masse. For det andet hvor logisk brugen af kontroller og hændelsesorienteret programmering er (begge er begreber vi dykker ned i senere), og slutteligt hvordan flowet i en ASP.NET-applikation normalt er.

Opgaven

Opgaven er at skabe en enkelt side som kan benyttes til at beregne antallet af dage mellem to datoer. Der skal være mulighed for at indtaste de to datoer i to tekstbokse og efterfølgende klikke på en Beregn-knap. Resultatet af beregningen skal fremgå under kontrollerne.
For at gøre applikationen så brugbar som muligt skal der være validering på de to tekstbokse således, at der kun kan indtastes korrekte datoer. Såfremt der indtastes tegn som ikke kan konverteres til datoer, skal brugeren have en logisk fejlmeddelelse.

Løsningen

Løsningen er at skabe en såkaldt web form bestående af otte kontroller:

• To tekstbokse.
  
• Fire valideringskontroller, som skal bruges til at validere tegn indtastet i de to tekstbokse. En valideringskontrol skal bruges til at sikre at der er tastet en korrekt dato (kaldet en RangeValidator), og en kontrol til at sikre at tekstboksen ikke er tom (RequiredFieldValidator).
  
• En knap.
  
• En etiket til at indeholde resultatet af beregningerne.
  

Siden kan designes på mange måder, men det nemmeste er at benytte Web Matrix og trække en tekstboks, en RangeValidator- og en RequiredFieldValidator-kontrol til den øverste linje lige efter hinanden.

Tekstboksen omdøbes fra textbox1 til dato1 (marker kontrollen, og ret ID-egenskaben i Properties-ruden til højre i vinduet).

Egenskaben ErrorMessage i RangeValidator-kontrollen rettes til "Forkert dato", og Type-egenskaben rettes til Date (der skal testes på en dato). Egenskaben MinimumValue rettes til "1-1-1900" og MaximumValue til "1-1-2900", og slutteligt rettes egenskaben ControlToValidate til dato1 (man binder dermed valideringskontrollen til dato1-tekstboksen).

Egenskaben ErrorMessage på RequiredFieldValidator-kontrollen sættes til "Felt skal udfyldes", og egenskaben ControlToValidate tilrettes ligeledes til dato1. Slutteligt rettes egenskaben Display fra Static til Dynamic i begge valideringskontroller (det sikrer at fejlmeddelelser står pænt - se herom i en senere lektion).

Samme tre kontroller placeres på næste linje (tryk på Enter for at skifte linje) med den forskel, at tekstboksen navngives dato2. Yderligere skal egenskaben ControlToValidate på RequiredFieldValidator-kontrollen sættes til dato2.

På 3. linje placeres en knap (button), som navngives Beregn (via ID-egenskaben), Text-egenskaben rettes ligeledes til Beregn. På 4. linje placeres en etiket (label), som navngives Resultat, og Text-egenskaben slettes.

Nu skulle du gerne have en formular der ligner figur 1.


Figur 1 Design af ASP.NET-siden.

Test af formular

Selvom der ikke er skrevet nogen kode, kan du i Web Matrix prøve at afvikle formularen via Web Matrixs indbyggede web server ved at vælge Start på View-menuen, eller ved at trykke på F5. Koden oversættes af web serveren, som returnerer en side svarende til figur 2.


Figur 2 Siden afvikles gennem IE.

Prøv at trykke på Beregn-knappen - du skulle gerne blive mødt med en fejlmeddelelse ud for hvert felt der fortæller, at feltet skal udfyldes. Prøv så at skrive noget der ikke kan fortolkes som en dato, i felterne, og tryk Beregn igen. Fejlmeddelelsen vil nu være "Forkert dato".

Det er først når der indtastes korrekte datoer, at der ikke genereres en fejlmeddelelse. Der sker dog heller ikke mere - men det er fordi vi mangler at skrive koden bag Beregn-knappen.

Beregningen

Selve beregningen af antallet af dage skal ske når der klikkes på knappen Beregn, og der skal derfor oprettes en såkaldt hændelsesrutine. I Web Matrix gøres dette nemt ved at dobbeltklikke på Beregn-knappen, hvilket opretter en af følgende metoder afhængigt af det valgte sprog:

// C#
void Beregn_Click(object sender, EventArgs e) {

}

' VB
Sub Beregn_Click(sender As Object, e As EventArgs)

End Sub

I metoden, som afvikles når der klikkes på knappen, kan koden til at beregne antallet af dage eksempelvis skrives som følger:

// C#
void Beregn_Click(object sender, EventArgs e) {
	// Indhold i kontroller skal være korrekt
	if(Page.IsValid){
		// Konverter til DateTime
	 	DateTime d1 = Convert.ToDateTime(dato1.Text);
		DateTime d2 = Convert.ToDateTime(dato2.Text);
		// Beregn
		double antal = d2.Subtract(d1).TotalDays;
		// Vis resultat
		Resultat.Text = String.Format("Der er {0} dage mellem {1:D} og {2:D}",
		antal, d1, d2);
	}
}

' VB
Sub Beregn_Click(sender As Object, e As EventArgs)
	' Indhold i kontroller skal være korrekt
	If Page.IsValid Then
		' Konverter til DateTime
		Dim d1 As DateTime = Convert.ToDateTime(dato1.Text)
		Dim d2 As DateTime = Convert.ToDateTime(dato2.Text)
		' Beregn
		Dim antal as Double = d2.Subtract(d1).TotalDays
		' Vis Resultat
	Resultat.Text = String.Format _
	("Der er {0} dage mellem {1:D} og {2:D}", _
	antal, d1, d2)
	End If
End Sub

Antallet af dage beregnes ved hjælp af Subtract-metoden på DateTime-strukturen, og resultatet skrives til Resultat-etiketten.

Hele koden, som danner formularen, kan ses ved at vælge All-fanen i Web Matrix. Her kan ses de HTML- og kontrol-opmærkninger som danner selve siden, samt koden.

Konklusion

Det var et hurtigt eksempel på en ASP.NET-side udviklet med Web Matrix. I de næste lektioner dykker vi ned under overfladen for at se på hvordan tingene er skruet sammen.