0

I have a view that is bound to a view model. On that view I have a link that will popup a modal jquery dialog (using a partial view).

What I need is to be able to pass the model to the model popup, update it, then pass it back to the view page.

I have the modal popups loading with an action method in my controller (partial view). But struggling with passing the model to it.

Any suggestions?

Thanks so much in advance.

Script (on view page):

// ZipLocator modal popup
$(function () {
    $('#ZipLocatorDialog').dialog({
        autoOpen: false,
        width: 400,
        resizable: false,
        draggable: false,
        title: 'hi there',
        modal: true,
        show: { effect: 'blind' },
        open: function (event, ui) {
            // Load the ZipLocator action which will return the partial view _ZipLocator
            $(this).load('@Url.Action("ZipLocator", "Shop", New With { .area = "Shop"})');
        },
        buttons: {
            "Close": function () {
                $(this).dialog('close');
            }
        }
    });

    $('#ZipLocatorOpener').click(function () {
        $('#ZipLocatorDialog').dialog('open');
    });
});

Controller Action for partial view:

<HttpGet()>
    <Compress()>
    Public Function ZipLocator(model As ShopModel) As ActionResult

        Return PartialView("~/Areas/Shop/Views/Shared/Partials/Popups/_ZipLocator.vbhtml", model)

    End Function

As I said, the jQuery modal popup is working, I am just having a hard time passing my model to it.

Step One is to pass the model TO the partial view (jQuery modal popup). Step Two is to pass the updated model back to the view after the dialog is dismissed.

2 Answers 2

1

After some documentation reading and further research, there is a data parameter for the jQuery UI dialog.

// ZipLocator modal popup
$(function () {
    $('#ZipLocatorDialog').dialog({
        autoOpen: false,
        width: 400,
        resizable: false,
        draggable: false,
        title: 'hi there',
        modal: true,
        **data: $("#ShopPane").serialize(),**
        show: { effect: 'blind' },
        open: function (event, ui) {
            // Load the ZipLocator action which will return the partial view _ZipLocator
            $(this).load('@Url.Action("ZipLocator", "Shop", New With { .area = "Shop"})');
        },
        buttons: {
            "Close": function () {
                $(this).dialog('close');
            }
        }
    });

    $('#ZipLocatorOpener').click(function () {
        $('#ZipLocatorDialog').dialog('open');
    });
});
0

You will need to use an AJAX POST to send a 'complex' model to your controller action - GET won't work (which is what .Load is using) .

Alternatively, it would be more simple to just modify the parameters of the ZipLocator action method so that it accepts 'simple' objects like strings, and then instantiate the complex object within the action method.

I don't know the equivalent in VB, but in C# you would modify your action like this:

[HttpGet]
public ActionResult(string areaName)
{
   var model = new ShopModel { Area = areaName };
    Return PartialView("~/Areas/Shop/Views/Shared/Partials/Popups/_ZipLocator.vbhtml", model);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.