Het besturingselement GridView is een aan gegevens gebonden raster met meerdere kolommen waarmee je verschillende typen kolommen kan dfiniëren. Deze kolommen voorzien de rasterinhoud niet alleen van een lay-out, maar voegen ook functionaliteit toe om gegevens te selecteren, bewerken, sorteren en pagineren. De GridView biedt ook functionaliteit voor volledige aanpassing van de uitvoer middels het gebruik van sjabloonkolommen.
Je kan een GridView binden aan gegevensbron zoals een database, maar ook aan eenvoudige structuren zoals een ArrayList of aan je eigen collectie van Custom Objecten.
Een DataGrid wordt door de browser gerendered als een Table.
Aangezien we in deze lessenreeks gebruik maken van een gestructureerde onderverdeling in klassen, volgen we verder deze werkwijze.
Kies in de App_Data-map van de Site voor: New Item... - SQL Database - Nascholing.mdf (of maak een nieuwe Database in SQL Server 2000 / 2005)
Maak verbinding met de database via Server Explorer
Maak een table nascholing aan:
De id-kolom is een identity-kolom
Voeg een aantal voorbeeldgegevens in:
Maak een Stored Procedure aan:
CREATE PROCEDURE dbo.NascholingSelect
AS
Select id, naam, plaats, datum, prijs, actief
FROM nascholing
RETURN
Voorzie de connectiestring in Web.Config van de Site
Maak in de namespace DAL een klasse NascholingDB aan:
using System;
using System.Collections.Generic;
using System.Text;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
namespace DAL
{
public class NascholingDB
{
public static DataSet GetNascholingen()
{
SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["NascholingConn"].ConnectionString);
SqlCommand myCommand = new SqlCommand("NascholingSelect", myConnection);
myCommand.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter(myCommand);
DataSet ds = new DataSet("DsNascholing");
da.Fill(ds, "Nascholingen");
return ds;
}
}
}
Maak in de namespace Logic Nascholing.cs aan:
using System;
using System.Collections.Generic;
using System.Text;
using System.Collections;
using System.Data;
using DAL;
namespace Logic
{
public class Nascholing
{
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 string plaats;
public string Plaats
{
get { return plaats; }
set { plaats = value; }
}
private DateTime datum;
public DateTime Datum
{
get { return datum; }
set { datum = value; }
}
private Decimal prijs;
public Decimal Prijs
{
get { return prijs; }
set { prijs = value; }
}
private Boolean actief;
public Boolean Actief
{
get { return actief; }
set { actief = value; }
}
public Nascholing()
{
}
}
public class Nascholingcollection : CollectionBase
{
public Nascholingcollection()
{
}
public void Add(Nascholing n)
{
InnerList.Add(n);
}
//indexer: "Item"-property
public Nascholing this[int index]
{
get { return (Nascholing)InnerList[index]; }
set { InnerList[index] = value; }
}
}
public class Nascholingen
{
public static Nascholingcollection GetNascholingen()
{
DataSet ds = NascholingDB.GetNascholingen();
DataTable dt = ds.Tables["Nascholingen"];
Nascholingcollection nc = new Nascholingcollection();
for (int i = 0; i < dt.Rows.Count; i++)
{
Nascholing d = new Nascholing();
d.Id = Convert.ToInt32(dt.Rows[i]["id"]);
d.Naam = dt.Rows[i]["naam"].ToString();
d.Plaats = dt.Rows[i]["plaats"].ToString();
d.Datum = Convert.ToDateTime(dt.Rows[i]["datum"]);
d.Prijs = Convert.ToDecimal(dt.Rows[i]["prijs"]);
d.Actief = Convert.ToBoolean(dt.Rows[i]["actief"]);
nc.Add(d);
}
return nc;
}
}
}
Gridview: gegevens tonen
Handmatig binden aan Business object
In dit voorbeeld doen we het binden van de gegevens aan de GridView handmatig: in de methode Page_Load van de pagina stellen we de custom collectie met nascholingen in als DataSource van de GridView.
Maak in de Site een nieuwe Web Form: Gridview_nascholing.aspx
Sleep een GridView op de Web Form: GVnascholing
Geef als Auto format "Sand & Sky"
Voorzie in Gridview_nascholing.aspx.cs
...
using Logic;
public partial class Gridview_nascholing : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GVnascholing.DataSource = Nascholingen.GetNascholingen();
GVnascholing.DataBind();
}
}
}
Met een ObjectDataSource
Werk je met een ObjectDataSource, dan hoef je het binden van de data aan de GridView niet meer zelf te doen in de code.
Vanzelfsprekend kan je de ObjectDataSource ook voorzien van insert, update en delete-functionaliteiten (door de achterliggende klassen aan te passen en de data source aan te passen) om aldus deze acties vanuit de GridView te kunnen uitvoeren.
Sleep een GridViewGVnascholingODS op de Web Form
Geef als Auto Format "Rainy Day"
Via smart tags kies je voor Choose Datasource: New Data Source
Kies Object als Data Source type
Geef als naam ODSnascholing op
Logic.Nascholingen is het Business object
GetNascholingen is de select-methode
Met een SqlDataSource
Dit is de quick & dirty manier van werken: je koppelt de GridView rechtstreeks aan de SQL-Database. DAL en LOGIC uit onze toepassing worden hier niet gebruikt.
Plaats een GridViewGVnascholingSDS op de Web Form
Geef als Auto Format "Autumn"
Via smart tags kies je voor Choose Datasource: New Data Source
Kies Database als Data Source type
Geef als naam SDSnascholing op
Kies NascholingConn als Data Connection (de connectiestring in Web.config)
We werken met onze eigen Stored Procedure
We hebben een Stored Procedure voorzien voor het selecteren van de record.
Als je reeds update, insert en delete-procedures hebt gemaakt kan je deze nu koppelen aan de GridView, dit kan later ook via Configure Data Source van de GridView
Test de Stored Procedure en druk op Finish
Met een typed DataSet en automatisch gegenereerde Stored Procedures
Deze keer maken we eerste een typed DataSet aan en binden we de GridView aan een TableAdapter van de DataSet. Het grote voordeel van deze werkwijze is dat je Visual Studio 2005 de opdracht kan geven om Stored Procedures (of ingebedde SQL) automatisch voor jou aan te maken. Deze manier van werken stelt je echt in staat aan RAD (Rapid Application Development) te doen. Opgepast, onze eigen DAL en LOGIC-laag worden hier niet meer gebruikt.
Voeg een nieuw item toe aan de site: DataSet: DSnascholing
Accepteer het voorstel om de DataSet in de App_Code map te plaatsen
Kies NascholingConn als Data Connectie
We laten de Stored Procedures door Visual Studio aanmaken
We zijn heel erg lui en kiezen de Query Builder om de Select Stored Procedure te genereren
Voeg de tabel nascholing toe aan de Query Builder
Gebruik alle velden en sorteer oplopend op naam
Via advanced options geef je aan dat je de Insert, Update en Delete Statements wenst aan te maken
Geef de Stored Procedures een naam
Geef aan welke methoden er voor de TableAdapter aangemaakt moeten worden
Hiep hiep hoera, enkel nog op finish drukken...
Plaats een GridViewGVnascholingDS op de Web Form
Geef als Auto Format "Oceanica"
Via smart tags kies je voor Choose Datasource: New Data Source
Kies Object als Data Source type
Geef als naam ODSnascholingDS op
Kies de TableAdapter uit de DataSet als Data Source
De methoden voor Select, Update, Insert en Delete werden netjes aan de ObjectDataSource gekoppeld!
Een keuze maken uit de verschillende methoden
We hebben nu 4 manieren gezien om een GridView te binden aan een DataSource. Deze manieren kan je ook toepassen voor andere DataControls.
Welke manier moet je nu gebruiken in je toepassingen?
De grootste flexibiliteit heb je bij het manueel koppelen aan je eigen methoden uit bvb. de Logische laag van je applicatie: je hebt alle code zelf in beheer en kan ingrijpen waar nodig. Deze manier van werken is echter het meest arbeidsintensief en vereist een grondige kennis van de achterliggende principes.
Deze manier van werken is eigenlijk enkel aan te raden wanneer je enkel gegevens wenst te tonen in de applicatie.
Om te sorteren en te pagineren moet je zelf je klassen en stored procedures aanpassen.
Een goede middenweg tussen RAD en onderhoudbare en flexibele code is het werken met een ObjectDataSource. Het maken van klassen en Stored Procedures blijft volledig je eigen taak.
Naar sortering toe heb je wel nog wat extra werk voor de boeg.
Snel snel iets maken kan gebeuren via de SqlDataSource, als de stored procedures er al zijn, en je wenst vlug resultaat in je applicatie is dit de manier om te werken.
Daar alle code deel uitmaakt van je aspx-source is het wel niet geschikt voor onderhoudsintensieve toepassingen, en strookt het niet met de principes voor herbruikbare code.
Een weg die momenteel heel vaak wordt bewandeld is die van de Typed DataSet. Daar Visual Studio voor jou een DataSet met de nodige Eigenschappen en methoden kan aanmaken is dit een heel aanvaarbare oplossing. Eigenlijk maakt VS voor jou de DataAccess-layer. Dit is dan misschien een nadeel: je eigen klassen zijn niet meer de herbruikbare componenten, maar je werkt met een automatisch gecreëerde DataSet.
Deze manier werkt gerbuikt dus ook een ObjectDataSource, maar deze keer gekoppeld aan een gegenereerde DataSet in plaats van aan onze eigen Logische- of datalaag.
Per resultaattabel wordt dan ook een TableAdapter aangemaakt die alle nodige acties ter beschikking stelt.
Daar deze weg op volautomische en toch gestructureerde manier toegang verleent tot data-objecten is het veelal een goede keuze.
Daar deze manier van werken heel gebruiksvriendelijk is voor verder acties naar selecteren, sorteren en pagineren toe zullen we dit straks wat verder uitdiepen.
Als nadeel kan wel geopperd worden dat het werken met een DataSet voor grotere toepassing performatieverlies kan geven.
GridView: kolommen definiëren
In bovenstaande voorbeelden hebben we telkens gegevens in een GridView geplaatst door eenvoudigweg de GridView te binden aan een DataSource.
De GridView werd automatisch gevuld met gegevens en op de webpagina getoond. Je wil natuurlijk de bestaande kolommen aanpassen en eventueel aanvullen. Dit kunnen we allemaal regelen met onze editor Visual Studio 2005 of natuurlijk in de source-code van het aspx-bestand.
Kies je via de smart tag van de GridView voor Edit Columns... dan krijg je een dialoogvenster te zien waar je de kolommen van de GridView kan instellen:
Vanuit deze editor kan je kolommen toevoegen, verwijderen en aanpassen. De verschillende kolomtypes:
kolomtype
omschrijving
BoundField
Standaard type: toont de waarde van een veld als gewone tekst
Buttonfield
Toont de waarde van een veld als een CommandButton (linkbutton of push-button)
CheckBoxField
Toont de waarde van een veld als CheckBox, veelal gebruikt bij Boolean waarden
CommandField
Geavanceerde versie van Buttonfield, representeert een speciaal command zoals select, insert, delete, update; zelden gebruikt bij GridView.
HyperLinkField
Toont de veldwaarde als een hyperlink, bij klikken surf je naar de gekoppelde pagina
ImageField
Toont de waarde van een veld als src-attribuut van een IMG-tag
TemplateField
Toont eigen gedefiëerde inhoud voor een kolom. De inhoud kan literals, velden of andere controls bevatten
Voorbeeld
We werken met de GridView gebaseerd op de DataSet
Maak de id-kolom onzichtbaar door de eigenschap visible op false te plaatsen
Geef de Datumkolom een formatstring: {0:dd/MM/yyyy} Zet voor deze BoundColumn het attribuut htmlencode op false (kan via het dialoogvenster):
Door htmlencodering worden tekens zoals "/" omgezet, waardoor de DataFormatString niet meer naar behoren functioneert voor een datumveld.
Zet voor de prijs htmlencode op false en DataFormatString op {0:c}
Voeg een TemplateField toe (TemplateField selecteren in bovenste lijst en drukken op Add) voor 10% korting
HeaderText: korting
Via smart tag van de GridView kies je edit templates: Column[5] - korting: ItemTemplate
Voeg een Label toe: edit Databindings: Text: (Convert.ToDouble(Eval("prijs")) * 0.9).ToString("c")
De TemplateField is de krachtigste kolom en staat je toe zelf een opmaak te definiëren voor een aantal varianten zoals AlternatingItem en EditItem
GridView: kolommen sorteren
Codeless sorteren met de Typed DataSet
Via smart tag van de Gridview zet je enable sorting aan
Je kan het sorteren op de kortingskolom (TemplateField) ook mogelijk maken door deze kolom te editeren en de eigenschap sortexpression in te stellen op het veld prijs
Deze vorm van sorteren werkt zonder code te schrijven, maar wordt volledig aan de hand van de ViewState berekend door de webserver.
Sorteren door de database-engine
Voor databasetoepassingen met behoorlijk wat records is het soms beter enig rekenwerk zoals sorteren over te laten aan de databaseserver in plaats van het door de webserver te laten doen.
Voorie in nascholing.mdf een nieuwe Stored Procedure:
CREATE PROCEDURE dbo.nascholingSelectSort
@SortBy varchar(50) = 'naam'
AS
SET NOCOUNT ON;
IF @SortBy = ''
BEGIN
SET @SortBy = 'naam'
END
EXEC( 'SELECT id, naam, plaats, datum, prijs, actief ' +
'FROM nascholing ' +
'ORDER BY ' +@SortBy)
Hier gebruiken we een exec voor het uitvoeren van de SQL omdat SQL server anders van zijn oren maakt wanneer je een variabele gebruikt als ORDER BY component.
Voeg een DataSetDSnascholing_dbactie toe in de App_Code folder
Kies ervoor om bestaande Stored Procedures te gebruiken:
Dit is het schema van de gemaakte DataTable met TableAdapter:
Pas de ObjectDataSource op de webpagina aan zodat het Business object verwijst naar de nieuwe TableAdapter, de selectmethode is GetData en ontvangt de string SortBy.
Zeg nee als gevraagd wordt de kolommen van de GridView te resetten
Op het eerste zicht is er natuurlijk niets veranderd, maar weet dat voor toepassingen met heel wat records het sorteerwerk nu wordt gedaan door de database-server en niet door de webserver.
Sorteren met de ObjectDataSource
Als je niet met een Typed DataSet werkt, maar met een eigen DAL en eventueel Logic-layer, dan kan je ook sortering voorzien wanneer je bvb. met een ObjectDataSource werkt.
De sortering die we hier voorzien gebeurt op de database.
We gebruiken opnieuw de Stored Procedure NascholingSelectSort die we zopas hebben gemaakt
Voorzie volgende methode in de DAL-library:
NascholingDB.cs
public static DataSet GetNascholingenSorted(string sortby)
{
SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["NascholingConn"].ConnectionString);
SqlCommand myCommand = new SqlCommand("NascholingSelectSort", myConnection);
myCommand.CommandType = CommandType.StoredProcedure;
myCommand.Parameters.AddWithValue("@SortBy", sortby);
SqlDataAdapter da = new SqlDataAdapter(myCommand);
DataSet ds = new DataSet("DsNascholing");
da.Fill(ds, "Nascholingen");
return ds;
}
Voorzie volgende methode in de Logic-library:
[DataObjectMethod(DataObjectMethodType.Select)]
public static Nascholingcollection GetNascholingenSorted(string sortby)
{
DataSet ds = NascholingDB.GetNascholingenSorted(sortby);
DataTable dt = ds.Tables["Nascholingen"];
Nascholingcollection nc = new Nascholingcollection();
for (int i = 0; i < dt.Rows.Count; i++)
{
Nascholing d = new Nascholing();
d.Id = Convert.ToInt32(dt.Rows[i]["id"]);
d.Naam = dt.Rows[i]["naam"].ToString();
d.Plaats = dt.Rows[i]["plaats"].ToString();
d.Datum = Convert.ToDateTime(dt.Rows[i]["datum"]);
d.Prijs = Convert.ToDecimal(dt.Rows[i]["prijs"]);
d.Actief = Convert.ToBoolean(dt.Rows[i]["actief"]);
nc.Add(d);
}
return nc;
}
Voorzie op een nieuwe Web Form een GridView
Kies een Auto Format "Lilacs in mist"
Via Choose Data Source kies je New Data Source
Object DataSource met als Business object Logic.Nascholingen
Als DefaultValue voor de SelectParameter sortby geef je naam op
Via de eigenschappen van de ObjectDataSource stel je SortParameterName in op sortby
Activeer Enable sorting via de smart tag van de GridView!
Doe nog wat aanpassingen aan de kolommen van de GridView voor een ordelijke layout (volgorde, DataFormatString).
Sorteerorde tonen
Het aanduiden van de sorteervolgorde zorgt voor de gebruiker voor een grotere duidelijkheid.
Dit kunnen we eenvoudig doen door ervoor te zorgen dat het juiste tekeningetje wordt toegevoegd aan de kolom waarop werd gesorteerd.
Dit tekeningetje (driehoekje) is eigenlijk een letter uit het lettertype webdings: hierin vinden we een driehoekje met top boven en eentje met top onder.
We plaatsen het driehoekje in de hoofdingkolom nadat een rij uit de grid werd aangemaakt:
Pagineren stelt je in staat om slechts een gedeelte van de aanwezige records op het scherm te tonen. ASP.Net zorgt er automatisch voor dat de gebruiker naar een andere resultaatpagina kan overschakelen.
Standaard pagineren
Werk je met een GridView gekoppeld aan een typed DataSet, dan kan je paginering inschakelen via de smart tag of properties van de GridView.
Standaard pagineren gaat als volgt in het werk: de webserver leest alle records voor het vullen van bvb. een DataTable in het geheugen en plaatst enkel de benodigde records in de GridView. Wanneer je naar een andere pagina overstapt, worden opnieuw alle records gelezen en de gewenste door de webserver uitgefilterd. Behoorlijk intensief voor de webserver dus. Heb je een tabel met 1000 record en pagina's van 10 records, dan zijn er in totaal 100 pagina's. Als de gebruiker ze allemaal eens bezoekt worden dan eigenlijk in totaal 100 * 1000 records ingelezen (=100.000 records!), terwijl er slechts 1000 getoond worden.
Standaard paginering is heel interessant doordat het weinig extra werk levert voor de ontwikkelaar, voor toepassingen met een kleine database (tientallen tot honderden records) is dit een aanvaardbare oplossing.
Voor het illustreren van paginerig werden in de nascholingstabel een aantal records toegevoegd.
Plaats AllowPaging op true
Plaats PageSize op 5
Standaard pagineren - veel records
Voor een realistischer voorbeeld, en een vergelijk tussen standaard en custom pagineren gebruiken we een database met enkele duizenden records.
In de database Movie.mdf vinden we een tabel movie met een kleine 2.000 recors en een tabel casting met zo'n 30.000 records. Plaats deze database in de App_Data map van je Site.
We maken een stored procedure die de verschillende films toont en doen een join met de casting-tabel om de intensiteit van de bewerking op te drijven.
CREATE PROCEDURE dbo.SelectAllMovie
AS
SELECT DISTINCT m.filmid, titel, jaar, score
FROM
movie m
--vertrager: enkel om de query extra intensief te maken
INNER JOIN casting c on m.filmid = c.filmid
We voorzien een Class-file MovieDB.cs in de DAL-library, voor de standaardpaginering gebruiken we de methode MovieDB.SelectAllMovie die een DataSet retourneert met de filmgegevens.
Toon /verberg
using System;
using System.Collections.Generic;
using System.Text;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
namespace DAL
{
public class MovieDB
{
private static string connstring = ConfigurationManager.ConnectionStrings["MovieConn"].ConnectionString;
public static DataSet SelectAllMovie()
{
SqlConnection myConnection = new SqlConnection(connstring);
SqlCommand myCommand = new SqlCommand("SelectAllMovie", myConnection);
myCommand.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter(myCommand);
DataSet ds = new DataSet("DsMovie");
da.Fill(ds, "Movies");
int aantal = ds.Tables["Movies"].Rows.Count;
return ds;
}
public static DataSet SelectMovie(string sortby, int startrij, int aantalrijen)
{
SqlConnection myConnection = new SqlConnection(connstring);
SqlCommand myCommand = new SqlCommand("SelectMovie", myConnection);
myCommand.CommandType = CommandType.StoredProcedure;
myCommand.Parameters.AddWithValue("@sortby", sortby);
myCommand.Parameters.AddWithValue("@startrij", startrij);
myCommand.Parameters.AddWithValue("@aantalrijen", aantalrijen);
SqlDataAdapter da = new SqlDataAdapter(myCommand);
DataSet ds = new DataSet("DsMovie");
da.Fill(ds, "Movies");
int aantal = ds.Tables["Movies"].Rows.Count;
return ds;
}
public static int CountMovie()
{
SqlConnection myConnection = new SqlConnection(connstring);
SqlCommand myCommand = new SqlCommand("CountMovie", myConnection);
myCommand.CommandType = CommandType.StoredProcedure;
myConnection.Open();
int aantalfilms = Convert.ToInt32(myCommand.ExecuteScalar());
myConnection.Close();
return aantalfilms;
}
}
}
We zorgen nu ook voor een extra file Movie.cs in de Logic-laag:
Toon /verberg
using System;
using System.Collections.Generic;
using System.Text;
using System.Data;
using System.Collections;
using System.ComponentModel;
using DAL;
namespace Logic
{
public class Movie
{
private int id;
public int Id
{
get { return id; }
set { id = value; }
}
private string titel;
public string Titel
{
get { return titel; }
set { titel = value; }
}
private int jaar;
public int Jaar
{
get { return jaar; }
set { jaar = value; }
}
private float score;
public float Score
{
get { return score; }
set { score = value; }
}
public Movie()
{
}
}
public class Moviecollection : CollectionBase
{
public Moviecollection()
{
}
public void Add(Movie m)
{
InnerList.Add(m);
}
//indexer: "Item"-property
public Movie this[int index]
{
get { return (Movie)InnerList[index]; }
set { InnerList[index] = value; }
}
}
[DataObject]
public class Movies
{
[DataObjectMethod(DataObjectMethodType.Select)]
public static Moviecollection SelectAllMovie()
{
DataSet ds = MovieDB.SelectAllMovie();
DataTable dt = ds.Tables["Movies"];
Moviecollection col = new Moviecollection();
for (int i = 0; i < dt.Rows.Count; i++)
{
Movie o = new Movie();
o.Id = Convert.ToInt32(dt.Rows[i]["FilmID"]);
o.Titel = dt.Rows[i]["Titel"].ToString();
o.Jaar = Convert.ToInt32(dt.Rows[i]["Jaar"]);
o.Score = Convert.ToSingle(dt.Rows[i]["Score"]);
col.Add(o);
}
return col;
}
[DataObjectMethod(DataObjectMethodType.Select)]
public static Moviecollection SelectMovie(string sortby, int startrij, int aantalrijen)
{
DataSet ds = MovieDB.SelectMovie(sortby, startrij, aantalrijen);
DataTable dt = ds.Tables["Movies"];
Moviecollection col = new Moviecollection();
for (int i = 0; i < dt.Rows.Count; i++)
{
Movie o = new Movie();
o.Id = Convert.ToInt32(dt.Rows[i]["FilmID"]);
o.Titel = dt.Rows[i]["Titel"].ToString();
o.Jaar = Convert.ToInt32(dt.Rows[i]["Jaar"]);
o.Score = Convert.ToSingle(dt.Rows[i]["Score"]);
col.Add(o);
}
return col;
}
[DataObjectMethod(DataObjectMethodType.Select)]
public static int CountMovie(string sortby, int startrij, int aantalrijen)
{
return MovieDB.CountMovie();
}
}
}
Op een nieuwe Web Form plaats je een Gridview
Kies een Auto Format
Via Choose Data Source kies je New Data Source
Maak een ObjectDataSource naar Logic.Movies
De SelectMethode is Logic.SelectAllMovie
Allowpaging van de GridView zet je op true
Plaats een Label Label1 op de Web Form, met lege eigenschap Text
Voorzie eventhandlers in de code-behind om de tijdsduur van het pagineren te berekenen.
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class GridView_standardpaging : System.Web.UI.Page
{
DateTime starttijd;
protected void Page_Load(object sender, EventArgs e)
{
starttijd = System.DateTime.Now;
}
protected void GridView2_DataBound(object sender, EventArgs e)
{
DateTime eindtijd = System.DateTime.Now;Label1.Text = ((TimeSpan)(eindtijd - starttijd)).TotalMilliseconds.ToString();
}
}
Custom pagineren
Het is nu de bedoeling de webserver te ontlasten, en enkel de benodigde records uit de database te lezen.
Maak twee nieuwe Stored Procedures in Movie.mdf
CREATE PROCEDURE dbo.SelectMovie
(
@sortby varchar(100) = 'titel',
@startrij int = 1,
@aantalrijen int = 10
)
AS
SELECT filmid, titel, jaar, score
FROM
(SELECT m.filmid, titel, jaar, score,
ROW_NUMBER() OVER(ORDER BY @sortby) as RowNum
FROM movie m
-- voor de lol, om het trager te maken!!
INNER JOIN casting c on m.filmid = c.filmid
) as volgorde
WHERE RowNum BETWEEN @startrij AND (@startrij + @aantalrijen) - 1
CREATE PROCEDURE dbo.CountMovie
AS
select count(*) from movie
De Stored Procedure SelectMovie maakt gebruik van de nieuwe SQL Server 2005 functie ROW_NUMBER() om elke rij een oplopend nummer te geven en op een eenvoudige manier welbepaalde records uit de tabel te halen.
Meer hierover bij 4GuysFromRolla.
Maak een nieuwe Web Form aan
Plaats een GridView op de Web Form
Kies een Auto Format
Via smart tag kies je voor Choose Data Source - New Data Source
Plaats ook een Label en analoge eventhandlers als in de vorige toepassing voor het tonen van de bewerkingstijd.
GridView: Data editeren
Met een GridView is het ook mogelijk om de gebruiker toe te staan om de gegevens in de GridView aan te passen en de nieuwe waarden weg te schrijven in de onderliggende Data Source.
Typed DataSet
Plaats een GridView op een Web Form...
Kies een Auto format
Kies via smart tag voor Choose Data Source - New Data Source
Maak een ObjectDataSource door gebruik te maken van DSnascholingTableAdapters.nascholingTableAdapter als Business object (DataSet DSnascholing werd eerder in dit hoofdstuk aangemaakt)
Deze DataSet werkt met Stored Procedures die door de Visual Studio Wizard werden aangemaakt.
Zet via smart tag Enable Editing van de GridView aan
Via smart tag > Edit columns plaats je de eigenschap ReadOnly voor de kolom id op false, zie verder.
Voer uit!
Het aanvinken van de optie Enable editing zorgt ervoor dat automatisch een CommandField-kolom wordt aangemaakt met een LinkButtonEdit, wanneer je deze aanklikt kom je voor deze rij in editeermodus en zie je de LinkButtons Update en Cancel.
Werk je met een Typed DataSet als Data Source voor de ObjectDataSource, dan is editeren van records enkel een kwestie van het aanvinken van "enable editing" via de smart tag van de GridView.
Er is wel een heel vervelend probleem voor updaten van gegevens, dat een foutmelding 'Could not find a non-generic method "Update"...' wordt gegeven.
Dit is in ons geval opgelost door voor de id-kolom de eigenschap ReadOnly op false in te stellen. Niet echt elegant, maar wel een oplossing.
Dit probleem heeft te maken met de DataTableAdapterWizard bij het maken van een DataSet die een stored procedure en methode voor Updaten aanmaakt die een id en een original_id gebruikt, terwijl de GridView deze niet allebei retourneert wanneer id een primary key-veld is, de GridView gaat er vanuit dat het id alleen-lezen is en geeft het originele id niet mee, terwijl de Wizard die de Stored Procedures, TableAdapter en methoden heeft aangemaakt ervan uitgaat dat het primaire sleutelveld wel kan worden gewijzigd.
Typed DataSet - eigen Stored Procedure
De Stored Procedures die werden aangemaakt door de DataSet-Wizard van Visual Studio zijn handig, maar veelal zal je zelf reeds een Stored Procedure voor gegevensupdate aangemaakt hebben.
Maak in nascholing.mdf een nieuwe Stored Procedure:
CREATE PROCEDURE dbo.NascholingUpdate
(
@id int,
@naam varchar(50),
@plaats varchar(50),
@datum datetime,
@prijs money,
@actief bit
)
AS
SET NOCOUNT OFF;
UPDATE nascholing SET
naam = @naam,
plaats = @plaats,
datum = @datum,
prijs = @prijs,
actief = @actief
WHERE id = @id;
Voeg aan de map App_Code een nieuwe DataSetDSnascholing_eigenSTP toe
Kies voor het gebruiken van eigen Stored Procedures
Plaats een GridView op een Web Form
Kies een Auto Format
Kies via Choose Data Source voor New Data Source...
Maak een ObjectDataSource met DSNascholing_eigenSTPTableAdapters.nascholingSelectSortTableAdapter als Business object
Via de source van de aspx-pagina pas je de code van de ObjectDataSource aan: verwijder het attribuut OldValuesParameterFormatString="original_{0}" of verander dit in OldValuesParameterFormatString="{0}", de ObjectDataSource-Wizard gaat ervan uit dat de updatemethode en de stored procedure een parameter original_id zal bevatten, wat bij ons niet zo is.
Een eigen ObjectDataSource in 3-tier toepassing
Wanneer je zelf een DataAccess- en eventueel een Logic-layer hebt gemaakt voor je toepassing, dan kan je een ObjectDataSource aanmaken die jouw methoden gebruikt.
Voeg een methode toe in de DAL-laag, de stored procedure NascholingUpdate werd reeds eerder aangemaakt:
Je kan dit ook instellen via de eigenschap UpdateParameters van de ObjectDataSource, klikken op '...' toont je een dialoogvenster, kies voor Show advanced properties. Voeg alle inputparameters toe, geef het juiste Type aan.
Belangrijke vaststelling: onze eigen methode Update ontvangt een object van de klasse Nascholing, de ObjectDataSource van ASP.Net is dus zelfstandig in staat om aan de hand van de opgegeven parameters een correct object aan te maken. Je mag ook een UpdateMethod maken die alle parameters afzonderlijk opvangt.
Foutafhandeling
Om mogelijke invoerfouten van de gebruiker af te handelen zijn er binnen ASP.Net een aantal mogelijkheden.
Fouten afhandelen in de DAL onderscheppen en doorgeven aan de GUI
Fouten in een Business (Logic) laag onderscheppen en doorgeven aan de GUI
Fouten afhandelen in de GUI-laag door bvb. gebruik te maken van Input Validation Controls.
Fouten afhandelen vooraleer de info wordt doorgegeven aan Logic of Businesslaag, en eventueel waarden aanpassen of de actie annuleren.
De eerste drie mogelijkheden komen verderop in de cursus aan bod, voorlopig zullen we fouten onderscheppen vooraleer we proberen de Data Source te benaderen.
Om op een correcte manier fouten te kunnen afhandelen is het essentiëel te weten hoe gegevens worden doorgegeven van de GridView naar de ObjectDataSource en naar de Logic-laag of DAL.
Wannneer de gebruiker waarden editeert klikt hij op een Control met het update-command (in vele gevallen automatisch gegenereerd via enable editing).
Het RowUpdating event van de GridView wordt geraised
De GridView vult de set UpdateParameters van de ObjectDataSource
De GridView start de UpdateMethod van de ObjectDataSource
Het event Updating van de ObjectDataSource wordt geraised
De ObjectDataSource start de UpdateMethode uit de onderliggende Business-laag of DAL
Het event Updated van de ObjectDataSource wordt geraised
Het event RowUpdated van de GridView wordt geraised
Wensen we op het niveau van de GridView in te grijpen in de code, dan kunnen we dit in het RowUpdating event gaan doen
We werken verder met de laatst GridView uit het voige onderdeel: GridView gekoppeld aan een ObjectDataSource, ObjectDataSource gebonden aan ons eigen klassenmodel.
Voeg een LabelLblMsg toe aan de Web Form, rode tekstkleur, geen tekst.
Voorzie een eventhandler voor het event RowUpdating
protected void GridView2_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
string oudenaam = e.OldValues["Naam"].ToString();
bool updateok = true;
if (e.NewValues["Naam"] == null)
{
updateok = false;
}
else
{
if (e.NewValues["Naam"].ToString().Trim() == "") updateok = false;
}
if (!updateok)
{
LblMsg.Text = "Gelieve een naam op te geven, deze was oorsponkelijk " + oudenaam;
e.Cancel = true;
}
}
Werk je met Validation Controls in Template fields van de GridView dan kan je met de IsValid eigenschap van de pagina werken, als de IsValid false is (een validatie mislukt) dan wordt de updateactie geannuleerd.
Deze werkwijze kan ook toegepast worden voor andere databaseacties.
GridView - records verwijderen
Typed DataSet
Het verwijderen van records uit met behulp van een GridView gekoppeld aan een ObjectDataSource met DataSet met automatisch gemaakte Stored Procedures is heel eenvoudig: via smart tag zet je een vinkje bij Enable deleting.
Typed DataSet - eigen Stored Procedures
Maak een Stored procedure in nascholing.mdf:
CREATE PROCEDURE dbo.NascholingDelete
(
@id int
)
AS
SET NOCOUNT OFF;
DELETE FROM nascholing
WHERE id = @id;
De GridView is gebaseerd op de DataSet geconfigureerd in DSNascholing_eigenSTP.xsd, open deze file, rechtsklik de NascholingSelectSortTableAdapter en stel NascholingDelete in als DeleteMethode
Sla DSNascholing_eigenSTP.xsd op
Localiseer de ObjectDataSource op de Web Form en kies configure via smart tag
Als Deletemethod moet hier de methode Delete staan zoals automatisch aangemaakt door de TableAdapter, vul desnoods Delete in als naam van de DeleteMethod in de eigenschappen van deze ObjectDataSource
Doordat we de configuratiewizard opnieuw hebben doorlopen moet het argument OldValuesParameterFormatString weer verwijderd of aangepast worden (zoals bij het editeren)
Verifiëer dat in de property DataKeyNames van de GridViewid staat aangegeven
Eigen ObjectDataSource - 3-tier
De stored procedure NascholingDelete werd reeds aangemaakt
Voorzie een methode in de DAL
NascholingDB.cs
...
public static void Delete(int id)
{
SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["NascholingConn"].ConnectionString);
SqlCommand myCommand = new SqlCommand("NascholingDelete", myConnection);
myCommand.CommandType = CommandType.StoredProcedure;
myCommand.Parameters.AddWithValue("@id", id);
myConnection.Open();
myCommand.ExecuteNonQuery();
myConnection.Close();
}
...
Voorzie een methode in de Logic-layer:
Nascholing.cs
[DataObjectMethod(DataObjectMethodType.Delete)]
public static void Delete(Nascholing n)
{
NascholingDB.Delete(n.Id);
}
Localiseer de ObjectDataSource van de betreffende GridView
Geef als DeleteMethodDelete op en als DeleteParameterid Je kan dit ook doen via smart tag - configure, het vervelende is dat je dan de UpdateParameters van het vorige cursusonderdeel opnieuw moet opgeven om het updaten niet om zeep te helpen.
GridView: DataKeyNames: id
GridView - rijen selecteren
We hebben in de voorgaande cursusonderdelen gezien hoe je datamanipulaties kan doen in een GridView met behulp van Commandfields edit, update, cancel en delete. Soms zal je toepassingen maken waarbij een rij uit een GridView geselecteerd moet kunnen worden om bv. deze rij van buiten de GridView te manipuleren.
Voor elk van de reeds gemaakte GridViews is dit heel eenvoudig via smart tag- Enable Editing te verwezenlijken.
Voeg een Label LblRij (lege Text) toe aan de Web Form
Maak een eventhandler voor SelectedIndexChanged van de GridView
De gegevens in de rij van een GridView zullen soms op een andere plaats van de toepassing getoond moeten worden.
Voeg een Label LblGegevens toe aan de Web Form
In het vorige voorbeeld heb je gezien hoe je het geslecteerde rijnummer kan opvragen. De gegevens uit een rij van de GridView kan je zowieso ophalen met volgende code:
Een belangrijk nadeel aan deze werkwijze is het feit dat je het kolomnummer van de gewenste cel moet kennen.
Beter is volgende werkwijze: neem alle velden die je nodig hebt op in de collectie DataKeyNames van de GridView, dit kan je zelfs via een dialoogvenster in Visual Studio doen.
Nu kan je de gegevens van de geselecteerde rij in de GridView benaderen door de SelectedDataKey-collectie op te vragen:
We controleren eerst of de rij een DataRow is (het kan ook bv. een Header of Footer zijn).
DetailsView - gegevens bekijken
Een component die speciaal werd ontworpen om de detailgegevens van een geselecteerde record te bekijken is de DetailsView.
Deze component ondersteunt ook update, insert en delete-acties
We werken verder met de GridView die gekoppeld is aan een ObjectDataSource die gebruik maakt van ons eigen 3-tier klassenmodel, voor de andere situaties (bvb. typed DataSet) blijven de principes gelijklopend.
Daar in we in ons geval de DetailsView gebruiken voor het weergeven van één nascholing maken we een Stored Procedure om een nascholing op te halen op basis van het id
CREATE PROCEDURE dbo.NascholingSelectById
(
@id int
)
AS
SELECT id, naam, plaats, datum, prijs, actief
FROM nascholing
WHERE id = @id
RETURN
Maak een methode in de DAL laag:
NascholingDB.cs
...
public static DataSet GetNascholingById(int id)
{
SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["NascholingConn"].ConnectionString);
SqlCommand myCommand = new SqlCommand("NascholingSelectById", myConnection);
myCommand.CommandType = CommandType.StoredProcedure;
myCommand.Parameters.AddWithValue("@id", id);
SqlDataAdapter da = new SqlDataAdapter(myCommand);
DataSet ds = new DataSet("DsNascholing");
da.Fill(ds, "Nascholingen");
return ds;
}
...
Voorzie een DetailsView op de Web Form (eventueel mooi schikken t.o.v. de GridView met behulp van een tabel)
Kies een Auto Format voor de DetailsView
Kies Choose DataSource - New DataSource
Maak een ObjectDataSource ODSNascholingDetail
Business object: Logic.nascholingen
Select methode: GetNascholingById
Parameter voor de Selectmethode instellen: uitlezen uit de GridView!:
Op deze manier 'luistert' deze ObjectDataSource naar veranderingen in de GridView, je hoeft niks meer te programmeren in het event SelectedIndexChanged
Via smart tag - edit fields kan je de velden in de DetailsView nog wat aanpassen (volgorde aanpassen, invisible maken, formaat, ...)
DetailsView - gegevens toevoegen
De Control DetailsView kan ook gebruikt worden om acties uit te voeren op de database: update, insert en delete.
Aangezien we update en delete al hebben besproken voor de GridView beginnen we met de actie insert: toevoegen van records.
Maak een stored procedure in nascholing.mdf
CREATE PROCEDURE dbo.NascholingInsert
(
@naam varchar(50),
@plaats varchar(50),
@datum datetime,
@prijs money,
@actief bit
)
AS
SET NOCOUNT OFF;
INSERT INTO nascholing (naam, plaats, datum, prijs, actief)
VALUES(@naam,@plaats,@datum,@prijs,@actief)
Toon /verberg
Op deze manier 'luistert' deze ObjectDataSource naar veranderingen in de GridView, je hoeft niks meer te programmeren in het event SelectedIndexChanged
