Articles / Nouvelle technologies

Windows Communication Foundation (WCF) et Ajax

Ajax est à la mode en ce moment... Les Web Services aussi! Alors comment peut-on faire cohabiter ses deux technologies? Comment, par exemple, peut-on contacter un Web Service WCF avec Ajax pour faire des appels au niveau du client dans un site web ASP.NET?

Très facilement! Je vous propose de mettre tout ça en pratique pour voir comment cela fonctionne exactement.

La première chose à faire est de créer un site web dans Visual Studio 2008 :

File
New
Web Site
Une nouvelle fenêtre apparaît :
- Sélectionnez le template "Web Site" .
- Donnez un nom à votre site clic .
- Cliquez sur "Ok".

Le but de notre projet sera simplement appeler la méthode "sayHello" de notre Web Service WCF et de l'afficher dans un "div". En parlant de Web Service, nous allons l'ajouter à notre projet:

Clic droit sur le projet
Add
New item
Une nouvelle fenêtre apparaît :
- Sélectionnez le template : "AJAX-Enabled WCF Service".
- Donnez un nom à votre service.
- Cliquez sur "Ok".

Notre service expose actuellement une seule méthode :

[ServiceContract(Namespace = "Service.Wygwam")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class ServiceAjax
{
    // Add [WebGet] attribute to use HTTP GET
    [OperationContract]
    public string sayHello(string nom)
    {
        // Add your operation implementation here
        return "Bonjour " + nom + " " + DateTime.Now.ToLongTimeString();
    }

// Add more operations here and mark them with [OperationContract]
}
[/code]

N'oubliez pas de modifier l'app.config afin d'avoir une description de votre Web Service cohérente avec les différents contrats et interfaces que nous avons vu plus haut.

[code:xml]
<system.serviceModel>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
<services>
<service name="WebApplication1.ServiceAjax">
<endpoint address="" behaviorConfiguration="WebApplication1.ServiceAjaxAspNetAjaxBehavior"
   binding="webHttpBinding" contract="WebApplication1.ServiceAjax" />
</service>
</services>
<bindings />
    <client />
<behaviors>
     <endpointBehaviors>
        <behavior name="WebApplication1.ServiceAjaxAspNetAjaxBehavior">
           <enableWebScript />
        </behavior>
     </endpointBehaviors>
</behaviors>
</system.serviceModel>
[/code]

Si on regarde bien notre fichier web.config (ci-dessus) on remarque la balise "enableWebScript" qui est l'équivalent de l'attribut "ScriptService" des services ASMX. Cela va nous permettre d'utiliser ce Web Service dans notre code JavaScript.

Pour bien s'en convaincre, nous allons ajouter un ScriptManagerProxy avec la référence à notre Web Service

[code:xml]
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/ServiceAjax.svc" />
        </Services>
</asp:ScriptManagerProxy>
[/code]

Si nous lançons la page comme ceci, nous verrons dans son code source (HTML) quelque chose comme ceci :

[code:xml]
<script src="/ScriptResource.axd?d=LbnntrdM2RN0nUX7jIQ4cL5nXLasEepqP1ZtSCuQdxT0UEcrN7qNAZQZhGS-xpXdaxaXjpQj2Ab_mst-9k9mVy2fzo7lEtbx6GBgASB78kDaAroafA5V5llOkKCw_56G0&t=633318831728812000" mce_src="/ScriptResource.axd?d=LbnntrdM2RN0nUX7jIQ4cL5nXLasEepqP1ZtSCuQdxT0UEcrN7qNAZQZhGS-xpXdaxaXjpQj2Ab_mst-9k9mVy2fzo7lEtbx6GBgASB78kDaAroafA5V5llOkKCw_56G0&t=633318831728812000" type="text/javascript"></script>
<script src="ServiceAjax.svc/jsdebug" mce_src="ServiceAjax.svc/jsdebug" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
[/code]

On peut parfaitement se rendre sur l'url qu'il nous donne pour voir le code JavaScript qui a été généré. Lorsque vous vous rendez sur l'url, IE vous propose de télécharger le JavaScript :

Si vous ouvrez le fichier (avec le bloc note par exemple) vous obtenez ceci :

Ce qui est intéressant là dedans c'est qu'on voit apparaître notre méthode "sayHello" :

[code:js]
ServiceAjax.sayHello= function(nom,onSuccess,onFailed,userContext) {
/// <param name="nom" type="String">System.String</param>
/// <param name="succeededCallback" type="Function" optional="true" mayBeNull="true"></param>
/// <param name="failedCallback" type="Function" optional="true" mayBeNull="true"></param>
/// <param name="userContext" optional="true" mayBeNull="true"></param>
ServiceAjax._staticInstance.sayHello(nom,onSuccess,onFailed,userContext); }
[/code]

On peut donc maintenant écrire notre code. Nous allons ajouter un label et un bouton sur notre page. Lors du clic sur ce bouton, nous ferons appel à notre Web Service via notre JavaScript :

[code:js]
function Hello()
{
    ServiceAjax.sayHello("Loic Bar",onMethodCompleted);
}
function onMethodCompleted(results)
{
    $get("lbresult").innerText = results;
}
[/code]

Et au niveau de notre page, nous avons :

[code:xml]
<div>
<asp:Label ID="lbresult" runat="server" Text="Label"></asp:Label>
<a href="javascript:Hello()" mce_href="javascript:Hello()">Click</a>
</div>
[/code]

Résultat édifiant... Essayez!