Programmeren in ASP.NET/Web-server-controls

Inleiding

Web-controls zijn het tweede type van server-control. Zij lijken op HTML-controls, maar zijn dikwijls ingewikkelder, en zijn niet noodzakelijk direct verbonden met een HTML-tag. Hierdoor kunnen ze meer flexibel en gemakkelijker te gebruiken zijn. Hun "objectmodel" is gewoonlijk ook complexer. Terwijl HTML-controls gewoonlijk eigenschappen hebben die hun overeenkomstige HTML-tag weerspiegelen, hebben web-controls dikwijls meer abstracte eigenschappen.

Je kan web-controls herkennen doordat de tag begint met <asp:...> en doordat ze een runat="server" attribuut hebben. Hier is een voorbeeld:

<asp:Label id="HelloWorld" runat="server"> voorbeeld </asp:Label>

Web-controls worden ook op de server verwerkt door de ASP.NET-runtime-engine wanneer een pagina waarin ze voorkomen opgevraagd wordt. Ze worden geïdentificeerd door hen een id-attribuut te geven, dat je dan kan gebruiken om naar de control te verwijzen in je code. Al deze dingen hebben ze gemeen met HTML-controls.

Als uitvoer geven ze de overeenkomstige HTML-code die dan naar de client gestuurd wordt. De uitvoer van een web-server-control is afhankelijk van het client-platform. Zo zal een web-server-control aangepaste uitvoer produceren als hij opgevraagd wordt vanaf een draagbare telefoon of een PDA.

helloworld5.aspx

<%@ Page Language="VB" %>
<script runat="server">
   Sub Page_Load(sender As Object, e As EventArgs)
	lblHelloWorld.Text = "Hello World!"
   End Sub
</script>

<html>
  <head>
    <title>ASP.NET Hello World</title>
  </head>
  <body>

    <asp:Label id="lblHelloWorld" runat="server"> </asp:Label>

  </body>
</html>

Het enige verschil met de code in het vorige hoofdstuk is het gebruik van de control. Er staat een <asp:Label>-tag in de pagina. Deze nieuwe tag is nu het element in de code dat de tekst instelt op "Hello World!". Noteer dat de property veranderd is van InnerText naar eenvoudig Text. Dit komt doordat het objectmodel van de <asp:Label>-tag anders gedefinieerd is dan dat van de HtmlGenericControl die we eerder gebruikten.

Ter herinnering: het Page_Load-event is een event dat opgeroepen wordt wanneer een ASP.NET pagina aangevraagd wordt.

Nota: je moet de tag op een van de volgende twee manieren afsluiten:

1) met de overeenkomstige afsluit-tag:

<asp:Label id="lblHelloWorld" runat="server"> </asp:Label>

2) met />:

<asp:Label id="lblHelloWorld" runat="server" />

Wat is het verschil?

Het meest opvallende verschil tussen de twee is dat de tags voor web-controls er niet uitzien zoals HTML-tags. Dit komt doordat ze niet zo nauw verbonden zijn met de basis-HTML-tags zoals HTML-controls. Hoewel HTML-controls gewoonlijk hun overeenkomstige HTML-tag (met de attributen die je instelde) uitgeven, is dat meestal de enige HTML-tag die ze produceren. Web-controls kunnen meerdere HTML-tags produceren in alle mogelijke combinaties (of wat er ook maar nodig is) om hun taak te vervullen. Ze voeren functies van hoger niveau uit en ze weerspiegelen niet noodzakelijk een bepaalde HTML-tag.

Het nadeel van web-controls is dat je minder controle hebt over de geproduceerde HTML-code dan bij HTML-controls. HTML-controls zijn ook erg handig om bestaande HTML-code om te zetten naar ASP.NET, gewoon door overal runat="server" bij te zetten.

Veel vensterelementen die veel gebruikt worden in Windows zijn als web-controls nu ook op webformulieren te gebruiken, zoals een kalender, een lijst met kolommen, een lijst met aankruisvakjes, enz...

