MVC3 Submit Ajax Form

问题:

I've read lots of different posts on this topic and I will continue to do so and try various things. There's so much variation in the information though that, with my relative inexperience with MVC, etc, I feel like I'm going round in circles a bit.

Here's the situation. I am displaying a (Razor) view in an MVC3 app that contains records in a jqGrid. Double-clicking a record opens that record in a jQuery UI dialog. The original view contains just the that represents the dialog. The invoked action returns a partial view that becomes the content for the dialogue div.

function editItem(gridID, url) {
    var rowID = getSelectedRowID(gridID);

    if (rowID == null) {
        alert('No row selected.\r\nPlease select a row and try again.');
        return;
    }
    else {
        var grid = getGrid(gridID);

        $("#editDialogue").load(url + "/" + grid.SelectedRowID, function (html) {
            $("#editDialogue")[0].value = html;
            $("#editTabs").tabs();
            $("#editDialogue").dialog("open");
        });
    }
}

That part works, although I have a feeling it could stand a little bit of cleanup. My real issue is later submitting the form contained in that dialog. It's supposed to post back to an action with the same name, which it does. That action is supposed to validate and save or return the same partial view with validation errors. At the moment I'm trying to just return the view without doing anything else. The view is returned alright but the entire page is replaced, instead of just the contents of the dialog.

I've tried various things, including using Ajax.BeginForm and specifying the id of the dialog div as the UpdateTargetId of the AjaxOptions. Nothing has worked so far. Note that the form being submitted is inside the div so it will be replaced too. Not sure if this is part of the problem.

I'm packing up for the day now so I thought I'd post and see what happens overnight before attacking the problem again in the morning.

回答1:

jmcilhinney, You were right to set the AjaxOptions.UpdateTargetId, but you also need to set AjaxOptions.InsertionMode to InsertionMode.Replace.

回答2:

I had the same issue occurring as well. The fix was to make sure that the jquery.unobtrusive-ajax.is file is on the page. That fixed my issue. Just double check to be sure. I was confident I had all the js files, but found out I was missing that one.