ASP.NET AJAX is de Microsoft implementatie van de Ajaxtechnologie.
Tijdens de ontwikkeling van deze technologie werd de codenaam Atlas gebruikt.

Sinds .Net 3.0 maakt Ajax standaard deel uit van de ASP.Net-toolset.

ASP.NET Ajax bestaat uit een server-side library zodat de ASP.Net Web Controls Ajax functionaliteit verkrijgen, en een client-side scriptlibrary die de nodig Javascript-code koppelt aan de Ajax-controls.

ASP.NET AJAX bij MSDN.

• Start Visual Studio 2010
• Start een nieuw Project > Visual Studio Solutions > Blank Solution: AjaxSolution
• Voeg een New ASP.Net Empty Web Site toe aan de solution: AjaxSite
• Voeg een Web Form toe: AjaxPage.aspx

  Plaats vanuit Tab Ajax Extensions in de Toolbox een ScriptManager Component op de pagina.
  Deze component regelt de AJAX-functionaliteit van de pagina:

  • Beheert ASP.Net Ajax extension-componenten
  • Voorziet partial page-rendering
  • Regelt client-requests
  • Regelt server-responses
• Plaats een UpdatePanel op de pagina met daarin:
  • Een Label: ID: LblTekst - Text: "Originele tekst"
  • Een Button: ID: BtnVerander - Text: "Verander tekst"
  
  Een UpdatePanel zorgt ervoor dat dit deel van de pagina zonder Full PostBack kan heropgebouwd worden.
  We spreken van een CallBack, Asynchronous PostBack of Partial PostBack.
  De inhoud van een UpdatePanel wordt in een ContentTemplate geplaatst
  Wanneer meerdere UpdatePanels worden geplaatst kunnen die onafhankelijk van elkaar functioneren.
  Tal van instellingen zorgen ervoor dat je UpdatPanels kan beïnvloeden door controls buitenaf, of UpdatePanels kan nesten
• In het Click-Event van BtnVerander plaats je volgende code:

  protected void BtnVerander_Click(object sender, EventArgs e)
  {
          LblTekst.Text = "Tekst aangepast door CallBack!";
  }
  

• Voer de toepassing uit!

Standaard verkrijgt elke component die zich in een UpdatePanel bevindt Ajax-functionaliteit. Met behulp van Triggers kan je ervoor zorgen dat de inhoud van een UpdatePanel vernieuwd wordt door een control gelegen buiten het UpdatePanel.

• Plaats een Button BtnTijd op een Web Form
• Voorzie een UpdatePanel op de Web Form
• In het UpdatePanel plaats je een Label LblTijd met als tekst "Klik op de knop"
• Voorzie via de Property Triggers van het UpdatePanel een trigger door het Click-Event van de Button BtnTijd:

  

• Voorzie code in BtnTijd_Click:

  protected void Page_Load(object sender, EventArgs e)
  {
      
  }
  
  protected void BtnTijd_Click(object sender, EventArgs e)
  {
      LblTijd.Text = System.DateTime.Now.ToString();
  }
  

De component UpdateProgress kan de gebruiker op de hoogte stellen dat een CallBack aan de gang is.

• Plaats een UpdateProgress op de Web Form
• Plaats volgende componenten in de UpdateProgress:
  • Een image: ImageUrl: images/loading.gif -
  • Een Label met de Text: "Bezig met verwerken"
• Voorzie een wachttijd in een willekeurige event-handler die zorgt voor het Renderen van een UpdatePanel

  protected void BtnTijd_Click(object sender, EventArgs e)
  {
      System.Threading.Thread.Sleep(5000);
      LblTijd.Text = System.DateTime.Now.ToString();
  }
  

Je begrijpt dat het artificiëel toevoegen van een wachttijd enkel als voorbeeld dient, en dat je dit niet in een echte toepassing moet gebruiken :)

In de eigenschap DisplayAfter van de UpdateProgress kan je aangeven hoeveel milliseconden er wordt gewacht op de control te tonen. Op die manier kan je ervoor zorgen dat voor snelle acties de control niet voortdurend flikkert.

