List controls gebruiken

Als u de gebruiker meerdere keuzes wilt geven, dan gebeurt dit vaak op basis van een lijst met mogelijkheden. In HTML heeft u hiervoor de beschikking over een element dat zich als keuzevak of keuzelijst kan manifesteren, afhankelijk van de door u gegeven instellingen. Verder kunt u meerdere keuzerondjes gebruiken in een groep, maar dat werkt weer anders. In ASP.NET heeft u voor dit soort functionaliteit de beschikking over zogenaamde list controls. Deze controls kunnen op baisis van een lijst met mogelijkheden een keuzevak, keuzelijst, keuzerondjes, of selectievakjes weergeven. De waardes in de verschillende controls worden op dezelfde manier ingevoegd, dus het vergt weinig om van de ene soort lijst een andere te maken. Ook kunt u de lijst opbouwen aan de hand van gegevens uit bijvoorbeeld een database. Dit wordt verder behandeld in de sectie "Gegevens weergeven met server controls". Nu beperken we ons tot het gebruiken van list controls in HTML, en het opvragen van de geselecteerde waarde(s). De server controls die hier behandeld worden zijn:

DropDownList control

De DropDownList control geeft een keuzelijst weer in de webbrowser waaruit de gebruiker ΘΘn keuze kan maken. De basiseigenschappen die we eerder gezien hebben bij de Label control bevat de DropDownList ook, met uitzondering van die eigenschappen die te maken hebben met het maken van een rand. In HTML is de rand van een keuzelijst niet aan te passen, en dus kan dat met ASP.NET ook niet. Naast de basiseigenschappen bevat de DropDownList control eigenschappen die te maken hebben met het koppelen van gegevens aan de control. Aangezien dit nu nog niet van toepassing is, laten we die eigenchappen even achterwege. Ze worden behandeld in de sectie "Gegevens weergeven met server controls". Op dit moment werken we alleen met keuzes die we in de HTML plaatsen. Hiervoor heeft u in plaats van eigenschappen sub-controls nodig. Dit zijn controls die niet op zichzelf kunnen bestaan, maar alleen als onderdeel van een andere server control. In het geval van list controls is er maar ΘΘn sub-control, namelijk het ListItem control. De ListItem control is zeer simpel in gebruik, zoals u het codefragment hieronder ziet:

<asp:ListItem Value="3" Selected="True">Notepad</asp:ListItem>

De bovenstaande code voegt een keuze toe met de waarde 3 en als tekst "Notepad". In dit geval wordt ook nog aangegeven dat deze keuze geselecteerd moet zijn als de pagina voor het eerst opgevraagd wordt. Noot: In een DropDownList en een RadioButtonList mag slechts ΘΘn keuze geselecteerd zijn, als er meerdere keuzes geselecteerd zijn is de laatste in de lijst geselecteerd (in een ListBox hangt dit af van de instelling, en in een CheckBoxList mogen meerdere keuzes geselecteerd zijn). Het Value attribuut is niet verplicht. Als u dit attribuut niet toevoegt, is de waarde gelijk aan de tekst die wordt weergegeven (in dit geval dus "Notepad"). Als u met een visuele designomgeving werkt, kunt u keuzes toevoegen via de Items collectie die wordt weergegeven in het eigenschappenvenster. U kunt dan keuzes toevoegen via het venster in figuur 1, dat te openen is in het eigenschappenvenster.


Figuur 1, ListItem editor voor list controls

Als u de keuzes heeft ingevoerd zoals in figuur 1, en u voegt twee labels in om de waarde en tekst van de geselecteerde keuze weer te geven, dan krijgt u HTML-code zoals hieronder.