Wat is het voordeel?

Hier is een ander voorbeeld dat goed illustreert hoe krachtig sommige van deze web-controls zijn:

kalendervb.aspx

<%@ Page Language="VB" %>
<script runat="server">
    Sub Calendar1_SelectionChanged (Sender as Object, E as EventArgs)
        lblInfo.Text = "Je koos: " & Calendar1.SelectedDate
    End Sub
</script>

<html>
  <head>
    <title>ASP.NET Calendar Web-control Voorbeeld</title>
  </head>
  <body>
    <form runat="server">
      <asp:calendar id="Calendar1" runat="server"
            onSelectionChanged="Calendar1_SelectionChanged" />
      <asp:label id="lblInfo" runat="server" />
    </form>
  </body>
</html>

Het grootste deel van de listing is redelijk simpel, maar bekijk eventjes de lijn die begint met asp:calendar. Deze lijn maakt een calendar web-control aan en gelijkt op het voorbeeld van het label hierboven.

Nogal simpel, maar kijk eens naar het resultaat in de browser:

Het is misschien niet de mooiste agenda die je kan vinden (je kan het uitzicht nog veranderen volgens je eigen smaak... dit is het uitzicht met de standaard instellingen), maar het geeft je een hoop mogelijkheden met zeer weinig code!

Dat is precies wat je met een web-control kan doen. Je krijgt een stuk functionaliteit, verpakt als een mooie control met methodes, property's, en events die ermee overeenkomen. Zo heeft de calendar-control een eigenschap SelectedDate die je in je code kan gebruiken om de gekozen datum te manipuleren. Er is ook een event SelectionChanged dat je kan gebruiken om een handeling uit te voeren telkens als de selectie verandert.

Courante web-controls

Er worden verschillende controls meegeleverd met het Microsoft .NET Framework. Sommige controls komen min of meer overeen met hun HTML-tegenpartij. Sommige controls leveren bijkomende informatie bij het terugposten naar de server, en sommige controls geven je de mogelijkheid om gegevens in tabelvorm of lijstvorm te tonen. Een aantal controls kan ook rechtstreeks gekoppeld worden aan een databank.

Er zijn talrijke web-controls die geleverd worden samen met ASP.NET: validators, een ad rotator, een repeater, alle soorten controls voor formulieren, een datagrid, een treeview control (boomstructuur), etc. Als je iets zoekt dat hier nog niet genoemd werd, kan je het waarschijnlijk downloaden van het web, of je kan het zelf schrijven!

Property's geldig voor alle controls

Alle web-controls stammen af van een gemeenschappelijke basisklasse, namelijk de System.Web.UI.Webcontrol klasse. Alle eigenschappen van deze klasse worden automatisch ook overgeërfd door elk type web-control.

De tabel hieronder geeft alle property's gemeenschappelijk voor alle web-server-controls, behalve Literal, PlaceHolder, en Xml.

Tabel: Eigenschappen van web server controls (behalve Literal, PlaceHolder en XML):