Meer over UpdateProgress

Een Timer control kan je gebuiken als Trigger van een UpdatePanel. De Timer zorgt ervoor dat een update gebeurt volgens een tijdsinterval.

• Plaats een Timer Control op de pagina
• Zet de eigenschap Interval van de Timer op 2000 (milliseconden)
• Plaats een UpdatePanel met daarin een Label LblBericht
• Zet de UpdateMode voor dit UpdatePanel op Conditional, doe dit zeker voor eventuele andere UpdatePanels (bij Always wordt een UpdatePanel herladen om het even welke control de CallBack veroorzaakt).
• Voeg een Trigger voor het UpdatePanel toe:

  

• Voorzie volgende code en event-handlers:

  public partial class Updatepanel : System.Web.UI.Page
  {
      private ArrayList berichten;
  
      protected void Page_Load(object sender, EventArgs e)
      {
          LblTijd.Text = System.DateTime.Now.ToString();
          if (ViewState["berichten"] == null)
          {
              berichten = new ArrayList();
              berichten.Add("Het is mooi weer vandaag");
              berichten.Add("Tussen kerst en nieuw zit een volledige week");
              berichten.Add("Het is weer bijna pasen");
              berichten.Add("Ja ja, het leven is lastig...");
              ViewState["berichten"] = berichten;
              ViewState["nr"] = 0;
              LblBericht.Text = berichten[0].ToString();
          }
      }
  
      protected void Timer1_Tick(object sender, EventArgs e)
      {
          berichten = (ArrayList)ViewState["berichten"];
          int nr = Convert.ToInt32(ViewState["nr"]);
          nr++;
          if (nr == berichten.Count) nr = 0;
          LblBericht.Text = berichten[nr].ToString();
          ViewState["nr"] = nr.ToString();
      }
  }
  

De Ajax Control ToolKit is een opensource uitbreiding voor ASP.Net Ajax - ontwikkelaars en beschikt over een collectie extra Ajax-enabled componenten.

Een overzicht vind je op de site van de Ajax Control Toolkit

Database en Stored Procedures

• Rechtsklik App_data en maak een SQL SERVER 2008 EXPRESS database Verkoop.mdf
  Of maak een nieuwe database in SQL SERVER 2008
• Voeg via Server Explorer een tabel Werknemer in

  

• Geef een aantal voorbeeldwaarden op

  

• Maak volgende Stored Procedures:

  CREATE PROCEDURE dbo.WerknemerSelect
  AS
  	SELECT id, voornaam, naam 
  	FROM Werknemer
  	RETURN
  GO
  
  CREATE PROCEDURE dbo.WerknemerUpdate
  
  	(
  	@id int,
  	@voornaam varchar(50),
  	@naam varchar(50)
  	)
  
  AS
  	UPDATE Werknemer 
  	SET 
  		voornaam= @voornaam,
  		naam = @naam
  	WHERE
  		id = @id
  	RETURN
  GO
  
  CREATE PROCEDURE dbo.WerknemerInsert
  	(
  	@voornaam varchar(50),
  	@naam varchar(50),
  	@id int output
  	)
  AS
  	INSERT INTO Werknemer (voornaam, naam)	
  	VALUES (@voornaam, @naam)
  	
  	SET @id = SCOPE_IDENTITY()
  	RETURN
  GO
  
  CREATE PROCEDURE dbo.WerknemerDelete 
  	(
  	@id int
  	)
  
  AS
  	DELETE FROM Werknemer where id = @id
  	RETURN
  

• Doe volgende aanpassing aan Web.Config van de Site:

  <configuration>
   <configSections>
   ...
   </configSections>
   <connectionStrings>
      <add name="VerkoopConn" providerName="System.Data.SqlClient" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|Verkoop.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True"/>
    </connectionStrings>
  ...
  

  Data Access Layer

