MVC 4 Ajax form post action always posts with values posted with first atttempt

Question

I am trying to create simple CRUD application. I have a partial view that populates the rows. In each row there is Edit link on click of which I am opening a jquery dialog. In this dialog I load another partial view for editing that corresponding row. On ok button I post the form(which is an ajax form).

The controller then return another partial view that is suppose to be replace the original list (the list partial view) because I am providing updateTargetId (this is the div in which list is rendered.

Here I am facing two problems,

1. This works for the first time ( i.e. first time in the session) I post the form. When I open another record for edit, the form is loaded correctly but when I post it, the form always has the values of the record that are posted in the first attempt.
2. The list is not updating after even after post is successful. I can see the post response in fiddler. The list is refreshed only after I refresh the browser.

I have tried clearing modelState but doesn't work. I have tried debugging the jquery code and I found that when I do form.serialize has old values so the controller always get those values.

I think somewhere it is caching the form. Then I turned off caching by adding

$.ajaxSetup({ cache: 'false' });

in document.ready. That also doesn't work.

Here is the jQuery code

this.bindOpenDialog = function () {
    $(".openDialog").click(function (e) {
        e.preventDefault();
        var height = $(this).attr("data-dialog-height");
        var width = $(this).attr("data-dialog-width");
        var data_postUrl = $(this).attr("data-postUrl");
        var data_returnUrl = $(this).attr("data-returnUrl");
        var data_updateTarget = $(this).attr("data-updateTarget");
        var data_form_id = $(this).attr("data-form-id");
        var callBack = $(this).attr("callBack");
        if (data_postUrl == '') {
            data_postUrl = this.href;
        }
        var div = $("<div></div>");
        div.addClass("ui-dialog")
        div.attr("id", $(this).attr("data-dialog-id"))
        var dialog = div.dialog({
            title: $(this).attr("data-dialog-title"),
            close: function () { $(this).remove() },
            height: height,
            width: width,
            modal: true,
            buttons: {
                'Save': function () {
                    var dialog = $(this);
                    var form = null;
                    if (data_form_id == '' || data_form_id == undefined) {
                        form = dialog.find('form').first();
                    }
                    else {
                        form = $("#" + data_form_id).first();
                    }

                    var req = $.post(data_postUrl, form.serialize(),
                        function (responseText, textStatus) {
                        }, "html");
                    req.success(function (data) {
                        if (callBack == '' || callBack == undefined) {
                            dialog.dialog('destroy');
                        }
                        else {
                            var cb = eval(callBack + "()");
                            dialog.dialog('destroy');
                        }
                    });
                    req.success(function (data) {
                        if (callBack == '' || callBack == undefined) {
                            thisDialog.dialog('destroy');
                        }
                        else {
                            var cb = eval(callBack + "()");
                            thisDialog.dialog('destroy');
                        }
                        //remove the form from the DOM.
                        //If I do not do this, it always posts the
                        // form which was posted for the first time.
                        $("#" + data_form_id).remove();
                    });
                    req.error(function (e) {
                        alert('error ' + e.toString())
                    });
                },
                'Cancel': function () {
                    var dialog = $(this);
                    dialog.dialog('destroy');
                }
            }

        });
        dialog.load(this.href);
    }
);

has any body faced this issue already?

One more observation of mine is that jQuery isn't updating the target. I also set the OnSuccess event on Ajax form which does not fire.

---

One more observation of mine is that jQuery isn't updating the target. I also set the OnSuccess event on Ajax form which does not fire.

Answer 1

I am not sure if it is the best way of doing it, but when I remove form from the DOM after I destroy the dialog in javascript. I think the jquery is not kiling the form instance

Now my javascript looks like

req.success(
            function (data) {
                if (callBack == '' || callBack == undefined) {
                    thisDialog.dialog('destroy');
                }
                else {
                    var cb = eval(callBack + "()");
                    thisDialog.dialog('destroy');
                }
                //remove the form from the DOM.
                //If I do not do this, it always posts the form which was posted for the first time.
                $("#" + data_form_id).remove();
            }
        );

Can anybody advice if there is any better approach?

Regards, Mahesh

Answer 2

Mark method which returns partial views (for edit and for list) for editing with attribute and rebuild solution:

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]

Answer 3

Alright, One learning I would like to share that, I am using Ajax.BeginForm. I am opening this form in the jquery dialog. This dialog has OK and Cancel buttons. On Ok click I am posting my ajax form. that's the reason it doesn't Update the div. I I post this form using Submit button, it works.

So the learning is, If you are using Ajax.Begin form then you have to post the form using submit button in order to update the target and run the script on OnComplete event.

If you submit the form using any other button then you can not take this advantage. In this case you need to do it by javascript.

Hope this helps somebody.

(I am marking this as answer to pull the attention to this post.)