CODEWITHSUNDEEP
jqueryasp.net-mvc
Peter K
Peter K

Reputation: 218

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

I need to display a full view (.cshtml webpage) as a pop-up in ASP.NET MVC 3. Currently the webpage to become a popup is controlled by MVC controller and behaves as another view. The popup webpage will display when a button is clicked from another .cshtml webpage and I would not like to exit from the origin view when the button is clicked. I am thinking about using jquery.show() to make the view as a pop-up, although this is not a requirement. What changes do I need to make?

Upvotes: 4

Views: 7114

Answers (3)

zszep
zszep

Reputation: 4458

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 then be added to myTag.

Upvotes: 5

Chris Carew
Chris Carew

Reputation: 1418

Make an ajax call to the url of the action, 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 little, maybe a modal div to block access to the below page, and .popup will need to be defined to make it appear as a popup.

Upvotes: 2

Simon Edstr&#246;m
Simon Edstr&#246;m

Reputation: 6619

One way to accomplish this is to use http://fancybox.net/ and just load the new webpage as an iframe inside the fancybox. Check at fancybox exemples at the bottom.

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

Upvotes: 0

Related Questions