Items selecteren

Behalve de extra mogelijkheid om een Style voor de verschillende templates aan te geven zijn en de WYSIWYG-mogelijkheden van Visual Studio biedt een DataList nog extra mogelijkheden t.o.v. de Repeater. Je kan een mogelijkheid inbouwen om items te selecteren. Hiertoe onderneem je volgende extra stappen:

• Maak een SelectedItemTemplate: tekst en controls die moeten getoond worden op de pagina wanneer de gebruiker een item selecteerd.
• Voeg een Button, LinkButton of ImageButton toe en stel de eigenschap CommandName in op select
• Maak een event-handler voor het event SelectedIndexChanged van de DataList en bind de DataList opnieuw aan de DataSource.
• Je kan deze actie ook onderscheppen met een ander CommandName in het event ItemCommand

Voorbeeld: fietsroutes

• Voeg een DataList toe aan een Web Form
• Kies Auto Format... en kies het format "Slate"
• Kies Choose Data Source en maak een nieuwe DataSource ODSFiets voor de fietsroutes uit Logic.Fietsroutes
• Kies Edit Templates

  

• Je komt nu terecht in de ItemTemplate voor de DataList: de gewone weergave van een element uit de lijst. Daar we gebruik maken van een Custom Object wordt voor elke eigenschap al een tekst en een Label voorzien!

  Wij wensen de details van een fietsroute te zien wanneer de gebruiker de betreffende fietsroute selecteert.

• Knip de volledige inhoud van de ItemTemplate
• Kies Display: SelectedItemTemplate
• Plak hier de inhoud uit de ItemTemplate
• Doe volgende aanpassingen:

  

• De SelectedItemTemplate wordt getoond wanneer een item geselecteerd wordt. Dit selecteren doen we in de ItemTemplate.
  Kies Display: ItemTemplate
• Voorzie een LinkButton

  

• Kies Edit Databindings... voor de LinkButton

  Doe volgende instellingen om de Naam van de fietsroute in de LinkButton te zien.

  

• Vraag de eigenschappen van de LinkButton op en stel de eigenschap CommandName in op select: wanneer op deze LinkButton geklikt wordt zal de SelectedItemTemplate worden getoond voor dit element.
• Wanneer je de site uitvoert zal je merken dat het nog niet naar behoren werkt: je moet twee keer klikken om de ItemTemplate te zien, en bepaalde gegevens zijn niet ingevuld.

  Dit heeft zijn oorzaak in het laden van de pagina: de ViewState bevat alle gegevens van de DataList die oorspronkelijk werden getoond, dus enkel de namen van de fietsroutes, doch niet de detailgegevens van een fietsroute.
  We kunnen dit corrigeren door na het selecteren van een Item de DataList opnieuw te binden met de DataSource.
  De DataSource zelf is nog steeds gekend daar deze door ASP.Net tags in onze .aspx pagina aan de DataList is gebonden.

• Vraag de events op voor de DataList, maak een event-handler voor SelectedIndexChanged:

  protected void DataList2_SelectedIndexChanged(object sender, EventArgs e)
  {
       DataList2.DataBind();
  }
  

• De toepassing werkt nu zoals het hoort

  Selectie opheffen: deselecteren

  

• Kies in de DataList voor Display: SelectedItemTemplate
• Vervang het Label met de naam van de fietsroute door een LinkButton
• Stel de juiste databindings in om de naam weer te geven
• Stel de CommandName van de LinkButton in op unselect (vrij te kiezen)
• Voorzie een eventhandler voor het event ItemCommand van de DataList:

  protected void DataList2_ItemCommand(object source, DataListCommandEventArgs e)
  {
       if (e.CommandName == "unselect")
           DataList2.SelectedIndex = -1;
          
       DataList2.DataBind();
  }
  

  Je kan op analoge wijze het selecteren van een Item ook voorzien met de event ItemCommand in plaats van SelectedIndexChanged.

In de voorgaande voorbeelden hebben we een aantal keer gebruik gemaakt van een Object Data Source: een Data Source waarbij we de gegevens manipuleren met behulp van onze eigen klassen.

Een ObjectDataSource maakt deel uit van de namespace System.Web.UI.WebControls

Om een ObjectDataSource te hergebruiken op verschillende pagina's kan je handig gebruik maken van MasterPages, in plaats van op elke pagina de ObjectDataSource opnieuw aan te maken.

• Voeg een nieuw Item toe aan de Web Site: MasterPage: Meester.master
• Vul de pagina met een titeltekst: ODS in Masterpage
• Voeg de benodigde ObjectDataSources toe, vb ODSGroenten en ODSFiets via de Toolbox, onderdeel Data. Koppel deze aan de juiste methoden van Logic.Busisness en Logic.Fietsroutes

  Meester.master
  <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Meester.master.cs" Inherits="Meester" %>
  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  <html xmlns="http://www.w3.org/1999/xhtml" >
  <head runat="server">
      <title>Untitled Page</title>
  </head>
  <body>
      <form id="form1" runat="server">
      <div>
  		ODS in Masterpage<br />
          <br />
          <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
          </asp:contentplaceholder>
          <br />
          <asp:ObjectDataSource ID="ODSFiets" runat="server" SelectMethod="GetFietsRoutes"
              TypeName="Logic.Fietsroutes"></asp:ObjectDataSource>
      
          <asp:ObjectDataSource ID="ODSGroenten" runat="server" SelectMethod="GetGroenten"
              TypeName="Logic.Business"></asp:ObjectDataSource>
      </div>
      </form>
  </body>
  </html>
  

• Om vanuit een Childpagina elementen uit een Masterpage te kunnen benaderen zorgen we in de codebehind van de Masterpage voor publieke eigenschappen die deze ObjectDataSources retourneren:

  public partial class Meester : System.Web.UI.MasterPage
  {
      public ObjectDataSource OdsFiets
      {
          get { return ODSFiets; }
      }
  
      public ObjectDataSource OdsGroenten
      {
          get { return ODSGroenten; }
      }
  	
  	... 
  	
  }
  

• Maak een Web Form Datalist_child met als Masterpage Meester.master
• Voeg een ListBox LBGroenten en een DataList DLFiets toe op de pagina.
• Om eigenschappen van een MasterPage aan te spreken moeten we normaal een vervelende typecasting naar de klasse van de Masterpage uitvoeren telkens we een eigenschap wensen te gebruiken. Dit kunnen we vermijden door in de Child-pagina Datalist_child volgende directive te voorzien onder de Page-directive:

  Datalist_child.aspx
  ...
  <%@ MasterType VirtualPath="~/Meester.master" %>
  ...
  

• Doordat de ObjectDataSources zich niet bevinden op de huidige pagina, maar in de Masterpage, zullen we de DataSource van deze componenten instellen vanuit de code:

  DataList_child.aspx.cs
  protected void Page_Load(object sender, EventArgs e)
  {
          if (!IsPostBack)
          {
              LBGroenten.DataSource = Master.OdsGroenten;
              DLFiets.DataSource = Master.OdsFiets;
              DataBind();
          }
  }
  

• Wens je gebruik te maken van een selectie en deselectie mogelijkheid (en bijbehorende templates) zoals in het voorbeeld, dan moet je ervoor zorgen dat in de eventhandlers de DataSource opnieuw wordt gebonden: deze keer zijn er geen ASP-tags in de child-pagina die voor deze koppeling zorgen. Wanneer een event plaatsvindt moet deze koppeling opnieuw gebeuren.

  protected void DLFiets_ItemCommand(object source, DataListCommandEventArgs e)
  {
      if (e.CommandName == "unselect")
      {
          DLFiets.DataSource = Master.OdsFiets;
          DLFiets.SelectedIndex = -1;
      }
      DLFiets.DataBind();
  }
  
  protected void DLFiets_SelectedIndexChanged(object sender, EventArgs e)
  {
      DLFiets.DataSource = Master.OdsFiets;
      DLFiets.DataBind();
  }
  

Een DataList kan je ook gebruiken om gegevens uit de Datasource aan te passen.

