2010-06-22 5 views

Répondre

1

La plupart est CSS and jQuery donc pas ASP.NET MVC spécifique.

Modèle:

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

Vue:

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

Bien sûr, cela est seulement un échantillon où le balisage, le style et les scripts sont mélangés dans la même page . Dans une application du monde réel, CSS et les scripts doivent être externalisés.

+0

veuillez fournir un exemple de code de travail ... –

+0

@MuraliVijay CSK, échantillon fourni. –

+0

J'aime votre exemple. Pensez-vous qu'il est possible de le faire sans publication? Merci! – Mathieu

0

Ceci est agnostique côté serveur. Une telle chose est simplement faite avec jQuery et un peu de CSS pour le faire paraître bien. Le HTML lui-même nécessaire peut être produit par un simple MVC. Cela semble être une implémentation intéressante: http://jnotify.codeplex.com/.

Grz, Kris.