Property	Beschrijving
AccessKey	Zet de toetsenbordcombinatie waarmee je toegang krijgt tot een web-control.
Attributes	Geeft de collectie attributen die werden toegepast op een web-control. Kan ook individuele attributen opvragen of wijzigen.
BackColor	Verandert of geeft de achtergrondkleur van een web-control.
BorderColor	Verandert of geeft de randkleur van een web-control.
BorderStyle	Verandert of geeft de randstijl van een web-control.
BorderWidth	Verandert of geeft de randdikte van een web-control.
CssClass	Verandert of geeft de Cascading Style Sheet (CSS)-klasse die wordt toegepast op een web-control. Komt in de pagina als een "class"-attribuut.
Enabled	Verandert of geeft een waarde die aangeeft of een web-control geactiveerd is.
EnableTheming	Indien True, dan wordt een thema toegepast op de control . Alleen vanaf ASP.NET 2.0.
Font	Verandert of geeft informatie over fontattributen van de web-server-control.
ForeColor	Verandert of geeft de voorgrondkleur van de control.
Height	Verandert of geeft de hoogte van de control.
ID	Geeft de naam van de control in de pagina
SkinID	Verandert of geeft de ID van de toe te passen skin . Alleen vanaf ASP.NET 2.0.
Style	Verandert of geeft de verzameling van tekstattributen die verschijnen onder de vorm van een CSS-style-attribuut binnen de tag van de control.
TabIndex	Verandert of geeft de positie van de control in de tabvolgorde in het huidige document.
ToolTip	Verandert of geeft de tekst die verschijnt als de gebruiker de muis boven de control laat stilstaan.
Visible	Indien False, dan wordt de control niet getoond in de pagina (onzichtbaar).
Width	Verandert of geeft de breedte van een control.

Lijst met web-controls

De tabel hieronder toont een lijst met beschikbare web-controls, en enkele van hun meestgebruikte attributen, property's en methodes. Nog meer controls kan je op het internet vinden, gratis of tegen betaling.

Tabel: Server-side controls gebruikt in ASP.NET en webformulieren:

Label
Beschrijving	Toont tekst op de HTML-pagina. Komt in de pagina als een <span> tag
Attributen	Text
Property's	Text
Methodes
Server-Side events	geen
Code	<asp:Label id=Label1 runat="server">Label</asp:Label>
TextBox
Beschrijving	Geeft de gebruiker een invoerzone op een HTML-formulier. Deze kan ook meerdere lijnen bevatten (TextMode=Multiline) of dienen voor de invoer van wachtwoorden (TextMode=Password)
Attributen	Text, Rows, Columns
Property's	Text, TextMode
Methodes	Focus()
Server-Side events	TextChanged
Code	<asp:TextBox id=TextBox1 runat="server"></asp:TextBox>
Button
Beschrijving	Een gewone knop gebruikt om te reageren op click events op de server. Je kan bijkomende informatie doorgeven door de CommandName en CommandArguments property's in te stellen.
Attributen	Text, CommandName, CommandArgument
Property's	Text, CommandName, CommandArgument
Methodes
Server-Side events	Click, Command, OnClientClick
Code	<asp:Button id=Button1 runat="server" Text="Button"></asp:Button>
LinkButton
Beschrijving	Zelfde functionaliteit als een Button, maar ziet eruit als een hyperlink (er is echter geen URL aan verbonden)
Attributen	Text, CommandName, CommandArgument
Property's	Text, CommandName, CommandArgument
Methodes
Server-Side events	Click, Command, OnClientClick
Code	<asp:LinkButton id=LinkButton1 runat="server">Klik hier</asp:LinkButton>
ImageButton
Beschrijving	Knop met een afbeelding, die informatie kan doorsturen over de positie van de muis op het moment dat geklikt werd (vergelijkbaar met een image map)
Attributen	ImageURL, CommandName, CommandArgument
Property's	ImageURL, CommandName, CommandArgument
Methodes
Server-Side events	Click, Command, OnClientClick
Code	<asp:ImageButton id=ImageButton1 ImageUrl="knop.gif" runat="server"></asp:ImageButton>
Hyperlink
Beschrijving	Een normale hyperlink-control die op klikken reageert
Attributen	Text, NavigateUrl, ImageURL, Target
Property's	Text, NavigateUrl, ImageURL, Target
Methodes
Server-Side events	geen
Code	<asp:HyperLink id=HyperLink1 NavigateUrl="test.aspx" runat="server">Klik hier</asp:HyperLink>
DropDownList
Beschrijving	Een normale uitklapbare lijst-control zoals de HTML-control, maar kan verbonden worden met een gegevensbron
Attributen
Property's	SelectedIndex, SelectedValue, SelectedItem, Items, DataSource, AutoPostback
Methodes	Items.Add(), DataBind()
Server-Side events	SelectedIndexChanged
Code	<asp:DropDownList id=DropDownList1 runat="server"></asp:DropDownList>
ListBox
Beschrijving	Een normale lijst-control zoals de HTML-control, maar kan verbonden worden met een gegevensbron
Attributen	Rows, SelectionMode
Property's	SelectedIndex, SelectedValue, SelectedItem, Items, DataSource, AutoPostback
Methodes	Items.Add(), DataBind()
Server-Side events	SelectedIndexChanged
Code	<asp:ListBox id=ListBox1 runat="server"></asp:ListBox>
Repeater
Beschrijving	Laat toe om een bepaald sjabloon te herhalen.
Attributen	DataSource, Items
Property's	DataSource, Items
Methodes	DataBind()
Server-Side events	ItemCommand, ItemCreated, ItemDataBound
Code	<asp:Repeater id=Repeater1 runat="server"></asp:Repeater>
DataList
Beschrijving	Laat toe om een bepaald sjabloon te herhalen in rijvorm. Er kan ook geselecteerd en gewijzigd worden. Meerdere kolommen per pagina zijn mogelijk.
Attributen	DataSource, Items
Property's	DataSource, Items
Methodes	DataBind()
Server-Side events	CancelCommand, EditCommand, DeleteCommand, ItemCommand, SelectedIndexChanged, UpdateCommand, ItemCreated, ItemDataBound
Code	<asp:DataList id=DataList1 runat="server"></asp:DataList>
DataGrid
Beschrijving	Laat toe om een bepaald sjabloon te herhalen in tabelvorm.Je kan pagineren, sorteren en formatteren.
Attributen	DataSource, Items
Property's	DataSource, Items
Methodes	DataBind()
Server-Side events	CancelCommand, EditCommand, DeleteCommand, ItemCommand, SelectedIndexChanged, PageIndexChanged, SortCommand, UpdateCommand, ItemCreated, ItemDataBound
Code	<asp:DataGrid id=DataGrid1 runat="server"></asp:DataGrid>
GridView (2.0)
Beschrijving	Dit is een verbeterde DataGrid.
Attributen	DataSourceID, Rows
Property's	DataSourceID, Rows
Methodes	DataBind()
Server-Side events	CancelCommand, EditCommand, DeleteCommand, ItemCommand, SelectedIndexChanged, PageIndexChanged, UpdateCommand, ItemCreated, ItemDataBound
Code	<asp:GridView id=GridView1 runat="server"></asp:GridView>
FormView (2.0)
Beschrijving	Laat toe om een enkel record te tonen uit een gegevenslijst volgens zelf te maken sjablonen. Je kan pagineren, formatteren en wijzigen.
Attributen	DataSourceID
Property's	DataSourceID
Methodes	DataBind()
Server-Side events	CancelCommand, EditCommand, DeleteCommand, ItemCommand, PageIndexChanged, UpdateCommand, ItemCreated, ItemDataBound
Code	<asp:Formview id=Formview11 runat="server"></asp:FormView>
DetailsView (2.0)
Beschrijving	Laat toe om een enkel record in tabelvorm te tonen uit een gegevenslijst.Je kan pagineren, formatteren en wijzigen.
Attributen	DataSourceID
Property's	DataSourceID
Methodes	DataBind()
Server-Side events	CancelCommand, EditCommand, DeleteCommand, ItemCommand, PageIndexChanged, UpdateCommand, ItemCreated, ItemDataBound
Code	<asp:Detailsview id=Detailsview11 runat="server"></asp:DetailsView>
CheckBox
Beschrijving	Gelijkt erg op de normale HTML-checkbox-control
Attributen
Property's	Checked, Text, AutoPostback
Methodes
Server-Side events	CheckedChanged
Code	<asp:CheckBox id=CheckBox1 runat="server" />
CheckBoxList
Beschrijving	Toont een groep aankruisvakjes die dynamisch aangemaakt kunnen worden.
Attributen
Property's	DataSource, Items, AutoPostback, RepeatDirection
Methodes	Items.Add(), DataBind()
Server-Side events	SelectedIndexChanged
Code	<asp:CheckBoxList id=CheckBoxList1 runat="server"></asp:CheckBoxList>
RadioButton
Beschrijving	Gelijkt erg op de normale HTML-radioknop die een rondje toont dat je kan aanvinken
Attributen	Text, Checked, Groupname
Property's	Text, Checked, Groupname, AutoPostback
Methodes
Server-Side events	CheckedChanged
Code	<asp:RadioButton id=RadioButton1 runat="server" />
RadioButtonList
Beschrijving	Toont een groep radioknoppen die samenwerken.
Attributen	DataSource
Property's	Items, SelectedIndex, SelectedValue, SelectedItem, AutoPostback
Methodes	Items.Add(), DataBind()
Server-Side events	SelectedIndexChanged
Code	<asp:RadioButtonList id=RadioButtonList1 runat="server"></asp:RadioButtonList>
BulletedList (2.0)
Beschrijving	Toont een lijst met bullets.
Attributen	DataSource, BulletStyle
Property's	Items
Methodes	Items.Add(), DataBind()
Server-Side events
Code	<asp:BulletedList id="BulletedList1" runat="server"></asp:BulletedList>
Image
Beschrijving	Gelijkt erg op de gewone afbeelding in HTML
Attributen	ImageURL, AlternateText, ImageAlign
Property's	ImageURL, AlternateText, ImageAlign
Methodes
Server-Side events	geen
Code	<asp:Image id=Image1 runat="server"></asp:Image>
ImageMap (2.0)
Beschrijving	Zoals een Image, maar met hot spots waar je kan op klikken
Attributen	ImageURL
Property's	ImageURL, HotspotMode
Methodes
Server-Side events	Click
Code	<asp:ImageMap id=ImageMap1 runat="server" />
FileUpload
Beschrijving	Gebruikt om bestanden up te loaden.
Attributen
Property's	HasFile, FileName
Methodes	SaveAs(savePath)
Server-Side events
Code	<asp:FileUpload id=FileUpload1 runat="server" />
Panel
Beschrijving	Gebruikt om andere controls te groeperen. Komt in de pagina als als een <div> tag.
Attributen	BackImageURL, Wrap
Property's	Controls, DefaultButton, ScrollBar
Methodes	Controls.Add()
Server-Side events	geen
Code	<asp:Panel id=Panel1 runat="server">Panel</asp:Panel>
PlaceHolder
Beschrijving	Dient als een soort opvulsel, waar je later andere server-side controls kan toevoegen (tijdens run-time)
Attributen
Property's	Controls
Methodes	Controls.Add()
Server-Side events	geen
Code	<asp:PlaceHolder id="PlaceHolder1" runat="server"></asp:PlaceHolder>
MultiView (2.0)
Beschrijving	Dient als container voor View-controls. Slechts een van de View-controls kan op een gegeven moment zichtbaar zijn.
Attributen
Property's	ActiveViewIndex, Views
Methodes	SetActiveView()
Server-Side events	Activate, Deactivatie (op de View-controls)
Code	<asp:MultiView id="MultiView1" runat="server"> </asp:MultiView>
Wizard (2.0)
Beschrijving	Hiermee kan je een wizard maken, met knoppen voor "Volgende", "Vorige" en "Voltooien". Zet de verschillende stappen van de wizard in aparte WizardStep-templates.
Attributen
Property's	ActiveStepIndex
Methodes
Server-Side events	ActiveStepChanged, NextButtonClick, FinishButtonClick, CancelButtonClick
Code	<asp:Wizard id="Wizard1" runat="server"> </asp:Wizard>
Calendar
Beschrijving	Maakt een HTML versie van een kalender. Je kan de datum instellen of opvragen, navigeren, enz...
Attributen
Property's	SelectedDate, SelectedDates, VisibleDate
Methodes
Server-Side events	SelectionChanged, VisibleMonthChanged, DayRender
Code	<asp:Calendar id=Calendar1 runat="server"></asp:Calendar>
AdRotator
Beschrijving	Hiermee kan je een lijst met advertenties (banners) opgeven. Deze lijst wordt doorlopen en elke advertentie wordt achtereenvolgens getoond. De lijst maak je in de vorm van een XML-bestand
Attributen	advertisementfile
Property's
Methodes
Server-Side events	AdCreated
Code	<asp:AdRotator id=AdRotator1 runat="server"></asp:AdRotator>
Table
Beschrijving	Komt overeen met een HTML-tabel.
Attributen	Zoals een HTML-tabel
Property's	Rows, Row(i).Cells
Methodes	Rows.Add()
Server-Side events	geen
Code	<asp:Table id=Table1 runat="server"></asp:Table>
XML
Beschrijving	Gebruikt om XML-documenten weer te geven in HTML.
Attributen
Property's
Methodes
Server-Side events	geen
Code	<asp:Xml id="Xml1" runat="server"></asp:Xml>
Literal
Beschrijving	Zoals een label, maar het laat je toe letterlijk HTML-code toe te voegen. In tegenstelling tot een label wordt er geen <span> tag gemaakt, en op een literal kan je geen styles toepassen.
Attributen	Text
Property's	Text
Methodes
Server-Side events	geen
Code	<asp:Literal id="Literal1" runat="server"></asp:Literal>

Al deze controls passen hun HTML-uitvoer aan aan de browser van de gebruiker. Als dit Internet Explorer is kan de control er beter uitzien dankzij DHTML-extensies. In het andere geval wordt gewone HTML 3.2 standaard-code doorgestuurd.

Oefeningen

Maak een pagina met een checkbox "Gehuwd" en een invoervak "Naam huwelijkspartner". Alleen als de checkbox aangekruist is, wordt het invoervak getoond.
Laat de gebruiker een getal invullen. Bij het drukken van een knop toon je de vierkantswortel van dit getal.
Schrijf een pagina die het gewicht m berekent van een stalen buis, als de lengte l (in m), de dikte d (in mm), en de binnendiameter b (in m) gegeven zijn. De formule is m=3,9 π l d b.
Maak een pagina met een tekstvak waarin je een stuk HTML-code kan ingeven. Toon het resultaat in dezelfde pagina (bvb. met een Literal-control).
Maak een pagina waarin je kan kiezen tussen Nederlands of Frans met een radioknop. Afhankelijk van de keuze toon je de (willekeurige) inhoud in de juiste taal.
Doe hetzelfde, maar laat de gebruiker kiezen uit een lijst met 3 talen.
Maak een pagina waar je een wachtwoord moet ingeven. Het resultaat toont of het wachtwoord juist was.
Maak een formulier met een checkbox "Ik wil meer informatie". Als de gebruiker het vakje aankruist, geef je een panel met meer informatie, anders geef je een lege pagina.
Maak een pagina met twee kalendercontrols. Na het kiezen van twee datums wordt in een label het aantal dagen tussen beide datums getoond.
Maak een pagina met een kalendercontrol. Bij het klikken op een datum wordt getoond welke dag van de week dit is (maandag, dinsdag, enz.). Gebruik de expressie WeekDayName(WeekDay(datum),0,1) om de dag van de week van een gegeven datum te berekenen.

Werken met lijstcontrols

Omdat lijsten (keuzelijsten, radiolijsten, checkboxlijsten en bulletedlists) zo dikwijls voorkomen, en omdat ze een aantal gezamenlijke methodes hebben, bekijken we hier de mogelijkheden.

Er zijn vijf soorten lijsten:

ListBox
DropDownList
RadioButtonList
CheckBoxList
BulletedList (ASP.NET 2.0)

Alle vijf zijn ze afgeleid van het type "ListControl". Het grote voordeel hiervan is dat de meeste functies gemeenschappelijk zijn.

Alle lijstcontrols (zoals trouwens ook de HTML-control HtmlSelect) hebben een eigenschap Items. Deze property is van het type "ListItemCollection", en is een verzameling ListItems. Alle wijzigingen aan deze verzameling verschijnen automatisch in de lijstcontrol zelf.

Je kan vanuit Visual Studio items toevoegen via het Properties-paneel. Je kan ook items dynamisch toevoegen, bijvoorbeeld vanuit een databank (zie paragraaf -).

Elk item heeft drie belangrijke property's: Text, Value, Selected en Enabled. Voor een ListBox en een DropDownList komt elk item in de pagina in de vorm van een <option>-tag. Een item met Text "Brussel" en Value 1 krijgt dan deze vorm:

