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.

在弹出窗口中显示部分视图

2 个答案: