[转]asp.net 2.0中实现弹窗报警提示

在 web应用中，比如OA中，经常要用到一些提示，比如EMAIL到达了，就做个象MSN那样的提示框，弹出给用户提示，然后再关闭。在asp.net 2.0的ajax中，这个现在不难做到了，刚好看到老外的一篇 文章，讲解到，下面小结之（原文：http://aspalliance.com/1306_How_to_Show_MessengerLike_Popups_Using_AJAX）

比如有个数据库表，是存放EMAIL的，当数据库表中的EMAIL一有的时候，就提示用户，首先简单写一个WEBSERVICE如下

[ScriptService]
public class InboxService : System.Web.Services.WebService
{
[WebMethod]
public int GetLatestNumberOfEmails()
{
int numberOfEmails = 0;

using (SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings[0].ConnectionString))
{
using (SqlCommand cmd = new SqlCommand("GetLatestNumberOfEmails", conn))
{
cmd.CommandType = CommandType.StoredProcedure;

conn.Open();
numberOfEmails = (int)cmd.ExecuteScalar();
}
}

return numberOfEmails;
}
}

这里要注意要在客户端通过AJAX调用WEBSERICE，要加上[ScriptService]

2 在default.aspx中，首先加入一个updateprogress控件，如下

 1<asp:UpdateProgress DynamicLayout="False" ID="UpdateProgress1" runat="server">
 2<ProgressTemplate>
 3<div id="modal" class="modal">
 4<div class="modalTop">
 5<div class="modalTitle">My Inbox</div>
 6<span style="CURSOR: hand" onclick="javascript:HidePopup();">
 7<img alt="Hide Popup" src="App_Themes/Default/images/close_vista.gif" border="0" />
 8</span>
 9</div>
10<div class="modalBody">
11You received <strong><span id="modalBody"></span></strong>  Email(s).
12</div>
13</div>
14</ProgressTemplate>
15</asp:UpdateProgress>
16

这里的关闭X按钮，调用javascript的脚本，等阵再说然后当然要加scriptmanager控件了，如下

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/InboxService.asmx" />
</Services>
</asp:ScriptManager>

这里调用了我们刚才写的webservice之后是写script了

 1<script type="text/javascript">
 2var numberOfEmails_original= 0;
 3
 4var app = Sys.Application;
 5app.add_init(applicationInitHandler);
 6
 7function applicationInitHandler(sender, args) {
 8InboxService.GetLatestNumberOfEmails(OnCurrentNumberOfEmailsReady);
 9}
10
11

 

首先，默认的当然是0封邮件了，有变量来存放当前邮件数量，之后是在ajax中的初始化事件中调用webserice的方法了，并且回调OnCurrentNumberOfEmailsReady方法，

1function OnCurrentNumberOfEmailsReady(result, userContext, methodName) {
2numberOfEmails_original= result;
3
4// Start Checking
5StartChecking();
6}
7
8

OnCurrentNumberOfEmailsReady方法将WEBSERVICE调用的结果（当前状态下有多少封信RESULT）返回给变量，然后调用sartchecking()方法

 

function StartChecking() {
InboxService.GetLatestNumberOfEmails(OnLastestNumberOfEmailsReady);
}

startchecking方法，继续回调OnLastestNumberOfEmailsReady方法

 

 1function OnLastestNumberOfEmailsReady(result, userContext, methodName) {
 2var numberOfEmails_new= result;
 3if (numberOfEmails_new > numberOfEmails_original) {
 4ShowPopup();
 5$get("modalBody").innerHTML= numberOfEmails_new - numberOfEmails_original;
 6
 7// Update the count here
 8numberOfEmails_original= numberOfEmails_new;
 9}
10
11// Start checking again
12window.setTimeout(StartChecking, 10000);
13}
14
15

这个方法，用当前邮件数-原来邮件数，就得出新增了多少封邮件了，再将结果赋值给显示区域的modalbody，并且记得把当前邮件数量的变量更新哦（numberOfEmails_original= numberOfEmails_new;
）

然后再用setimeout来设置每隔10000毫秒检查一次了

 

function ShowPopup() {
$get("UpdateProgress1").style.visibility= "visible";
$get("UpdateProgress1").style.display= "block";
}
function HidePopup() {
$get("UpdateProgress1").style.visibility= "hidden";
$get("UpdateProgress1").style.display= "none";
}

</script>