<option value="1">Brussel</option>

Hieronder vind je een aantal veelgebruikte expressies met lijstcontrols.

Ik wil:	Ik krijg het met:
het aantal items	mijnLijst.Items.Count
de index van het geselecteerde item (begint vanaf 0)	mijnLijst.SelectedIndex
weten of er iets geselecteerd is	If(mijnLijst.SelectedIndex>=0) Then
weten of het i-de item geselecteerd is (index van het eerste item=0)	If(mijnLijst.Items(i).Selected) Then
de tekst van het geselecteerde item	mijnLijst.SelectedItem.Text (let op: als er niets geselecteerd is, krijg je een fout)
de value van het geselecteerde item	mijnLijst.SelectedItem.Value (let op: als er niets geselecteerd is, krijg je een fout) of mijnLijst.SelectedValue (werkt altijd, als er niets geselecteerd is krijg je een lege streng)
zorgen dat er niets geselecteerd is	mijnLijst.SelectedIndex = -1
het item met index i selecteren (index van het eerste item=0)	mijnLijst.SelectedIndex = i of mijnLijst.Items(i).Selected = True (deze tweede manier werkt ook indien meerdere selecties tegelijk mogelijk zijn)
het item met tekst "x" selecteren	mijnLijst.SelectedIndex=-1 Dim li = mijnLijst.Items.FindByText("x") If(Not li Is Nothing) Then li.Selected = True
het item met value "x" selecteren	mijnLijst.SelectedIndex=-1 Dim li = mijnLijst.Items.FindByValue("x") If(Not li Is Nothing) Then li.Selected = True
een item toevoegen vanuit code (onderaan de lijst)	Dim li As New ListItem("de tekst","de waarde") mijnLijst.Items.Add(li)
een item toevoegen vanuit code (bovenaan de lijst)	Dim li As New ListItem("de tekst","de waarde") mijnLijst.Items.Insert(0,li)
het item met index i verwijderen	mijnLijst.Items.RemoveAt(i)
de lijst leegmaken	mijnLijst.Items.Clear()

Let op: een CheckBoxList kan meerdere geselecteerde items hebben. In een ListBox kan dat ook als de property SelectionMode ingesteld staat op Multiple. In dat geval geeft SelectedIndex alleen het eerste geselecteerde item aan, en dus moet je de lijst één voor één doorlopen om te kijken welke items er nog geselecteerd zijn. Dat kan met een gewone For-lus:

Dim aantalGeselecteerd As Integer = 0
Dim i As Integer
For i=0 To mijnLijst.Items.Count-1
	If(mijnLijst.Items(i).Selected) Then
		aantalGeselecteerd+=1
             ' doe eventueel iets met dit item
	End If
Next i

of met een For-Each-lus:

Dim aantalGeselecteerd As Integer = 0
Dim li As ListItem
For Each li In mijnLijst.Items
	If(li.Selected) Then
		aantalGeselecteerd+=1
             ' doe eventueel iets met dit item
	End If
Next li

Nog meer voorbeelden vind je op https://www.dnzone.com/ShowDetail.asp?NewsId=671.

Let op:
Zorg er goed voor dat je nooit een oneindige lus maakt in ASP.NET! De lus wordt immers op de server uitgevoerd, en je krijgt dan na enige tijd een Server Error, maar wat erger is: je vertraagt de server voor alle gebruikers.

Opmerking:
Je kan ervoor zorgen dat de pagina reageert zodra de gebruiker een selectie maakt in een lijstcontrol. Dit doe je door de property AutoPostBack van de lijstcontrol op True in te stellen.

Oefeningen

Maak een dropdownlijst gevuld met alle getallen van 1 tot 100.
Maak een pagina met een CheckBoxList met 5 soorten fruit. Als de gebruiker zijn/haar keuze gemaakt heeft toon je het aantal geselecteerde items.
Maak een pagina met een RadioButtonList met 2 keuzes: "fruit" en "groenten". Zet ook een Listbox op de pagina, met 3 voorbeelden van wat geselecteerd is in de RadioButtonList.
Zelfde oefening, maar vervang de RadioButtonList door een CheckBoxList.
Maak een pagina met 5 aankruisvakjes: Tafel, Stoel, Bed, Kast, en Alles. Als je op "Alles" klikt, moeten de 4 andere vakjes automatisch aangekruist worden. Tip: gebruik "AutoPostback".
Maak een pagina met een keuzelijst, een invoervak, en een knop. Als de gebruiker iets invult in het vak en op de knop drukt, dan wordt dit toegevoegd aan de lijst.
Zelfde oefening, maar nu ook met een knop "verwijderen", waarmee het geselecteerde item verwijderd wordt.
Zelfde oefening, maar nu ook met een knop "omhoog" en een knop "omlaag". Het geselecteerde item wordt verplaatst in de lijst.
Maak een pagina met twee lijsten en twee knoppen. Met de eerste knop breng je een item over van lijst1 naar lijst2, en met de tweede omgekeerd.

Client-side-gebeurtenissen verwerken

In tegenstelling tot HTML-controls kan je niet zomaar JavaScript toevoegen aan web-controls om gebeurtenissen zoals bijvoorbeeld OnClick te verwerken. De reden hiervoor is dat sommige web-controls al JavaScript gebruiken om automatische postback te verkrijgen, waardoor OnClick misschien al voor iets anders gebruikt wordt.

Daarom moet je een andere manier gebruiken via de eigenschap "Attributes" van de web-control.

Voorbeeld:

btnSubmit.Attributes.Add("onMouseOver", "bepaaldeClientCode();")

waarin bepaaldeClientCode() een functie uit een client-side JavaScript blok is.

Een veelgebruikt voorbeeld hiervan is een "verwijder"-knop. Meestal wil je dan een waarschuwing tonen, zodat de gebruiker niet per ongeluk op de knop kan klikken. Dit kan je doen met de volgende code:

btnVerwijder.Attributes.Add("onClick", "return confirm('Ben je wel zeker?');")

Bij knoppen in ASP.NET 2.0 kan het nog eenvoudiger, die hebben een OnClientClick-event, dat je kan instellen. De code hierboven wordt dan:

btnVerwijder.OnClientClick="return confirm('Ben je wel zeker?');"

Commentaar tussen web-controls

Je zou kunnen denken dat je de gewone commentaarcodes () voor HTML kan gebruiken tussen de web-control-tags. Dit werkt echter niet.

Voor web-controls gebruik je deze commentaartekens:

<%--    --%>

Bijvoorbeeld:

<%--     <asp:Label runat="server">Niet getoond</asp:Label>      --%>

Binnen de <script>-tags gebruik je natuurlijk het commentaarteken voor VB (de apostrof).

← Foutzoeken

Programmeren in ASP.NET

Webformulieren →