MVC3 Razor et fenêtre contextuelle Modal

Question

J'ai besoin d'un popup Modal qui affiche un formulaire qui sauvegardera les données dans la base de données. est-il un bon exemple de le faire? Ajax est-il plus flexible ou utilise-t-il le dialogue jquery?

Answer 1

J'ai utilisé le JQuery UI Dialog plugin et j'utilise JQuery pour charger la boîte de dialogue modale via ajax, et j'en suis très content.

J'ai dû pirater mon code pour vous donner quelque chose d'utile, donc mes excuses pour les erreurs de syntaxe, mais j'utilise cette jquery,

$('#MyAtag').click(function() { 
    // Add a container for the modal dialog, or get the existing one 
    var dialog = ($('#ModalDialog').length > 0) ? $('#ModalDialog') : $('<div id="ModalDialog" style="display:hidden"></div>').appendTo('body'); 
    // load the data via ajax 
    $.get('mycontroller/myaction', {}, 
     function (responseText, textStatus, XMLHttpRequest) { 
      dialog.html(responseText); 
      dialog.dialog({ 
       bgiframe: true, 
       modal: true, 
       width: 940, 
       title: 'My Title' 
      }); 
     } 
    ); 
}); 

qui se fixe un appel à un ajax « get » pour l'événement 'clic' d'un lien. La requête ajax get renvoie une vue partielle de l'action correspondante dans mon projet MVC, qui apparaît ensuite dans la boîte de dialogue modale.

Voici un exemple approximative de ce que le contrôleur pourrait ressembler à

public ActionResult MyAction() 
    { 
     // Do Some stuff 
     //... 

     // If the request is an ajax one, return the partial view 
     if (Request.IsAjaxRequest()) 
      return PartialView("PartialViewName"); 

     // Else return the normal view 
     return View(); 
    } 

La vue de la boîte de dialogue serait juste une vue partielle normale.

J'utilise la Css suivante, qui « en gris » la page derrière la boîte de dialogue modale

.ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #AAA url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; 
    opacity: .8; 
    filter: Alpha(Opacity=30); 
} 

Vous pourriez avoir besoin de muck autour de la #ModalDialog pour css pour l'obtenir en regardant à droite,

Answer 2

C'est simple, mais ce n'est pas un plugin: http://deseloper.org/read/2009/10/jquery-simple-modal-window/

plug-in Jquery base modale: http://www.ericmmartin.com/projects/simplemodal/

Hope this helps.

Answer 3

Vous pouvez utiliser la boîte de dialogue jquery. il y a aussi des outils Jquery que vous pouvez utiliser.

http://flowplayer.org/tools/demos/overlay/modal-dialog.html

Il a une très faible encombrement ainsi.