Programmeren in ASP.NET/Web-server-controls
Inleiding
[bewerken]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?
[bewerken]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?
[bewerken]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
[bewerken]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
[bewerken]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
[bewerken]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
[bewerken]- 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
[bewerken]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
[bewerken]- 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
[bewerken]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
[bewerken]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).