通知类似于计算器面板 [英] Notify panel similar to stackoverflow's

问题描述

还记得那个小格，在页面的顶部显示出来，通知我们的东西（如新徽章）？

Remember the little div that shows up at the top of the page to notify us of things (like new badges)?

我想实现这样的事情，以及和我寻找一些最佳做法或模式。

I would like to implement something like that as well and am looking for some best practices or patterns.

我的网站是一个ASP.NET MVC应用程序也是如此。理想情况下，答案将包括像细节提出的这个的母版页和做的这个的在控制器中。

My site is an ASP.NET MVC app as well. Ideally the answers would include specifics like "put this in the master page" and "do this in the controllers".

只是为了节省您不必看自己，这是code，我从你的计算器时没有登录欢迎信息见。

Just to save you from having to look yourself, this is the code I see from the welcome message you get when not logged in at stackoverflow.

<div class="notify" style="">
  <span>
    First time at Stack Overflow? Check out the
    <a href="/messages/mark-as-read?returnurl=%2ffaq">FAQ</a>!
  </span>
  <a class="close-notify" onclick="notify.close(true)" title="dismiss this notification">×</a>
</div>

<script type="text/javascript">

  $().ready(function() {
    notify.show();
  });

</script>

我想补充一点，我明白这完全也明白jquery的参与。我是谁放code到标记时（谁作为其中一个ASP.NET MVC应用程序中的实体）。

I'd like to add that I understand this perfectly and also understand the jquery involvement. I'm just interested in who puts the code into the markup and when ("who" as in which entities within an ASP.NET MVC app).

谢谢！

推荐答案

围绕code有点窥探后，这里有一个猜测：

After snooping around the code a bit, here's a guess:

以下通报容器总是在视图标记

The following notification container is always in the view markup:

<div id="notify-container"> </div>

这是通知容器默认是隐藏的，是由JavaScript的给予一定的情况下填充。它可以包含任意数量的消息。

That notification container is hidden by default, and is populated by javascript given certain circumstances. It can contain any number of messages.

如果用户没有登录

的持久的：使用Cookie来跟踪是否显示与否的消息。

Persistence: Cookies are used to keep track of whether a message is shown or not.

的服务器端生成code视图的：
我认为计算器只能显示一个消息，如果您还没有登录以下code注入观点：

Server side generated code in the view: I think stackoverflow only shows one message if you aren't logged in. The following code is injected into the view:

<script type="text/javascript">
    $(function() { notify.showFirstTime(); });
</script>

JavaScript方法只是确定是否显示的showFirstTime（）这是你第一次来这里？根据一个cookie是否已经设置或不消息。如果没有cookie时，被显示的消息。如果用户采取行动，将Cookie设置，消息将不会显示在未来。该nofity.showFirstTime（）函数处理检查该cookie。

The showFirstTime() javascript method just determines whether to show the "Is this your first time here?" message based on whether a cookie has been set or not. If there is no cookie, the message is shown. If the user takes action, the cookie is set, and the message won't be show in the future. The nofity.showFirstTime() function handles checking for the cookie.

如果用户登录

持久的：该数据库用于跟踪的消息是否已被显示或没有。

Persistence: The database is used to keep track of whether a message has been shown or not.

的服务器端生成code视图的：
当一个页面被请求时，服务器端code检查数据库，看看需要显示的邮件。服务器端code，然后注入JSON格式的消息到视图中，并把一个javascript调用showMessages（）。

Server side generated code in the view: When a page is requested, the server side code checks the database to see what messages need to be displayed. The server side code then injects messages in json format into the view and puts a javascript call to showMessages().

例如，如果我登录到一个看法，我看到标记下面的这样：

For example, if I am logged into a view, I see the following in the markup at SO:

    <script type="text/javascript">
1
2 var msgArray = [{"id":49611,"messageTypeId":8,"text":"Welcome to Super User! Visit your \u003ca href=\"/users/00000?tab=accounts\"\u003eaccounts tab\u003c/a\u003e to associate with our other websites!","userId":00000,"showProfile":false}];
3 $(function() { notify.showMessages(msgArray); });
4
</script>

所以，服务器端code或者注入code称之为showFirstTime的方法，如果用户没有登录或它注入消息和一个登录的用户调用showMessages。

So the server side code either injects code to call the "showFirstTime" method if the user is not logged in or it injects messages and calls "showMessages" for a logged in user.

更多关于客户端code

另一个重要组成部分是通知的JavaScript模块Picflight已经去缩小的（你可以做使用YSlow的Firebug的相同）。该通知模块处理基于服务器端的通知div的填充生成的JavaScript。

The other key component is the "notify" JavaScript module Picflight has de-minified (you can do the same using yslow for firebug). The notify module handles the populating of the notification div based on the server side generated javascript.

没有登录，客户端

如果用户没有登录，然后模块处理事件时，用户X的出通知或通过创建一个cookie进到的常见问题。它还决定是否通过检查cookie来显示在第一时间的消息。

If the user is not logged in, then the module handles events when the user X's out the notification or goes to the FAQ by creating a cookie. It also determines whether to display the first time message by checking for a cookie.

登录，客户端

如果用户登录，通知模块增加了服务器到通知DIV生成的所有消息。它也最有可能使用AJAX来更新数据库，当用户关闭的消息。

If the user is logged in, the notify module adds all the messages generated by the server into the notification div. It also most likely uses ajax to update the database when a user dismisses a message.

这篇关于通知类似于计算器面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！