Tags:    asp.net I sidste lektion kiggede vi på hvordan formularer benyttes i ASP.NET, og i denne lektion kaster vi os over nogle af de mere simple kontroller.

Flere forskellige typer

Inden vi går i gang, er det dog vigtigt at være bevidst om, at der findes to forskellige typer af serverbaserede kontroller i ASP.NET:

• ASP.NET-serverkontroller, som indeholder en stor funktionalitet og afvikles på serveren. Det er normalt disse man relaterer til ASP.NET, og det er da også dem vi koncentrerer os mest om i disse lektioner.


• HTML-serverkontroller er en samling kontroller svarende til de kontroller man har adgang til i HTML. Der er dog den store forskel at HTML-serverkontroller afvikles på serveren, og dermed har logiske egenskaber og hændelser hvilket gør dem nemme at skrive kode til.

Begge typer kan benyttes i Web Matrix (se toolbox-vinduet) til visuel udvikling, men i denne lektion, og i efterfølgende lektioner medmindre andet tydeligt er angivet, vil der blive benyttet ASP.NET serverkontroller.


Figur 1 De forskellige typer af kontroller tilgængelige i Web Matrix

Vi kommer senere ind på hvornår man bør bruge HTML-serverkontroller i stedet for ASP.NET-serverkontroller.

Fælles egenskaber og hændelser

Alle kontroller har visse fælles egenskaber, hvilket i realiteten skyldes, at de i objektorienteret sammenhæng er nedarvet fra samme klasse. Nogle af disse fælles egenskaber er som følger:

[table][tr][td]Egenskab[/td][td]Beskrivelse[/td][/tr][tr][td]AccessKey[/td][td]Bestemmer hvilket bogstav der kan bruges som genvej til knappen sammen med Alt-knappen.[/td][/tr][tr][td]BackColor[/td][td]Bestemmer baggrundsfarven.[/td][/tr][tr][td]Enabled[/td][td]Bestemmer om kontrollen skal være tilgængelig.[/td][/tr][tr][td]Font-Name[/td][td]Navnet på fonten (eksempelvis Verdana).[/td][/tr][tr][td]Font-Size[/td][td]Størrelsen på fonten.[/td][/tr][tr][td]ForeColor[/td][td]Bestemmer forgrundsfarven (eksempelvis Red eller #00FF00)[/td][/tr][tr][td]Height[/td][td]Bestemmer højden.[/td][/tr][tr][td]ID[/td][td]Identificerer de enkelte kontroller, og sikrer blandt andet at det er muligt at tilgå kontroller gennem kode.[/td][/tr][tr][td]TabIndex[/td][td]Bestemmer hvilken rækkefølge der skal følges når man tabulerer sig rundt mellem kontrollerne.[/td][/tr][tr][td]ToolTip[/td][td]Bestemmer hvilken tekst (normalt en hjælpetekst) som skal "poppe op" ved siden af knappen når musen holdes stille over knappen et øjeblik.[/td][/tr][tr][td]Visible[/td][td]Bestemmer om kontrollen er synlig.[/td][/tr][tr][td]Width[/td][td]Bestemmer bredden på kontrollen.[/td][/tr][/table]

Disse egenskaber kan benyttes på alle kontroller, hvilket jo gør det noget nemmere at benytte de forskellige typer af kontroller fordi der er mindre at huske på. Skal man eksempelvis sætte en baggrundsfarve, er det egenskaben BackColor man skal have fat i ligegyldigt hvilken kontrol det drejer sig om.
Vi kommer løbende til at se eksempler på brug af de mange fælles egenskaber - både i denne og kommende lektioner.

Knap

Knap-kontrollen (Button) er en af de mest benyttede kontroller, og den findes som standard i tre variationer. En almindelig standard knap (Button), en knap vist som et link (LinkButton), og en knap vist som et billede (ImageButton). Alle tre kontroller vil som standard fremprovokere en postback når der bliver klikket på dem.
Knapperne kan alle findes i værktøjskassen i Web Matrix, men hvis du vil bruge dem manuelt, kan følgende (simple) syntaks benyttes:

<asp:Button
	id="Button1"
	runat="server"
	Text="Button"/>

<asp:LinkButton
	id="LinkButton1"
	Text="Button"
	runat="server"/>

<asp:ImageButton
	id="ImageButton1"
	ImageURL="URL til billede"
	Text="Button"
	runat="server"/>

I denne lektion kigger vi på standardknappen, og vender retur til de andre typer senere i forbindelse med kodeeksempler.

Standardknap

Ønsker man blot en ganske almindelig knap, vil man normalt benytte tre egenskaber: Egenskaben Text der bestemmer hvad der skal stå på selve knappen, og de to standardegenskaber ToolTip (lille vindue med hjælpetekst) og AccessKey (genvejstast).

Det er dog muligt at benytte alle standardegenskaberne som eksempelvis forgrunds- (Forecolor) og baggrundsfarve (Backcolor), størrelse (Width), eller om knappen skal være synlig (Visible) eller tilgængelig (Enabled).

Click-hændelsen, som logisk nok finder sted når der klikkes på knappen, har følgende syntaks:

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

}

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

