Navigatie

Contact

Send mail to the author(s) E-mail

View Richard Soeteman's profile on LinkedIn

RSS 2.0 | Atom 1.0 | CDF

Archief

Categorieën

Blogroll

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

Sign In

Zoeken

# Sunday, 30 July 2006
Sunday, 30 July 2006 16:21:32 (GMT Daylight Time, UTC+01:00) ( ASP.NET | Atlas )

This Blog is not active anymore, further posts will be available on my company website. Read new posts here

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:
Monday, 31 July 2006 09:04:55 (GMT Daylight Time, UTC+01:00)
Ik moet zeggen dat ik me nog niet verdiept hebt in Atlas maar ik had de drempel hoger verwacht!

Microsoft heeft wat How-To-Do-With-Atlas video's online gezet, misschien ook wel het bekijken waard voor de mensen die zich ook aan Atlas willen wagen:
http://www.asp.net/learn/videos/default.aspx?tabid=63
Monday, 31 July 2006 11:23:10 (GMT Daylight Time, UTC+01:00)
Atlas verbaasd mij tot nu toe in positieve zin. Voor een product dat nog niet af is werkt het goed. Ik moet wel zeggen dat ik tot nu toe alleen nog gebruik gemaakt heb van de Server Controls, maar ik ben tot nu toe nog niet in een situatie gekomen dat ik meer nodig had. Wel heb ik als doel op korte termijn de overige functionaliteit van het Atlas Framework te doorgronden en zal mijn bevindingen zeker posten.

De howto video's van Microsoft vind ik een goede ontwikkeling. Ik hoop alleen dat in de toekomst deze howto's ook wat dieper op de materie in gaan.
Monday, 31 July 2006 15:50:35 (GMT Daylight Time, UTC+01:00)
Volgens mij is dat een probleem van alle howto's, leuk voor de basis maar daar houd het snel op. Maar niet alleen howti's, ook seminars voor level 300 of zelfs 400 vind ik soms gewoon enorm tegenvallen.

Ik kijk enorm uit naar je bevindingen met Atlas, houd ons op de hoogte ;)
Friday, 11 August 2006 08:21:03 (GMT Daylight Time, UTC+01:00)
't Is weer een mooi verhaal Soet.
Heb laatst bij Adecco (jawel, zit er weer ;)) gebruik gemaakt van het update panel. Als je snel wat AJAX functionaliteit wil toevoegen is dit inderdaad een leuke optie.

Comments are closed.