Om realistischer te werken koppelen we onze Webapplicatie deze keer aan een database.
In volgende stapjes maak je een nieuwe SQL Server 2005 Express-database aan met Visual Studio 2005.
Werk je liever met SQL Server 2000 / 2005 open dat resp. Enterprise Manager / Management Studio, en maak een nieuwe database aan.

• Rechtsklik in Solution Explorer de map app_data van de Web Site.
• Kies Add Item...
• Kies SQL Database: Drank.mdf
• Maak via Server Explorer een tabel drank aan in Drank.mdf
  • id - int - identity - primary key
  • naam - varchar(50)
  • prijs - money
• Geef een aantal voorbeeldwaarden in

  

• Voorzie twee Stored Procedures in de database Drank.mdf:

  CREATE PROCEDURE dbo.DrankSelect
  AS
  	SET NOCOUNT ON;
  SELECT     id, naam, prijs
  FROM         drank
  ORDER BY naam
  
  GO
  
  CREATE PROCEDURE dbo.DrankUpdate
  (
  	@id int,
  	@naam varchar(50),
  	@prijs float
  	
  )
  AS
  	SET NOCOUNT OFF;
  UPDATE [drank] SET [naam] = @naam, [prijs] = @prijs WHERE [id] = @id;
  
  

• Voorzie in Web.config van de site volgende waarde voor de connectiestring:

  ...
  <configuration>
  	<appSettings/>
  	<connectionStrings>
  		<add name="DrankConn" providerName="System.Data.SqlClient" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|Drank.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True"/>
  	</connectionStrings>
  	<system.web>
  	...
  

• In de Class-Library DAL maken we de klasse DrankDB aan:

  using System;
  using System.Collections.Generic;
  using System.Text;
  using System.Configuration;
  using System.Data;
  using System.Data.SqlClient;
  
  
  namespace DAL
  {
      public class DrankDB
      {
          public static DataSet GetDranken()
          {
              SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["DrankConn"].ConnectionString);
              
              SqlCommand myCommand = new SqlCommand("DrankSelect", myConnection);
              myCommand.CommandType = CommandType.StoredProcedure;
              
              SqlDataAdapter da = new SqlDataAdapter(myCommand);
              
              DataSet ds = new DataSet("DsDranken");
              da.Fill(ds,"Dranken");
  
              return ds;
          }
  
          public static void DrankenUpdate(int id, string naam, float prijs)
          {
              SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["DrankConn"].ConnectionString);
              SqlCommand myCommand = new SqlCommand("DrankUpdate", myConnection);
              myCommand.CommandType = CommandType.StoredProcedure;
              myCommand.Parameters.Add(new SqlParameter("@id", id));
              myCommand.Parameters.Add(new SqlParameter("@naam", naam));
              myCommand.Parameters.Add(new SqlParameter("@prijs", prijs));
              
              myConnection.Open();
              myCommand.ExecuteNonQuery();
              myConnection.Close();
          }
      }
  }
  

  Deze klasse bevat de methoden die werkelijk connectie met de database maken. We retourneren nog geen custom objecten, maar ADO.Net - objecten. Op deze manier moeten we hier geen referentie naar Logic maken en blijft onze DAL onafhankelijk.

  Voor het gebruik van ConfigurationManager is het mogelijk dat je nog eens expliciet een referentie moet leggen naar System.Configuration.
  We gebruiken vanuit de DAL-laag de connectionstring uit de Web.Config van de site, je kan de connectiestring ook in een app.config-file van de DAL-laag opnemen.