End Sub

Navnet på metoden skal, hvis man benytter Web Matrix eller selv skriver koden, være angivet i opmærkningen til knappen under egenskaben onclick:

<asp:Button id="Button1" accessKey="F"
onclick="Button1_Click" runat="server"
Text="Klik på mig" ToolTip="Farveknap"/>

Selve metoden kan enten skrives manuelt eller ved at dobbeltklikke på knappen i Web Matrix. Argumenterne til metoderne har sjældent betydning i denne sammenhæng, men fortæller noget om hvem der er afsender af hændelsen, og eventuelle argumenter. Vi vender senere tilbage til disse to argumenter, men indtil videre kan du blot ignorere dem.

Her er et kort eksempel på brug af en knap, som benytter de nævnte egenskaber tillige med egenskaben BackColor. Eksemplet viser ligeledes hvordan knappen kan tilgås via kode:

C#

<%@ Page Language="C#" %>
<script runat="server">
void Button1_Click(object sender, EventArgs e) {
  // Hvis aktuelt sekund er et lige tal
  if(DateTime.Now.Second % 2 == 0){
      // Konstanter på farve kan findes under
      // System.Drawing.Color
      Button1.BackColor = System.Drawing.Color.Red;
  // Så må det være et ulige tal
  }
  else{
      Button1.BackColor = System.Drawing.Color.White;
  }
}
</script>
<html>
<body>
    <form runat="server">
        <asp:Button id="Button1" accessKey="F"
        onclick="Button1_Click" runat="server"
        Text="Klik på mig" ToolTip="Farveknap"/>
    </form>
</body>
</html>

VB.NET

<%@ Page Language="VB" %>
<script runat="server">
Sub Button1_Click(sender As Object, e As EventArgs)
    ' Hvis aktuelt sekund er et lige tal
    If DateTime.Now.Second Mod 2 = 0 Then
        ' Konstanter på farve kan findes under
        ' System.Drawing.Color
        Button1.BackColor = System.Drawing.Color.Red
    ' Så må det være et ulige tal
    Else
        Button1.BackColor = System.Drawing.Color.White
    End If
End Sub
</script>
<html>
<body>
    <form runat="server">
        <asp:Button id="Button1" accessKey="F"
        onclick="Button1_Click" runat="server"
        Text="Klik på mig" ToolTip="Farveknap"/>
    </form>
</body>
</html>

Koden danner en side med en enkelt knap. Knappen har teksten "Klik på mig", og når man lader musen svæve over knappen, dukker teksten "Farveknap" op i et lille vindue. I stedet for at klikke på knappen kan man bruge genvejstasten Alt+F.

Metoden Button1_Click afvikles når der klikkes på knappen hvilket skyldes, at metodenavnet er angivet i opmærkningen i egenskaben onclick. I metoden bliver knappens baggrundsfarve sat til en værdi afhængig af tiden. Hvis det aktuelle sekund er et lige tal, bliver knappen rød, ellers bliver den hvid.

Du kan se flere eksempler på brug af en knap i de forrige lektioner.

Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:  

Karma barometer (30 dage)

IT jobs | Kontakt | Om Udvikleren.dk | Om karma | IT nyheds arkiv | Annoncering

X