Hoofdstuk 27: Data Controls

27.1          Inleiding
27.2          GridView

27.3          DropDownList
27.4          DetailsView
27.5          DataList

Oefeningen hoofdstuk 27

27.1         Inleiding Data Controls

DataBound Web Server Controls worden gebonden aan een databron, zodat de opgehaalde gegevens uit de database getoond kunnen worden aan de gebruikers van de website. De voornaamste controls die verder in dit hoofdstuk in detail besproken worden, zijn:

  • GridView
  • FormView
  • DetailsView
  • DataList

In het tabblad Data van de Toolbox zijn deze controls terug te vinden.

Figuur 27.1: DataBound Web Server Controls

Figuur 27.1: DataBound Web Server Controls

Top

27.2         GridView

Een GridView is verbonden met de gegevens van een database en geeft alle records weer in de vorm van een rooster.

In het onderstaande voorbeeld worden de velden naam en gemeente weergegeven in een GridView, alfabetisch gerangschikt volgens naam.

Figuur 27.2: Resultaat VoorbeeldGridView

Figuur 27.2: Resultaat VoorbeeldGridView

Open een nieuwe site “H27” en voeg een webpagina VoorbeeldGridView toe. Plaats een GridView “dgvKlanten” op de pagina.

Figuur 27.3: GridView dgvKlanten

Figuur 27.3: GridView dgvKlanten

Via de SmartTag kan de GridView voorzien worden van de gewenste opmaak. Hier kan ook een Data Source gekoppeld worden aan de GridView. De Data Source is nog niet aangemaakt, daarom wordt gekozen voor de optie <New data source…>.

Doorloop de stappen in de Data Source Configuration Wizard.

Kies voor Database en geef de datasource een passende naam.

Figuur 27.4: DataSource dtsVoorbeeldGridView

Figuur 27.4: DataSource dtsVoorbeeldGridView

Klik op OK en kies in het volgende venster om een verbinding te maken met ArtemisSQL.mdf.

Figuur 27.5: Verbinding met ArtemisSQL.mdf

Figuur 27.5: Verbinding met ArtemisSQL.mdf

Klik vervolgens op “Next” en in het volgende venster opnieuw op “Next” om de ConnectionString te bewaren.

Figuur 27.6: ConnectionString bewaren

Figuur 27.6: ConnectionString bewaren

Klik nogmaals op “Next” om in het volgende venster de velden te selecteren die weergegeven worden in de GridView.

Figuur 27.7: Velden selecteren

Figuur 27.7: Velden selecteren

Klik op “Order By” om in te stellen dat de gegevens alfabetisch gesorteerd worden op naam. Klik op “OK” om het venster te sluiten.

Figuur 27.8: Order By

Figuur 27.8: Order By

Klik vervolgens op “Next” om in het volgende venster de Query te testen of via de knop “Finish” de wizard af te sluiten.

Figuur 27.9: Wizard afsluiten

Figuur 27.9: Wizard afsluiten

Bij een Data Source met veel records is het aan te raden om de optie “Enable Paging” aan te vinken zodat de gegevens niet in één lange lijst verschijnen. Via deze optie kan ingesteld worden hoeveel records per pagina worden weergegeven.

Figuur 27.10: Enable Paging

Figuur 27.10: Enable Paging

Via de property “PageSize” kan ingesteld worden hoeveel records per pagina worden weergegeven.

Figuur 27.11: PageSize

Figuur 27.11: PageSize

Via de optie “Enable Sorting” kan er gesorteerd worden op elke gegevenskolom in de GridView.

De optie “Enable Selection” maakt het mogelijk om rijen te selecteren.

Figuur 27.12: Enable Sorting en Selection

Figuur 27.12: Enable Sorting en Selection

Via Auto Format kan de lay-out van de GridView aangepast worden.
Top

27.3         DropDownList

Maak in de website “H27” het formulier “VoorbeeldDropDownList.aspx” aan. Op deze pagina wordt een DropDownList aangemaakt waarin de namen van de klanten alfabetisch gerangschikt staan.

Figuur 27.13: Resultaat VoorbeeldDropDownList

Figuur 27.13: Resultaat VoorbeeldDropDownList

Voeg een DropDownList toe aan het formulier en geef een passende naam.

Figuur 27.14: DropDownList

Figuur 27.14: DropDownList

Kies via de SmartTag de optie “Choose Data Source” en selecteer vervolgens “<New Data Source…>”.

Selecteer “Database SQL”, geef een geschikte naam en klik op “OK”.

Figuur 27.15: Nieuwe Data Source toevoegen

Figuur 27.15: Nieuwe Data Source toevoegen

Kies voor de bestaande connection “ArtemisSQLConnectionString” en klik op “Next”.

Figuur 27.16: Connection String

Figuur 27.16: Connection String

Selecteer het veld Naam in de tblKlanten en stel in dat de namen alfabetisch gerangschikt worden.

Figuur 27.17: Query configureren

Figuur 27.17: Query configureren

Klik vervolgens op “Next” om in het volgende venster de Query te testen of via de knop “Finish” de wizard af te sluiten.
Top