• In de Class-Library Logic maken we de klassen Drank, Drankcollection en Dranken aan in de file Drank.cs:

  Drank.cs
  using System;
  using System.Collections;
  using System.Collections.Generic;
  using System.Text;
  using System.Data;
  using DAL;
  
  namespace Logic
  {
      public class Drank
      {
  
          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 Single prijs;
  
          public Single Prijs
          {
              get { return prijs; }
              set { prijs = value; }
          }
  
          public Drank()
          {
          }
  
          public Drank(int id, string naam, Single prijs)
          {
              Id = id;
              Naam = naam;
              Prijs = prijs;
          }
      }
  
      public class Drankcollection : CollectionBase
      {
          public Drankcollection()
          {
          }
  
          public void Add(Drank d)
          {
              InnerList.Add(d);
          }
          
          //indexer: "Item"-property
          public Drank this[int index]
          {
              get { return (Drank)InnerList[index]; }
              set { InnerList[index] = value; }
          }
      }
  
      public class Dranken
      {
          public static Drankcollection GetDranken()
          {
              DataSet ds = DrankDB.GetDranken();
              DataTable dt = ds.Tables["Dranken"];
  
              Drankcollection dc = new Drankcollection();
              for (int i = 0; i < dt.Rows.Count; i++ )
              {
                  Drank d = new Drank();
                  d.Id = Convert.ToInt32(dt.Rows[i]["id"]);
                  d.Naam = dt.Rows[i]["Naam"].ToString();
                  d.Prijs = Convert.ToSingle(dt.Rows[i]["Prijs"]);
                  dc.Add(d);               
              }
              return dc;
          }
  
          public static void DrankenUpdate(int id, string naam, float prijs)
          {
              DrankDB.DrankenUpdate(id, naam, prijs);
          }
  
      }
  
  }
  

  De methode GetDranken uit de klasse Dranken haalt de gegevens op uit de Datalaag en maakt er Custom Objecten van.

• Maak in de website een nieuwe Web Form Datalist_dranken.aspx aan
• Voorzie een DataList DLdrank
• Stel de eigenschap DataKeyField in op Id
• Kies Edit Templates - ItemTemplates:

  

• Voorzie in de Page_Load van Datalist_dranken.aspx

  protected void Page_Load(object sender, EventArgs e)
  {
      if (!IsPostBack)
      {
          DLdrank.DataSource = Dranken.GetDranken();
          DLdrank.DataBind();
      }
  }
  
  

• Maak een EventHandlers voor de DataList DLdrank:
  • SelectedIndexChanged (uitgevoerd bij select-command)

    protected void DLdrank_SelectedIndexChanged(object sender, EventArgs e)
    {
       DLdrank.DataSource = Dranken.GetDranken();
       DLdrank.DataBind();
    }
    

  • ItemCommand (voor een willekeurig command - hier unselect)

    protected void DLdrank_ItemCommand(object source, DataListCommandEventArgs e)
    {
        if (e.CommandName == "unselect")
        {
            DLdrank.SelectedIndex = -1;
            DLdrank.DataSource = Dranken.GetDranken();
            DLdrank.DataBind();
        }
    }
    

  • EditCommand (uitgevoerd bij edit-command)

    protected void DLdrank_EditCommand(object source, DataListCommandEventArgs e)
    {
         DLdrank.EditItemIndex = e.Item.ItemIndex;
         DLdrank.DataSource = Dranken.GetDranken();
         DLdrank.DataBind();
    }
    

  • CancelCommand (uitgevoerd bij cancel-command)

    protected void DLdrank_CancelCommand(object source, DataListCommandEventArgs e)
    {
        DLdrank.EditItemIndex = -1;
        DLdrank.DataSource = Dranken.GetDranken();
        DLdrank.DataBind();
    }
    
    

  • UpdateCommand (uitgevoerd bij update-command)

    protected void DLdrank_UpdateCommand(object source, DataListCommandEventArgs e)
    {
        DLdrank.EditItemIndex = -1;
    
        int id = Convert.ToInt32(DLdrank.DataKeys[e.Item.ItemIndex]);
        string naam = ((TextBox)e.Item.FindControl("TxtNaam")).Text;
        float prijs = Convert.ToSingle(((TextBox)e.Item.FindControl("TxtPrijs")).Text);
    
        Dranken.DrankenUpdate(id, naam, prijs);
    
        DLdrank.DataSource = Dranken.GetDranken();
        DLdrank.DataBind();
        
    }
    

DataList: items toevoegen

DataList: items verwijderen

Meer tutorials:

leer ook:

html |

xhtml |

css |

asp |

asp.net |

c# |

ado.net |

linq |

ajax |

java |

javascript

© - Cursusweb