How to display ASP.NET MVC 3 view as a popup

Question

I need to display the full view (.cshtml web page) as an ASP.NET MVC 3 popup. Currently, the web page that becomes popup is controlled by the MVC and behaves like a different view. A popup web page will be displayed when a button is clicked from another .cshtml web page, and I would not want to exit the original field when a button is clicked. I am thinking of using jquery.show () to make the view pop up, although this is not a requirement. What changes do I need to make?

Answer 1

Make a jQuery ajax call like this:

$.ajax({ url: /myController/Popup, type: 'GET', data: id, success: function (result) { $("#myTag").html(result); } }); 

Then in the controller, just return a partial view, something like this:

  public ActionResult Popup(int id) { /* construct the viewmodel */ myViewModel = .... . return PartialView("MyPartialView", myViewModel); } 

This partial view will be added to myTag.

Answer 2

Make an ajax call for the action url, something like ...

 $.ajax({ url: "@Url.Action("youractionname")" ,type: "POST" ,data: data ,success: function(response) { $(document).append("<div class='popup'>" + response + "</div>"); } }); 

Obviously, your html may need to be adjusted a bit, perhaps a modal div, to block access to this page, and .popup will need to be defined so that it appears as a popup.

Answer 3

One way to achieve this is to use http://fancybox.net/ and just load the new webpage as an iframe inside fancybox. Check out the fancybox examples below.

jQuery.show () has nothing to do with creating pop-ups. It is used to hide / show elements in the DOM.