Regelmatig spreek ik ASP.Net ontwikkelaars. Vaak vraag ik hen of ze wel eens gebruik maken van Atlas, het Ajax Framework van Microsoft. De meest gehoorde antwoorden zijn; “ja”, “duurt lang om te implementeren” , “maar dat is toch nog niet officieel uit?” “ransig met Javascript”, “ransig met dat XML script”. Op antwoord twee wil ik me voor nu even concentreren.
Via onderstaande ASP.Net applicatie kan een gebruiker zijn/haar naam invoeren en na een druk op de submit knop wordt de invoer getoond, lijkt mij een wereld applicatie 
.
Onderstaand de source:
HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!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>Een webapplicatie</title>
</head>
<body>
<form id="wepappForm" runat="server" defaultbutton="submit">
<div>
<asp:Label ID="applicatieInfo" runat="server" Text="" />
<br /> <br />
<asp:Label ID="yourName" runat="server" Text="Naam:" />
<asp:TextBox ID="nameField" runat="server" />
<asp:Button ID="submit" runat="server" Text="Submit" OnClick="submit_Click" />
<br /><br />
<asp:Label ID="typedValue" runat="server" Font-Bold="True" Font-Size="Large" />
</div>
</form>
</body>
</html>
C# CodeBehind :
using System;
using System.Configuration;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.applicatieInfo.Text = string.Format("Datum: {0} ", DateTime.Now);
}
protected void submit_Click(object sender, EventArgs e)
{
this.typedValue.Text = string.Format("Uw naam is {0}",this.nameField.Text);
}
}
Wanneer de applicatie wordt gestart wordt bij elke submit de pagina compleet ververst, zie de tijdsindicatie.
Applicatie gestart zonder Atlas functionaliteit
Submit zonder Atlas functionaliteit
Wat je eigenlijk zou willen is dat alleen het formulier wordt ververst en niet de gehele pagina. Met Atlas is dit binnen 5 minuten te realiseren. Allereerst downloaden en installeren we de nieuwste versie van het Atlas Framework.
Vervolgens kopiëren we de Microsoft.Web.Atlas.dll naar de bin folder van onze applicatie en maken een referentie naar deze DLL. Deze DLL is te vinden in \Mijn documenten\Visual Studio 2005\Templates\ProjectTemplates\Visual Web Developer\CSharp\ASPNETAtlasWebApplicationCS.zip voor cSharp developers, of Mijn documenten\Visual Studio 2005\Templates\ProjectTemplates\Visual Web Developer\VisualBasic\ASPNETAtlasWebApplicationVB.zip voor de Visual Basic variant.
Voeg aan je system.web sectie van je web.config onderstaande elementen toe
<pages>
<controls>
<add namespace="Microsoft.Web.UI" assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
<add namespace="Microsoft.Web.UI.Controls" assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
</controls>
</pages>
Dit zijn overigens de minimaal benodigde instellingen. Download hier een volledig voorgeconfigureerde web.config.
Aan de HTML Source voeg ik een Scriptmanager en een Updatepanel toe(in Bold en Italic weergegeven).
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!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>Een webapplicatie</title>
</head>
<body>
<form id="wepappForm" runat="server" defaultbutton="submit">
<atlas:ScriptManager runat="server" ID="scriptMngr" EnablePartialRendering="true" />
<div>
<asp:Label ID="applicatieInfo" runat="server" Text="" />
<br /> <br />
<atlas:UpdatePanel ID="updName" runat="server">
<ContentTemplate>
<asp:Label ID="yourName" runat="server" Text="Naam:" />
<asp:TextBox ID="nameField" runat="server" />
<asp:Button ID="submit" runat="server" Text="Submit" OnClick="submit_Click" />
<br /><br />
<asp:Label ID="typedValue" runat="server" Font-Bold="True" Font-Size="Large" />
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="submit" EventName="Click" />
</Triggers>
</atlas:UpdatePanel>
</div>
</form>
</body>
</html>
In een latere blogpost kom ik nog gedetailleerder op de Scriptmanager en Updatepanel terug, maar voor nu is het voldoende om te weten dat de scriptmanager verantwoordelijk is voor de communicatie tussen Atlas controls en code behind files. Het Update panel is verantwoordelijk voor het verversen van de controls die binnen het ContentTemplate element vallen en het doorsluizen van events die binnen het triggers element vallen.
In ons geval wordt na het drukken op de submit knop Event Click afgevangen, de postback wordt uitgevoerd en het formulier wordt ververst. Nu starten we onze webapplicatie met Atlas functionaliteit
Applicatie gestart met Atlas functionaliteit
Submit met Atlas functionaliteit
Constateer dat de datum/tijd dit keer niet veranderd omdat deze buiten het update panel is geplaatst en dus niet ververst wordt. Ook heb ik niks aan mijn codebehind file hoeven aan te passen. Uiteraard is dit slechts basis functionaliteit, maar in een volgende blogpost over Atlas zal ik dieper ingaan op het Framework.
Downloads: