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 ... :-)