I googled for twitter like alert but all the articles were in php... Is there an asp.net mvc one out there? Here is the http://briancray.com/2009/05/06/twitter-style-aler开发者_StackOverflow社区t-jquery-cs-php/ sample in php..
Most of it is CSS and jQuery so no ASP.NET MVC specific.
Model:
public class MyModel
{
public string Message { get; set; }
}
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyModel());
}
[HttpPost]
public ActionResult Index(MyModel model)
{
return View(model);
}
}
View:
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<AppName.Models.MyModel>" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<style type="text/css">
#alert
{
overflow: hidden;
z-index: 999;
width: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
height: 0;
color: #000;
font: 20px/40px arial, sans-serif;
opacity: .9;
}
</style>
<% if (!string.IsNullOrEmpty(Model.Message)) { %>
<div id="alert"><%: Model.Message %></div>
<% } %>
<% using (Html.BeginForm()) { %>
<%: Html.EditorForModel() %>
<input type="submit" value="Alert me!" />
<% } %>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var $alert = $('#alert');
if ($alert.length) {
var alerttimer = window.setTimeout(function () {
$alert.trigger('click');
}, 3000);
$alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function () {
window.clearTimeout(alerttimer);
$alert.animate({ height: '0' }, 200);
});
}
});
</script>
</asp:Content>
Of course this is only a sample where markup, style and scripts are mixed in the same page. In a real world application, CSS and scripts should be externalized.
This is server side agnostic. Such a thing's simply made with jQuery and some CSS to make it look good. The HTML itself needed can be outputted by some simple MVC. This seems to be an interesting implementation: http://jnotify.codeplex.com/.
Grz, Kris.
精彩评论