twitter like alert jquery in asp.net mvc

Question

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-alert-jquery-cs-php/ sample in php..

Answer 1

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"&gt;&lt;/script&gt;
    <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.

Answer 2

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.