27.4         DetailsView

DetailsView is vergelijkbaar met een GridView. Terwijl een GridView een rooster is waarin alle records getoond worden, wordt in een DetailsView één record getoond.

Voeg aan de website “H27” een formulier “VoorbeeldDetailsView” toe. In dit formulier worden aan de hand van een DetailsView de gegevens van de klanten getoond record per record. De klanten worden alfabetisch gerangschikt op naam. Het is mogelijk om de gegevens van de klanten te bewerken, te verwijderen en toe te voegen.

Figuur 27.18: DetailsView

Figuur 27.18: DetailsView

Plaats een DetailsView op het formulier, pas de naam aan en kies een nieuwe Data Source.

Figuur 27.19: DetailsView

Figuur 27.19: DetailsView

Doorloop de verschillende stappen van de wizard. Deze stappen zijn analoog met stappen die doorlopen werden in voorbeelden VoorbeeldGridView en VoorbeeldDropDownList eerder in dit hoofdstuk.

Kies voor * om alle gegevens van de tblKlanten te seleceten.

Figuur 27.20: Query wizard

Figuur 27.20: Query wizard

Klik vervolgens op “Advanced” om de statements “Insert”, “Update” en “Delete” te genereren.

Figuur 27.21: Insert, Update en Delete

Figuur 27.21: Insert, Update en Delete

Voorzie de DetailsView van Inserting, Editing en Deleting. Vink ook de optie “Enable Paging” aan.

Figuur 27.22: Opties DetailsView

Figuur 27.22: Opties DetailsView

Top

27.5         DataList

In een DataList worden rijen gegevens uit een Data Source weergegeven in een lijst.

Voeg aan de website “H27” het formulier “VoorbeeldDataList” toe. In de DataList worden de adresgegevens van de klanten weergegeven in een lijst.

Figuur 27.23: VoorbeeldDataList

Figuur 27.23: VoorbeeldDataList

Plaats een DataList op het formulier en doorloop de stappen om de Data Source toe te voegen.

Figuur 27.24: DataList

Figuur 27.24: DataList

In de DataSource worden de velden Naam, Straat, Postnr en Gemeente uit de tabel tblKlanten opgenomen.

Figuur 27.25: DataSource

Figuur 27.25: DataSource

De weergave van de DataList kan gewijzigd worden via “Edit Templates”.
Top

Oefeningen hoofdstuk 27

Oefening 27-1     Uitbreiding VoorbeeldGridView: Onder de GridView worden de naam en de gemeente van de geselecteerde klant weergegeven.

Oefening 27-2     Ontwerp een webpagina “Klantengegevens.aspx” met een GridView waarin alle velden van de tblKlanten worden weergegeven. Rangschik de klanten op klantnummer. Via de GridView kunnen de klantengegevens aangepast en verwijderd worden.

Oefening 27-3     Verander in de webpagina “Klantengegevens.aspx” de hoofding van de kolom met de command fields in “Bewerken”.

Oefening 27-4     Uitbreiding VoorbeeldDropDownList: Toon in de DropDownList naast de klantnaam ook de gemeente.

Oefening 27-5     Ontwerp een formulier zodat de gedetailleerde gegevens van een geselecteerde klant uit een GridView getoond worden in een DetailsView.

Extra oefeningen hoofdstuk 27

In de extra oefeningen uit dit hoofdstuk wordt gewerkt met de database Sportclub. Deze database kan hier gedownload worden.

Extra oefening 27-6     Ontwerp in een website “Sportclub” een webpagina “OverzichtVoetbal.aspx”. Voorzie deze webpagina van een GridView die alle leden weergeeft die voetballen.

Extra oefening 27-7     Voeg aan de website “Sportclub” een pagina “OverzichtBetalingen.aspx” toe waarop de velden Naam, Adres, Postnummer, Gemeente, Omschrijving sporttak, Lidgeld en Betaald getoond worden in een GridView. Gebruik de tabellen tblLeden, tblSporttakken,en tblInschrijvingen. Sorteer de gegevens alfabetisch op naam en vervolgens op omschrijving.

Extra oefening 27-8     Toon in een GridView informatie over leden van de sportclub van in een DropDownList geselecteerde gemeente.

Extra oefening 27-9     Ontwerp een webformulier “Filter.aspx” die in een DropDownList de namen van de leden toont en in een GridView de sporten waarvoor ze ingeschreven zijn.

Extra oefening 27-10    Ontwerp een alfabetische adressenlijst van de leden in een DataList. Pas de template aan zodat je onderstaand resultaat bekomt.

Figuur 27-26: Resultaat oefening 27-10

Figuur 27-26: Resultaat oefening 27-10

Extra oefening 27-11     Ontwerp een webformulier waarop de gebruiker een sporttak kan selecteren in een DropDownList. De ingeschreven leden worden getoond in een DataList. Van elk lid worden de volgende gegevens getoond in een DataList: Naam, Adres, Gemeente, Geslacht, Lidgeld en Betaald.

OPLOSSINGEN
Top

Vorige          Volgende