Création d'un système de notification en Ajax (microsoft)

Introduction

Je vais vous présenter ici un petit mécanisme de notification passant par un webservice. A interval régulier, le client via Javascript va demander au webservice une information. Nous utiliserons ici le framework Ajax de Microsoft.

Implémentation

L'implémentation se réalise en deux étapes. La première concerne la création de la page statique avec un div qui se rendra en bas à droite et disparaitra. La seconde étape est la réalisation du webservice et l'implémentation du code JS faisant appel à ce service dédié.

Code de la page web vide de logique

<%@ 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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
Pif paf pouf ;-)
</div>
<div id="modal_dialog" style="visibility: hidden; display: none;">
<div>
Mon popup !<span style="cursor: hand" onclick="javascript:HidePopup();">
<img alt="Hide Popup" src="close.png" style="height: 24px; width: 24px;" />
</span>
</div>
<div id="modal_dialog_content">
</div>
</div>
</form>
</body>
</html>

Implémentation de la logique du Service web

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;

[ScriptService]
public class ServiceWeb : System.Web.Services.WebService
{
private static int nbr = 0;

[WebMethod]
public string HelloWorld()
{
return string.Format("Hello World {0}", ++nbr);
}

}

Implémentation de la logique Javascript dans la page ASP.NET

<%@ 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></title>
<style type="text/css">
#modal_dialog
{
bottom: 0px;
right: 0px;
position: fixed;
width: 250px;
height: 100px;
border: solid 2px black;
margin: 0px 0px 0px 20px;
background-color: red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm1" runat="server">
<Services>
<asp:ServiceReference Path="~/ServiceWeb.asmx" />
</Services>
</asp:ScriptManager>

<script language="javascript" type="text/javascript">
var message;

var app = Sys.Application;
app.add_init(applicationInitHandler);

function applicationInitHandler(sender, args) {
StartChecking();
}

function StartChecking() {
// les Argument d'entrée dans le webservice sont à mettre en premier avant le callback
ServiceWeb.HelloWorld(OnCurrentHelloWorldCallback);
}

function OnCurrentHelloWorldCallback(result, userContext, methodName) {
if (result !== message) {
ShowPopup();
$get("modal_dialog_content").innerHTML = result;
message = result;
}
window.setTimeout(StartChecking, 10000);
}

function ShowPopup() {
$get("modal_dialog").style.visibility = "visible";
$get("modal_dialog").style.display = "block";
}

function HidePopup() {
$get("modal_dialog").style.visibility = "hidden";
$get("modal_dialog").style.display = "none";
}

</script>

<div>
Pif paf pouf ;-)
</div>
<div id="modal_dialog" style="visibility: hidden; display: none;">
<div>
Mon popup !<span style="cursor: hand" onclick="javascript:HidePopup();">
<img alt="Hide Popup" src="close.png" style="height: 24px; width: 24px;" />
</span>
</div>
<div id="modal_dialog_content">
</div>
</div>
</form>
</body>
</html>

Résultat

Voici le résultat au rendu ... :-)

Commentaires

1. Le mardi, mars 3 2009, 09:31 par Steve Degosserie

Ze Titi is Back !!! ;o)

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

Fil des commentaires de ce billet

Page top