Trigger controller actions in MVC when jQueryUi dialog is opened or closed

Question

My model looks like:

class Store
{
    ...
    virtual ICollection<StoreItem> items;
    ...
}

The View for the Store Shows Store properties and a table with items and StoreItem properties. I want that when an Item is clicked, and a jQuery UI dialog is displayed to edit the Item model. For this, I created Views actions for StoreItem, and embedded a partial frame in the Dialog.

Something like:

<div id="modaldlg" title="Edit item?">
    @using (Ajax.BeginForm(
    new AjaxOptions
    {
        HttpMethod = "get",
        InsertionMode = InsertionMode.Replace,
    }))
    {
        @Html.Action("Edit", "StoreItem")
    }
</div>

My problems:

The StoreItem controller action is triggered when the parent page loads. I want it to trigger when the dialog is displayed, because it depends on the item that was clicked.
When I close the jQuery Dialog, I want to trigger a post -> the StoreItem's controller action. How do I do this?

Ron Brogan · Accepted Answer · 2015-07-04 18:35:53Z

1

While I can't be more accurate about a solution because I'm not sure how the parent view is structured, I'm doing something similar in a project of mine. Here's how I did it:

$('.itemContainer').on('click', '#buttonId', function (event) {
        event.preventDefault();
        $("#PlaceholderDiv").dialog({
            autoOpen: true,
            width: 450,
            height: 450,
            resizable: false,
            title: 'Edit Item',
            modal: true,
            open: function () { //Use the open handler to load data into the dialog.
                $('#loadingAnimation').show();
                $(this).load('/Controller/Action/' + itemId, function(){$('#loadingAnimation').hide();});
            },
            close: function () {
                $.ajax({
                     type: "POST", 
                     url: $('#formId').attr('action'), 
                     data: $('#formId').serialize()})
                .done(setTimeout(function() {RefreshPartial()}, (delayInms)));
            },
            buttons: {
                Close: function () {
                    $(this).dialog("close");
                }
            }
        });
        return false;
    });

edited Jul 4, 2015 at 18:35

answered Jul 4, 2015 at 18:28

Ron Brogan

9011 gold badge9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AndreiM Over a year ago

I didn't test exactly this piece of code, I found the solution somewhere else, but it's the same main idea. Mark as answer for future reference.

Collectives™ on Stack Overflow

Trigger controller actions in MVC when jQueryUi dialog is opened or closed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related