MVC3剃刀和模態彈出

Question

我需要得到一個模態彈出窗口，顯示一個將數據保存到數據庫的窗體。 是否有很好的例子呢？ Ajax更靈活還是使用jQuery對話框？

Answer 1

我已經使用了JQuery UI Dialog plugin並使用jQuery通過ajax加載模態對話框，我對此非常滿意。

我已經砍了我的代碼給你一些有用的東西，所以歉意任何語法錯誤，但我用這個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' 
      }); 
     } 
    ); 
}); 

結合調用一個Ajax「得到」到鏈接的「點擊」事件。 ajax get請求從MVC項目中的相應動作返回一個局部視圖，然後顯示在模式對話框中。

這裏的控制器可以是什麼樣子

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

的對話框中的視圖就僅僅是一個正常的局部視圖一個粗略的例子。

我用下面的CSS，這「灰色出」背後的模態對話框

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

的頁面，您可能需要淤泥與周圍的CSS的#ModalDialog得到它看起來美觀，

Answer 2

這是簡單的，但是這不是一個插件：基於 http://deseloper.org/read/2009/10/jquery-simple-modal-window/

jQuery插件模式： http://www.ericmmartin.com/projects/simplemodal/

希望這有助於。

Answer 3

你可以使用jquery對話框。 還有你可以使用的Jquery工具。

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

它有一個非常小的足跡爲好。