<html>
<head>
</head>
<body>
  <form runat="server">
    <p>
      <asp:DropDownList id="DropDownList1" runat="server" AutoPostBack="True"
                  OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
        <asp:ListItem Value="1">ASP.NET Web Matrix Project</asp:ListItem>
        <asp:ListItem Value="2">Visual Studio .NET</asp:ListItem>
        <asp:ListItem Value="3" Selected="True">Notepad</asp:ListItem>
      </asp:DropDownList>
    </p>
    <p>
      U heeft 
      <asp:Label id="Label1" runat="server" Font-Italic="True"></asp:Label>
      geselecteerd (waarde 
      <asp:Label id="Label2" runat="server" Font-Italic="True"></asp:Label>). 
    </p>
  </form>
</body>
</html>

Merk op dat de DropDownList gebruik maakt van AutoPostBack, en dat de OnSelectedIndexChanged gebeurtenismethode gebruikt wordt. In de gebeurtenismethode geven we de Label controls hun waarde met de volgende code:

VB.NET

<script runat="server">
Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs)
  Label1.Text = DropDownList1.SelectedItem.Text
  Label2.Text = DropDownList1.SelectedItem.Value
End Sub 
</script>

C#

<script runat="server">
void DropDownList1_SelectedIndexChanged(Object sender, EventArgs e) {
  Label1.Text = DropDownList1.SelectedItem.Text; 
  Label2.Text = DropDownList1.SelectedItem.Value;
}
</script>

Zoals u kunt zien in de code hierboven, kunt u zowel de geselecteerde waarde als de geselecteerde tekst opvragen. Beide zijn onderdeel van de SelectedItem eigenschap, dat op zichzelf ook weer een object met eigenschappen is. Het resultaat van de volledige pagina, nadat u Visual Studio .NET geselecteerd heeft, is te zien in figuur 2.


Figuur 2, DropDownList control met geselecteerde waarde

ListBox control

De ListBox control heeft veel gemeen met de DropDownList control. Het verschil zit in de weergave, en in de mogelijkheid om de gebruiker meerdere keuzes te kunnen laten maken. De ListBox wordt in de webbrowser weergegeven als een keuzevak. De weergave en functionaliteit daarvan kunt u naast de standaard eigenschappen bepalen met de eigenschappen in tabel 1.

Eigenschap Omschrijving
Rows Hoogte van de ListBox in het aantal karakters. Dit is een alternatief voor Height.
SelectionMode Geeft aan of de gebruiker meerdere keuzes mag maken of slechts ΘΘn. De mogelijke waardes zijn Single (standaard) en Multiple.
Tabel 1, Additionele eigenschappen van de ListBox control

Als in de ListBox maar ΘΘn keuze gemaakt kan worden, dan werkt de ListBox control precies hetzelfde als de DropDownList control. Als de gebruiker meerdere keuzes kan maken, staat in SelectedItem de keuze met de laagste index (dat wil zeggen de keuze die het hoogste in de lijst staat). Als er meerdere keuzes gemaakt zijn, wilt u echter alle keuzes op kunnen vragen. Dit kunt u doen via de Items collectie. Dit is dezelfde collectie die u met het venster in figuur 1 kunt maken, en deze is ook in gebeurteniscode beschikbaar. De code hieronder laat de HTML zien die de gebruiker toestaat om meerdere keuzes tegelijk te maken.

<html>
<head>
</head>
<body>
  <form runat="server">
    <p>
      <asp:ListBox id="ListBox1" runat="server" SelectionMode="Multiple" Rows="3"
 AutoPostBack="True" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged">
        <asp:ListItem Value="1">ASP.NET Web Matrix Project</asp:ListItem>
        <asp:ListItem Value="2">Visual Studio .NET</asp:ListItem>
        <asp:ListItem Value="3">Notepad</asp:ListItem>
      </asp:ListBox>
    </p>
    <p>
      Is ASP.NET Web Matrix Projectgeselecteerd? 
      <asp:Label id="Label1" runat="server"></asp:Label><br />
      Is Visual Studio .NET geselecteerd? 
      <asp:Label id="Label2" runat="server"></asp:Label><br />
      Is Notepad geselecteerd? 
      <asp:Label id="Label3" runat="server"></asp:Label>
    </p>
  </form>
