我认为我下面的代码可能是各种答案的良好组合。它使用 Web 服务来检索新通知,并使用 jquery 来按时间间隔拉取通知。它将通知存储在用户会话中。
首先,我们简单的“消息”类表示一条消息。我在你的问题中注意到你会有多种类型的消息,所以我想确保提供一个涵盖这些的解决方案。我的消息类只有两个属性:文本和类型。在我的演示中,Type 被用作消息的背景颜色。
public class Message
{
public string Text { get; set; }
public string Type { get; set; }
}
接下来是处理消息保存和检索的 UserMessages 类。它将所有消息保存到用户会话。
public class UserMessages
{
protected static string _messageSessionID = "userMessages";
public static List<Message> GetMessages()
{
var msg = HttpContext.Current.Session[_messageSessionID];
if (msg == null)
{
return new List<Message>();
}
//clear existing messages
HttpContext.Current.Session[_messageSessionID] = null;
//return messages
return (List<Message>)msg;
}
public static void AddMessage(Message message)
{
var msg = GetMessages();
msg.Add(message);
HttpContext.Current.Session[_messageSessionID] = msg;
}
}
对于我的演示,我决定通过结合 ASP.Net Web 服务、ScriptManager 和 jquery 来使用 AJAX 读取消息。这是我的网络服务:
--ASMX 文件--
<%@ WebService Language="C#" CodeBehind="~/App_Code/MessageService.cs" Class="UserNotification.MessageService" %>
--CS 文件--
namespace UserNotification
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class MessageService : System.Web.Services.WebService
{
public MessageService()
{
}
[WebMethod(EnableSession = true)]
public List<Message> GetMessages()
{
return UserMessages.GetMessages();
}
}
}
在我的 aspx 页面上,我创建了一个脚本管理器,其中包含对我的服务的引用、一个用于消息的 div 占位符和一个快速而肮脏的消息添加界面:
<asp:ScriptManager runat="server">
<Services>
<asp:ServiceReference Path="~/MessageService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<div id="msgArea">
</div>
<span>Add Message</span>
Text: <asp:TextBox ID="txtMessage" runat="server" />
<br />
Type: <asp:TextBox ID="txtType" runat="server" Text="yellow" />
<asp:Button ID="btnAdd" runat="server" Text="Add" onclick="btnAdd_Click" />
</div>
</form>
为了支持消息创建,我在后面的代码中添加了以下方法来处理按钮点击事件:
protected void btnAdd_Click(object sender, EventArgs e)
{
UserMessages.AddMessage(new Message() {Text = txtMessage.Text, Type = txtType.Text});
}
现在是重要的部分。为了实际显示消息,我编写了以下 javascript 块(主要使用 jquery,我使用 v1.4.1,但您可以使用任何您想要的版本)。计时器设置为 30 秒间隔。这意味着它也会在第一次处理之前等待 30 秒。要在页面加载时立即处理,请在 setInterval 之前添加 CheckMessages(); 以立即检查页面加载。保留在 setInterval 中将允许定期更新消息。
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
setInterval('CheckMessages();', 30000);
});
function CheckMessages() {
UserNotification.MessageService.GetMessages(function (result) {
//alert('found ' + result.length.toString() + ' messages.');
$.each(result, function (i, e) {
var dv = $('<div />')
.css('background-color', e.Type)
.css('border', '4px solid white')
.css('color', 'white')
.css('text-align', 'center')
.append('<span>' + e.Text + '</span>')
.append(
$('<button />')
.text('Close')
.click(function () { $(this).parent().remove(); }));
$('#msgArea').append(dv);
});
}, function (e) { alert(e._message); });
}
</script>
请注意,在上面的代码块中,我使用了 e.Text,它与我们在代码中的属性名称和 e.Type 匹配。 e.Type 是我们在这里指定的背景颜色,但在现实生活中可能会用于其他用途。此外,在现实生活中,所有这些 CSS 属性都在一个 CSS 类中(可能每个消息类型都有一个 CSS 类)。我添加了一个“关闭”按钮,你没有提到它,但我认为人们希望能够关闭通知。
关于这个实现的一个很酷的事情是,如果你意识到你需要在会话中而不是在数据库中存储消息,这个实现将顺利处理它。只需修改 UserMessages.GetMessages 以从数据库/其他位置拉取即可。此外,除了从会话中读取用户消息之外,您还可以将其设置为通过从缓存中读取全局消息来处理全局消息。