jquery - twitter 像 asp.net mvc 中的警报 jquery

Question

我在 google 上搜索了 twitter 之类的警报，但所有文章都是用 php 编写的...有没有 ASP.NET MVC 的文章吗？这是http://briancray.com/2009/05/06/twitter-style-alert-jquery-cs-php/ php 中的示例..

Answer 1

大部分是CSS and jQuery所以没有特定于 ASP.NET MVC。

型号:

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);
    }
}

查看:

<%@ 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>

当然，这只是标记、样式和脚本混合在同一页面中的示例。在现实世界的应用程序中，CSS 和脚本应该被外部化。