</body>
</html>

In de code hierboven staat een ListBox control en drie Label control, een voor elke keuze in de ListBox. Als de keuze(s) in de ListBox verandert wordt de gebeurtenismethode uitgevoerd die toegekend is aan OnSelectedIndexChanged. Met die methode willen we de drie Label control een waarde geven die aangeeft of de betreffende keuze geselecteerd is. De code hiervoor ziet u hieronder.

VB.NET

<script runat="server">
Sub ListBox1_SelectedIndexChanged(sender As Object, e As EventArgs)
  Label1.Text = ListBox1.Items(0).Selected
  Label2.Text = ListBox1.Items(1).Selected
  Label3.Text = ListBox1.Items(2).Selected
End Sub

</script>

C#

<script runat="server">
void ListBox1_SelectedIndexChanged(Object sender, EventArgs e) {
  Label1.Text = ListBox1.Items(0).Selected;
  Label2.Text = ListBox1.Items(1).Selected;

  Label3.Text = ListBox1.Items(2).Selected; 
}
</script>

Zoals u kunt zien wordt iedere keuze opgevraagd aan de hand van de index die de keuze heeft in de ListBox. De index begint bij 0, zoals u heeft kunnen zien in figuur 1. Voor elk van de keuzes vragen we op of deze geselecteerd is. Het resultaat daarvan geven we weer in de label controls. Figuur 3 laat het resultaat zien als twee van de drie keuzes geselecteerd zijn.



Figuur 3, ListBox control met twee geselecteerd keuzes, weergegeven met Label controls

CheckBoxList control

De CheckBoxList control is qua functionaliteit hetzelfde als de ListBox control wanneer deze meerdere keuzes accepteert, dit betekent dus ook dat de code om de geselecteerde opties uit te lezen hetzelfde is. Het enige verschil zit in de opmaak van de CheckBoxList, omdat deze onder ander de mogelijkheid biedt de selectievakjes boven elkaar of naast elkaar te zetten. Ook dit kan op verschillende manieren, dus het loont de moeite hier even mee te experimenteren. Tabel 2 laat zien welke eigenschappen de CheckBox control heeft die de ListBox niet bevat.

Eigenschap Omschrijving
CellPadding Het aantal pixels dat de tekst van de rand van de cel in de tabel af moet staan. Alleen van toepassing als RepeatLayout de waarde Table heeft.
CellSpacing Het aantal pixels dat tussen de cellen in de tabel moet zitten. Alleen van toepassing als RepeatLayout de waarde Table heeft.
RepeatColumns Het aantal kolommen waarin de selectievakjes moeten worden weergegeven. Alleen van toepassing als RepeatDirection de waarde Vertical heeft.
RepeatDirection Richting waarin de selectievakjes moeten worden weergegeven. De mogelijke waardes zijn Vertical (standaard) en Horizontal.
RepeatLayout Manier waarop de selectievakjes in de pagina gezet worden. Met de waarde Table (standaard) wordt een HTML tabel gebruikt voor de opmaak. Met de waarde Flow wordt gebruik gemaakt van spaties en nieuwe regels.
TextAlign De positie van de tekst die bij de selectievakjes hoort ten opzichte van de selectievakjes. De waarde kan Left voor links, en Right (standaard) voor rechts zijn.
Tabel 2, Additionele eigenschappen van de CheckBoxList control

RadioButtonList control

De RadioButtonList control is vrijwel identiek aan de CheckBoxList. Het enige verschil is dat bij de RadioButtonList control maar ΘΘn optie geselecteerd kan worden (zoals bij de DropDownList control). Het uiterlijk verschilt alleen doordat iedere optie wordt weergegeven met een keuzerondje in plaats van een selectievakje. Alle opmaak opties zijn verder hetzelfde, en derhalve is tabel 2 dus ook van toepassing op de RadioButtonList control.

⌐2002 Microsoft Nederland BV