• Voeg een project toe aan de solution: Class-Library: DAL
• Maak een Class-file WerknemerDB.cs:

  using System;
  using System.Collections.Generic;
  using System.Text;
  using System.Data;
  using System.Data.SqlClient;
  using System.Configuration;
  
  
  namespace DAL
  {
  
      public class WerknemerDB
      {
  
          public static DataSet GetWerknemers()
          {
              SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["VerkoopConn"].ConnectionString);
  
              SqlCommand myCommand = new SqlCommand("WerknemerSelect", myConnection);
              myCommand.CommandType = CommandType.StoredProcedure;
  
              SqlDataAdapter da = new SqlDataAdapter(myCommand);
  
              DataSet ds = new DataSet("DsWerknemer");
              da.Fill(ds, "Werknemers");
  
              return ds;
          }
  
  
          public static void Update(int id, string voornaam, string naam)
          {
              SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["VerkoopConn"].ConnectionString);
              SqlCommand myCommand = new SqlCommand("WerknemerUpdate", myConnection);
              myCommand.CommandType = CommandType.StoredProcedure;
              myCommand.Parameters.AddWithValue("@id",id.ToString());
              myCommand.Parameters.AddWithValue("@voornaam", voornaam);
              myCommand.Parameters.AddWithValue("@naam", naam);
  
              myConnection.Open();
              myCommand.ExecuteNonQuery();
              myConnection.Close();
          }
  
          public static int Insert(string voornaam, string naam)
          {
              SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["VerkoopConn"].ConnectionString);
              SqlCommand myCommand = new SqlCommand("WerknemerInsert", myConnection);
              myCommand.CommandType = CommandType.StoredProcedure;
              myCommand.Parameters.Add(new SqlParameter("@voornaam", voornaam));
              myCommand.Parameters.Add(new SqlParameter("@naam", naam));
              SqlParameter pid = new SqlParameter("@id", SqlDbType.Int);
              pid.Direction = ParameterDirection.Output;
              myCommand.Parameters.Add(pid);
  
  
              myConnection.Open();
              myCommand.ExecuteNonQuery();
              myConnection.Close();
  
              int id = Convert.ToInt32(pid.Value);
  
              return id;
          }
  
          public static void Delete(int id)
          {
              SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["VerkoopConn"].ConnectionString);
              SqlCommand myCommand = new SqlCommand("WerknemerDelete", myConnection);
              myCommand.CommandType = CommandType.StoredProcedure;
              myCommand.Parameters.Add(new SqlParameter("@id", id));
  
              myConnection.Open();
              myCommand.ExecuteNonQuery();
              myConnection.Close();
  
          }
      }
  }
  

  Logic layer

• Voeg een project toe aan de solution: Class-Library: Logic
• Voorzie een referentie naar DAL.dll
• Maak hierin een Class-file Werknemer.cs:

  using System;
  using System.Collections;
  using System.Collections.Generic;
  using System.Text;
  using System.Data;
  using System.ComponentModel;
  using DAL;
  
  namespace Logic
  {
      [DataObject]
      public class Werknemer
      {
  
          private int id;
  
          public int Id
          {
              get { return id; }
              set { id = value; }
          }
          private string voornaam;
  
          public string Voornaam
          {
              get { return voornaam; }
              set { voornaam = value; }
          }
  
          private string naam;
  
          public string Naam
          {
              get { return naam; }
              set { naam = value; }
          }
  
  
          public Werknemer()
          {
          }
  
          public Werknemer(int id, string voornaam, string naam)
          {
              Id = id;
              Voornaam = voornaam;
              Naam = naam;
          }
  
          [DataObjectMethod(DataObjectMethodType.Select)]
          public static List<Werknemer> GetWerknemers()
          {
              DataSet ds = WerknemerDB.GetWerknemers();
              DataTable dt = ds.Tables["Werknemers"];
  
              List<Werknemer> wcol = new List<Werknemer>();
              for (int i = 0; i < dt.Rows.Count; i++)
              {
                  Werknemer w = new Werknemer();
                  w.Id = Convert.ToInt32(dt.Rows[i]["id"]);
                  w.Voornaam = dt.Rows[i]["Voornaam"].ToString();
                  w.Naam = dt.Rows[i]["Naam"].ToString();
                  wcol.Add(w);
              }
              return wcol;
          }
  
          [DataObjectMethod(DataObjectMethodType.Update)]
          public static void Update(Werknemer w)
          {
              WerknemerDB.Update(w.Id, w.Voornaam, w.Naam);
          }
  
          [DataObjectMethod(DataObjectMethodType.Delete)]
          public static void Delete(Werknemer w)
          {
              WerknemerDB.Delete(w.Id);
          }
  
          [DataObjectMethod(DataObjectMethodType.Insert)]
          public static int Insert(Werknemer w)
          {
              return WerknemerDB.Insert(w.Voornaam, w.Naam);
          }
      }
  
      
  
  }
  
  

  Website

