显示部分视图弹出窗口

Question

我是MVC框架的新手，我需要您的支持才能成功。我有一个局部视图，我需要在加载视图时在弹出窗口中显示局部视图。请为此建议我一个最佳解决方案。提前致谢。

Answer 1

你可以使用jQuery leanModal插件来做到这一点。 例如，你可以把你的部分观点在div标签，如：

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

JS：

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

Answer 2

如果您正在使用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.