Показать частичный Показать в окне всплывающего окна

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

---

Index Просмотр

<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.