• Voorzie in de Site een referentie naar Logic.dll
• Maak een Web Form Ajax_Werknemers.aspx aan
• Plaats een Ajax SriptManager op de Web Form
• Voorzie een UpdatePanel
• Plaats een GridView GVWerknemer in het UpdatePanel, voorzie een AutoFormat
• Kies via Choose DataSource voor een New Data Source: ObjectDataSource - ODSWerknemer
• Kies voor ODSWerknemer als Business Object Logic.Werknemers
• Geef de methoden op voor SELECT, UPDATE en DELETE zoals aangemaakt in de klasse Logic.Werknemers
  GridView ondersteund niet standaard INSERT, dit kan je oplossen met een FooterTemplate, of met FormView / DetailsView.
  Het is echter onze bedoeling straks een apart onderdeel voor INSERT te voorzien.
• Geef Id op als element van de eigenschap DataKeyNames
• Selecteer uit snelkeuzemenu: enable editing, enable deleting

  

  Meer over aanpassen van GridView in de Cursus ASP.Net, we gaan hier niet verder in op de soorten kolommen, sortering, paginering, ...

• Zorg voor een tabellayout van 1 rij en 2 kolommen, plaats het UpdatePanel in de tweede cel
• De eerste cel voorzie je van een tabel van 3 rijen en 2 kolommen:
  TextBoxen TxtVoornaam, TxtNaam, Button BtnToevoegen
  Onder deze tabel plaats je een UpdateProgress Control.
• Plaats onder de GridView GVWerknemer een Label LblBericht, geef het een mooie opmaak.

  

• Voorzie een Trigger in het UpdatePanel: ControlID = BtnToevoegen ; EventName = Click
• Voorzie een Click event-handler voor BtnToevoegen in Ajax_Werknemers.aspx.cs, alsook een opdracht in Page_Load

  ...
  using Logic;
  
  public partial class Ajax_Werknemers : System.Web.UI.Page
  {
      protected void Page_Load(object sender, EventArgs e)
      {
          LblBericht.Text = "";
      }
      protected void BtnToevoegen_Click(object sender, EventArgs e)
      {
          Werknemer w = new Werknemer();
          w.Voornaam = TxtVoornaam.Text;
          w.Naam = TxtNaam.Text;
          int nieuwid = Werknemers.Insert(w);
  
          LblBericht.Text = "Nieuwe werknemer ingevoegd met id: " + nieuwid.ToString();
  
          GVWerknemer.DataBind();
          
      }
  }
  

  

  • Voor validatie kan je bvb. gebruik maken van de Input Validation Controls.
    Wij valideren de twee TextBoxen voor het toevoegen van een Werknemer:
  • Voeg twee RequiredFieldValidators toe: RFVoornaam en RFNaam
  • Stel de ControlToValidate in op de resp. TextBox
  • Stel Display in op none
  • Geef een ErrorMessage in, deze kan getoond worden door een ValidationSummary Component te gebruiken.

    Wij gaan nog een stap verder en gebruiken de ValidatorCalloutExtender uit de AJAX ControlToolKit

  • Sleep twee ValidatorCalloutExtender-Controls op de pagina, zet de TargetControlID-eigenschap op de resp. RequiredFieldValidator

    

  Om dit te doen voor de GridView in Editmodus zal je moeten werken met EditItemTemplate kolommen, zie cursus ASP.Net.