Open the view in popup in asp.net MVC action click

Question

I am working on small POC of asp.net mvc scaffolding. I have one action link which calls another controller's action method which in turn opens up the view of that action method. But i want that view to be open in popup not in new tab. Following is the code of action link

@Html.ActionLink("View Clients", "Details", "Client", new { id=item.Id})

In above code 'View Clients' is the link name which calls 'Details' method of 'Client controller' which passes ID as parameter as well. Following is the Client controller:

 public class ClientController : Controller
{
  public ActionResult Details(long id = 0)
    {
        Client client = db.Clients.Find(id);
        if (client == null)
        {
            return HttpNotFound();
        }
        return View(client);
    }
  }

Above controller method returns the details view of Client controller.

So what i want to do here is to open that particular view in the popup. Does anybody have solution on this ?

You need to use jquery and ajax to return your partial view to the same page and add it to the DOM. — , Oct 18 '15 at 11:55
Possible duplicate of [Open a view as a pop up](http://stackoverflow.com/questions/8064875/open-a-view-as-a-pop-up) — Gabriel Sadaka, Oct 18 '15 at 11:56

score 2 · Answer 1 · answered Oct 18 '15 at 12:18

2

Use an ajax call to return the partial view and add it to the DOM.

var url = '@Url.Action("Details", "Client")';

$('selector').load(url, { id: 1 });

answered Oct 18 '15 at 12:18

Anthony Sherratt

479
4
14

You can enhance your answer and add an id/class to that action link and use that as selector, this will make the answer more useful:) – Reza Aghaei Oct 18 '15 at 12:43
It's not clear on how you are managing the ID's on the main page as there was no HTML markup. The 'selector' is the element you want to fill with the partial view data. Pass the id of the `Client` (via a click event for example) you want to load into that selector. – Anthony Sherratt Oct 18 '15 at 12:56

score 2 · Answer 2 · edited May 23 '17 at 12:00

Add custom attribute to the link, use its URL to load the PartialView from controller in the modal form.

View:

@Html.ActionLink("View Clients", "Details", "Client", new { id = item.Id }, new { data_modal = "" })

<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

Javascript:

$(function () {
    $.ajaxSetup({ cache: false });
    $("a[data-modal]").on("click", function (e) {        
        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
                keyboard: true
            }, 'show');
        });
        return false;
    });
});

Controller:

public class ClientController : Controller
{
  public ActionResult Details(long id = 0)
    {
        Client client = db.Clients.Find(id);
        if (client == null)
        {
            return HttpNotFound();
        }
        return PartialView(client);
    }
}

Reference: http://www.advancesharp.com/blog/1125/search-sort-paging-insert-update-and-delete-with-asp-net-mvc-and-bootstrap-modal-popup-part-1 http://www.advancesharp.com/blog/1126/search-sort-paging-insert-update-and-delete-with-asp-net-mvc-and-bootstrap-modal-popup-part-2

Note: ASP MVC will automatically convert underscores in html attribute properties to dashes. https://stackoverflow.com/a/4515095/3387187

Open the view in popup in asp.net MVC action click

2 Answers2