How to open a partial view by using jquery modal popup in asp.net MVC?

Question

I have a partial view which I want to open by using JQuery Modal Popup. There is no problem while opening the view for a new record but I want to pass data to this partial view for edit. What is your best way to implement this?

Thanks in advance.

Answer 1

I would create a action on a conroller that returns the partial view. Then use Colorbox (via its IFRAME attribute) to load the results of the controller via jQuery.

Answer 2

I have this working well in my current project.

A partial view uses the Inherits control markup just like a full view does to strongly type the Model object to a datatype.

Here is a very simple example of a partial view that is returned via a ajax call and put inside a div. The purpose of this partialview is to display a text message that is passed through to it.

LiteralMessage.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<!-- LiteralMessage.ascx start -->
<%= Model %>
<!-- LiteralMessage.ascx end -->

Controller Method

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ReturnId(int id)
{
    return PartialView("LiteralMessage", string.Format("Hello world! Id: {0}", id));
}

Note that in the partial page view can be any complex object.

I hope this helps!

EDIT: and because this is listed as jQuery as well, use this as your ajax's success event. (This is assuming your dialog has a content DIV with an Id of MyDialogMessage inside a dialog DIV with an Id of MyDialog)

// executes when $.post is complete
function doSuccess(result)
{
    $('div#MyDialog div#MyDialogMessage').html(result);
    //show dialog
    $('div#MyDialog').dialog('open');
}

Answer 3

Hi, I am facing an issue with MVC, Can you please suggest a work-aroun?

I have a partial view that is rendered at ...mysite/Home/Index and there is another button on the page which opens a pop up(modal) that contains this control again... now in this pop I modify the view model of this partial view and on close it is updated, the view model has been updated but the HTML on the page has not, I have tried JQuery and Ajax approaches to avoid page refresh/reload as I have unsaved data on the page but niether updated the HTML(seen on view page source as I need to perform edit operation on the appended HTML).

Thanks in advance

Best Regards

KK