2013-06-21 205 views
0

我是MVC框架的新手,我需要您的支持才能成功。我有一個局部視圖,我需要在加載視圖時在彈出窗口中顯示局部視圖。請爲此建議我一個最佳解決方案。提前致謝。顯示部分視圖彈出窗口

+2

你需要至少說明,在彈出的一些虛擬的內容...我的意思是獲取代碼,以顯示彈出,然後我們可以添加代碼以顯示其中的部分視圖 –

+2

需要更多信息。你試過了什麼? – NaaN

回答

2

你可以使用jQuery leanModal插件來做到這一點。 例如,你可以把你的部分觀點在div標籤,如:

<div id="modal"> 
    @Html.Partial("_Polling",Model) 
</div> 

JS:

$(function(){ 
    $('#modal').leanModal({ top: 70, closeButton: ".modal_close, .btnClose" }); 
}); 
0

如果您正在使用jQuery UI的對話框,你可以做一些事情像下面。示例代碼將有兩個ActionResult方法。一個用於登錄頁面,另一個用於彈出視圖。

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 

     return View(); 
    } 

    public ActionResult PoupUp() 
    { 

     return View(); 
    } 
} 

索引視圖

<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="jquery/jquery-ui.js"></script> 
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui.css"> 

<script> 
$(function() { 
var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0"  allowfullscreen></iframe>'); 
var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({ 
    autoOpen: false, 
    modal: true, 
    resizable: false, 
    width: "auto", 
    height: "auto", 
    close: function() { 
     iframe.attr("src", ""); 
    }, 
    buttons: { 
     "Close": function() { 
      $(this).dialog("close"); 
     } 
    }    
}); 
$(".dialog").on("click", function (e) { 
    e.preventDefault(); 
    var src = $(this).attr("href"); 
    var title = $(this).attr("data-title"); 
    var width = $(this).attr("data-width"); 
    var height = $(this).attr("data-height"); 
    iframe.attr({ 
     width: +width, 
     height: +height, 
     src: src 
    }); 
    dialog.dialog("option", "title", title).dialog("open"); 
    }); 
    }); 
    </script> 

<a target="_blank" href="PopUp.cshtml" class="dialog" data-title="Page Titl" data-width="550" data-height="410">Click here</a> 

Popup.cshtml

@{ 
    Layout = null; 
} 

Popup window.