Par Thierry Thoua,
mardi, mars 3 2009.
Lien permanent
ASP.NET
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 ... :-)
une réaction
1 De Steve Degosserie - 03/03/2009, 09:31
Ze Titi is Back !!! ;o)