De meeste dynamische websites en zowat alle web-gebaseerde applicaties vereisen wellicht toegang tot een gegevensbron (data source). In de cursus C sharp maakten we al kennis met ArrayList en HashTableIn de cursus ADO.Net leerden we DataSet, DataTable, DataView, SqlDataReader kennen. Deze kennis zullen we hier opnieuw nodig hebben.
We zullen hier ook kennis maken met een aantal nieuwe ASP.Net server controls zoals de Repeater, GridView en DataList controls.
Start een nieuwe Blank Solution in VS 2005: ListControls
Voeg een Web Site toe: Site
Verwijder Default.aspx
Data Binding Syntax
Het principe van server-side databinding is om ASP.NET zo ver te krijgen dat het een of meer waarden van een datasource in een control op een webpagina opneemt. De basissyntax hiervoor lijkt op een server-side scriptblok, met een '#' - karakter als indicator dat het hier om een databinding opdracht gaat.
<%# naam van databron %>
Een dergelijk codeblok bevat geen uitvoerbare opdrachten maar specifiekek databinding opdrachten.
Er zijn twee scenario's waarin we een control wensen te binden aan een databron :
Single-value data binding: we hebben een enkelvoudige waarde die we aan een control wensen te binden. Bv. we wensen een attribuut van een control op een waarde in te stellen uit een gegevensbron.
Repeated-value data binding: de databron bevat meerdere waarden. We willen bijvoorbeeld een ListBox vullen met een aantal waarden.
Single Value data binding
Voeg een nieuwe Web Form toe: SingleValue.aspx
in SingleValue.aspx.cs
protected string titel = "Data binding";
protected string Figuur
{
get { return "eekhoorn.jpg"; }
}
public int TelOp (int a, int b)
{
return a + b;
}
private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
DataBind();
}
in SingleValue.aspx
<form id="Form1" method="post" runat="server">
<h1><%# titel %></h1>
<asp:Image id="Image1" runat="server" ImageUrl='<%# "images/" +Figuur %>'>
</asp:Image>
<br/><asp:Label id="Label1" runat="server"><%# "bron van de figuur: " +Image1.ImageUrl %></asp:Label>
<h2><%# "Optellen van 4 en 8 levert: " +TelOp(4,8) %></h2>
</form>
Hier gebruiken we single-value databinding op een aantal verschillende manieren.
databinding aan een variabele
databinding aan een eigenschap
databinding aan een eigenschap van een control
databinding aan de retourwaarde van een methode
Om de binding te activeren staat in de Page_Load methode de opdracht DataBind. Met deze methode van de Page-klasse zorg je ervoor dat alle controls gebonden worden. Het is de enige methode om er voor te zorgen dat we databinding verkrijgen zoals hierboven : databinding waarbij de binding niet in een control gebeurt. Gebruik je Controls die databinding ondersteunen, dan kan je de DataBind methode van de control gebruiken.
Repeated-Value data-binding: basisprincipes
Data-binding wordt pas heel interessant wanneer je gebruik maakt van een bron die meerdere waarden bevat. Elementen die als DataSource kunnen dienen zijn:
In ASP.net zijn er Controls die kunnen gebonden worden aan een datasource die meerdere items bevat:
DropDownList
ListBox
RadioButtonList
CheckBoxList
Repeater
DataList
GridView
De HTML-output die deze controls genereren hangt sterk af van eigenschappen die je instelt in de controls.
DropDownList, ListBox, RadioButtonList en CheckBoxList kan je zonder enige moeite aan een Datasource koppelen met de methode DataBind.
Repeater, DataList en DataGrid koppel je aan een DataSource door gebruik te maken van templates: je kan voor elke waarde in de datasource opgeven welke inhoud op de pagina moet verschijnen en welke opmaak er moet worden toegepast.
In deze toepassing leren we hoe we op de eenvoudigste manier aan repeated-value data-binding doen.
We zullen hiervoor meteen gebruik maken van een gelaagde architectuur:
Prestentation: GUI met Server Controls
Logic: logica en eigen klassen met custom objecten
DAL: ophalen van de gegevens
De Presentatielaag raadpleegt de Logic-laag, de Logic-laag raadpleegt de DAL-laag. We zorgen ervoor dat telkens enkel met de buurlaag verbonden wordt: Presentatie mag dus niet rechtsreeks met DAL verbinden.
Voeg aan de solution een nieuw project toe: Class Library: DAL
Verwijder Class1.cs
Voeg een nieuwe klasse DataAccess toe
DataAccess.cs
using System;
using System.Collections;
using System.Collections.Generic;
using System.Text;
namespace DAL
{
public class DataAccess
{
public static ArrayList GetGroenten()
{
ArrayList groenten = new ArrayList();
groenten.Add("Sla");
groenten.Add("Wortel");
groenten.Add("Prei");
groenten.Add("Selder");
groenten.Add("Paprika");
groenten.Add("Ui");
groenten.Add("Courgette");
groenten.Sort();
return groenten;
}
public static Hashtable GetLanden()
{
Hashtable landen = new Hashtable();
landen.Add("NL", "Nederland");
landen.Add("B", "Belgie");
landen.Add("Fr", "Frankrijk");
landen.Add("Lux", "Luxemburg");
return landen;
}
}
}
Build de class library
Voeg aan de solution een nieuw project toe: Class Library: Logic
Leg een referentie naar DAL.dll
Verwijder Class1.cs
Voeg een nieuwe klasse Business toe:
using System;
using System.Collections;
using System.Collections.Generic;
using System.Text;
using DAL;
namespace Logic
{
public class Business
{
public static ArrayList GetGroenten()
{
return DataAccess.GetGroenten();
}
public static Hashtable GetLanden()
{
return DataAccess.GetLanden();
}
}
}
Voeg aan de Site een referentie toe naar Logic.dll
Sleep op een nieuwe pagina RepeatedValue.aspx twee DropDownLists en twee ListBoxen.
In de Page_Load routine vullen we deze objecten
Met de methode DataBind van de pagina binden we alle controls.
De controls hebben zelf ook een methode DataBind, mocht je ze niet allen willen binden
We koppelen de ArrayList met groenten aan een DropDownList en een ListBox
Voor de Hashtable ligt het iets gecompliceerder: deze heeft een key- en een value-waarde. Geef deze waarde op voor de eigenschappen DataValueField (key) en DataTextField (tekstwaarde)
Je kan dit ook regelen met Visual Studio 2005, zonder code te moeten schrijven:
Sleep een DropDownList op de pagina
Kies Choose DataSource...
Bij Select a datasource kies je voor new DataSource
Kies voor Object (wij gaan niet rechstreeks met een database verbinden, maar gebruiken onze DAL-laag
Geef als ID ODSGroenten
Kies Logic.Business als business object
Kies GetGroenten als Select-methode
Beëindig de Wizard zonder verdere aanpassingen
Voor de ListBox met de groenten kies je nu heel eenvoudig ODSGroenten als DataSource
Voor de DropDownList met landen maak je een nieuwe Object Data Source ODSLanden aan en geef je value en key in als display en value-waarden.
Je kan analoog werken voor een CheckBoxList en een RadioButtonList.
Merk op dat bij het werken met een ArrayList als bron, in de gegenereerde HTML-code voor de elementen het attribuut value dezelfde waarde krijgt als de eigenlijke tekst in de OPTION-tag.
Repeater - Container.DataItem - Eval
De control Repeater geeft je een volledige vrijheid in de manier waarop de items uit de DataSource op het scherm worden gepresenteerd.
Wanneer je een Repeater op een pagina sleept krijg je in Visual Studio de melding om in HTML-view de Templates aan te passen.
De Repeater control ondersteund een aantal templates. Hiemee kan je opgeven hoe de datagegevens op het scherm worden weergegeven:
Template
Omschrijving
ItemTemplate
Inhoud hiervan wordt herhaald voor elk item uit de DataSource. Deze template is vereist voor elke Repeater.
HeaderTemplate
Wordt weergegeven boven de items uit de DataSource
FooterTemplate
Wordt weergegeven onder de items uit de DataSource
AlternatingItemTemplate
Inhoud en opmaak voor afwisselende items
SeparatorTemplate
Wordt weergegeven tussen de verschillende items
Voorzie twee Repeaters.
Repeater.aspx.cs
...
using Logic;
public partial class Repeater : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Repeater1.DataSource = Business.GetGroenten();
Repeater2.DataSource = Business.GetLanden();
DataBind();
}
}
}
Om iets op het scherm te laten weergeven moeten we in de code de nodige aanpassingen doen:
De opdracht Container.DataItem verwijst naar een item uit de DataSource van de Container-Control: de Repeater.
Als SeparatorTemplate werd hier een streepje opgegeven: de verschillende items worden gescheiden door een streepje.
Koppel je de tweede Repeater aan de Hashtablelanden dan moet je weer specifiëren welk veld uit de DataSource je wenst weer te geven. Een Hashtable is een DictionaryEntry, we moeten het DataItem dus eerst typecasten naar deze klasse wanneer we de eigenschappen Key en Value willen aanspreken.
Een andere manier om velden uit een Datasource op te vragen is met de methode Eval van de klasse DataBinder. Deze methode is intern trager dan de standaard databinding maar biedt ook een manier om gegevens in een bepaald formaat te zetten, in een optioneel derde argument. Je hoeft ook niet meer aan de typecasting te denken.
DataBinder.Eval
In ASP.Net 1.1 moet je werken met volgende syntax:
Het formaat geef je aan tussen accolades. Het formaat zal steeds beginnen met het cijfer nul, wat een plaatsvervanger is voor het echte item. Daarna tik je een dubbele punt gevolgd door het gewenste formaat. Meer over opmaak van gegevens op MSDN.
Voorbeeld: "{0:#,##0,00}" als formaat geeft aan dat je een scheidingsteken wil voor de duizendtallen, zeker een cijfer voor het decimaal scheidingsteken wenst te zien, en twee cijfers erna.
Repeater met Custom Klasse
Voeg in de DAL-klasse DataAccess een methode toe:
...
public static DataTable GetFietsRoutes()
{
DataTable fietsroutes = new DataTable();
DataColumn id = new DataColumn("id");
id.DataType = typeof(int);
fietsroutes.Columns.Add(id);
DataColumn naam = new DataColumn("naam");
naam.DataType = typeof(string);
fietsroutes.Columns.Add(naam);
DataColumn afstand = new DataColumn("afstand");
afstand.DataType = typeof(float);
fietsroutes.Columns.Add(afstand);
fietsroutes.Rows.Add(0, "Kastelenroute", 56);
fietsroutes.Rows.Add(1, "Wijnendaleroute", 59);
fietsroutes.Rows.Add(2, "Oude Dijkenroute", 43);
fietsroutes.Rows.Add(3, "Riante Polderroute", 44);
fietsroutes.Rows.Add(4, "Permekeroute", 27);
int aantal = fietsroutes.Rows.Count;
return fietsroutes;
}
}
}
Voeg in de Class Library Logic een Class-file Fietsroute.cs toe met volgende drie klassen:
Fietsroute.cs
using System;
using System.Collections;
using System.Collections.Generic;
using System.Text;
using System.Data;
using DAL;
namespace Logic
{
public class Fietsroute
{
private int id;
public int Id
{
get { return id; }
set { id = value; }
}
private string naam;
public string Naam
{
get { return naam; }
set { naam = value; }
}
private double afstand;
public double Afstand
{
get { return afstand; }
set { afstand = value; }
}
public Fietsroute()
{
}
public Fietsroute(int id, string naam, double afstand )
{
Id = id;
Naam = naam;
Afstand = afstand;
}
}
public class Fietsroutecollection : CollectionBase
{
public Fietsroutecollection()
{
}
public void Add(Fietsroute f)
{
InnerList.Add(f);
}
//indexer: "Item"-property
public Fietsroute this[int index]
{
get { return (Fietsroute)InnerList[index]; }
set { InnerList[index] = value; }
}
}
public class Fietsroutes
{
public static Fietsroutecollection GetFietsRoutes()
{
DataTable dt = DataAccess.GetFietsRoutes();
Fietsroutecollection fietsroutes = new Fietsroutecollection();
foreach (DataRow rij in dt.Rows)
{
Fietsroute f = new Fietsroute();
f.Id = Convert.ToInt32(rij["id"]);
f.Naam = rij["naam"].ToString();
f.Afstand = Convert.ToDouble(rij["afstand"]);
fietsroutes.Add(f);
}
return fietsroutes;
}
}
}
Voeg op een WebForm een Repeater toe voor het ophalen van fietsroutegegevens.
Kies als Data Source een Object Data Source op basis van de klasse Logic.Fietsroutes en de methode GetFietsRoutes.
Voor het handige gebruik van Object Data Sources kan je gebruik maken van attributen voor je dataaccess-methoden in de Logic-layer.
Op deze manier kan je gebruik maken van de optie "Show only data components" bij het instellen van de Object Data Source.
Je kan ook aangeven welke methoden je gaat gebruiken voor SELECT, UPDATE, INSERT en DELETE-opdrachten.
Business.cs
...
namespace Logic
{
[DataObject]
public class Business
{
[DataObjectMethod(DataObjectMethodType.Select)]
public static ArrayList GetGroenten()
{
return DataAccess.GetGroenten();
}
[DataObjectMethod(DataObjectMethodType.Select)]
public static Hashtable GetLanden()
{
return DataAccess.GetLanden();
}
}
}
Fietsroute.cs
...
[DataObject]
public class Fietsroutes
{
[DataObjectMethod(DataObjectMethodType.Select)]
public static Fietsroutecollection GetFietsRoutes()
{
DataTable dt = DataAccess.GetFietsRoutes();
int aantal = dt.Rows.Count;
Fietsroutecollection fietsroutes = new Fietsroutecollection();
foreach (DataRow rij in dt.Rows)
{
Fietsroute f = new Fietsroute();
f.Id = Convert.ToInt32(rij["id"]);
f.Naam = rij["naam"].ToString();
f.Afstand = Convert.ToDouble(rij["afstand"]);
fietsroutes.Add(f);
}
return fietsroutes;
}
}
