Partial view in a dialog

Question

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

It is probably being cached, see this answer: http://stackoverflow.com/q/10011780/573218 — John Koerner, Sep 18 '13 at 17:15
thanks. not using AJAX so that rules it out but seems a bit of a pain to create these attributes and apply it on the controller action. will give it a shot. in relation to the other question... any answers? :) — Ahmed ilyas, Sep 18 '13 at 17:18

score 3 · Accepted Answer · answered Sep 18 '13 at 22:21

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!

Partial view in a dialog

1 Answers1