CODEWITHSUNDEEP
asp.net-mvcjquery-ui
Ahmed ilyas
Ahmed ilyas

Reputation: 5822

Partial view in a dialog

I have managed to get the JQuery Modal dialog to show and within it, I load a partial view:

var url = '@Url.Action("ShowCarDetail", "Car")?id=' + id;
            $('#dialog-modal').dialog(
                { 
                    title: "Car Detail", 
                    width: 600, 
                    height: 500,
                    draggable: false,
                    close: function (event, ui) {
                        $(this).dialog('close');
                    }

                });

            $('#dialog-modal').load(url, function() 
            {
                $(this).dialog('open'); 
            });

So that works fine. The problem is that when the dialog is closed, and I re-open it, the data is not refreshed. I have a DateTime on that partial view that tells me this so leaving it for a few seconds still shows me the old values.

how can I force the modal dialog to load correctly (without it using the old html that may have been rendered from the previous request)?

also - if the partial view has some actions like a submit or something, will the dialog still remain open or will this refresh the page fully? I want to be able to have that modal dialog similar to an iframe style where any actions that happen within the page in the modal will still be there and be updated without the page having a full refresh and the dialog closing.

thanks

Upvotes: 2

Views: 8042

Answers (1)

mayabelle
mayabelle

Reputation: 10014

Regarding your question:

also - if the partial view has some actions like a submit or something, will the dialog still remain open or will this refresh the page fully? I want to be able to have that modal dialog similar to an iframe style where any actions that happen within the page in the modal will still be there and be updated without the page having a full refresh and the dialog closing.

The page will be refreshed fully with a normal form. To achieve what you describe, use an ajax form which does a post to a controller method and returns a partial view. Then have a success callback for the ajax form, which would replace the contents of a div (within the open dialog) with the response content (which would be the partial view returned from the post).

Simplified example...

View:

<div id="dialog-modal">
    <p>Some optional static content here (within the dialog) 
    that should not change when the form is submitted.</p>
    <div id="dialog-content">
        @using (Html.BeginForm("MyAction", "MyController", null, FormMethod.Post, new { @id="MyForm" }))
        {
            @Html.EditorFor(x => x.Foo)
            <input type="submit" value="OK" />
        }
    </div>
</div>

Controller:

[HttpPost]
public ActionResult MyAction(MyModel model)
{
    // Do some stuff here with the model if you want
    MyNewModel newModel = new MyNewModel();
    return PartialView("_MyPartialView", newModel);
}

JavaScript:

$(function () {
    $('#MyForm').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (xhr) {
                $('#dialog-content').html(xhr);
            }
        });
        return false;
    });
});

Note that this implementation will replace the form, so you could put the form outside the div that gets replaced if needed, or have a different form in the partial view that gets returned if you want different forms submitted within the dialog in series. It's flexible to tweak to your needs. It also will not close the dialog until you explicitly call close on it, or affect any content outside of the replaced div's content. Hope this helps!

Upvotes: 3

Related Questions