Pass model object back to controller from partial on ui dialog

Question

I have an edit details form that is displayed as a partial on a jquery ui dialog. I want to commit amendments back to the database, but I have run in to trouble using the standard submit button used on MVC3 edit forms.. I want to commit the change, but remain on the dialog.

I have put button on the page that is calling a bit of jquery (below). What I need to know is how I can serialize my model (called Models.User) and pass that back to the controller.

As you can see I have the majority of the jquery in place - all I need to do is serialize and data and send it. I am guessing I will need to use Json, but im not 100% on how to bring that in.

Any help appreciated..

<script type="text/javascript">
    $(document).ready(function(e) {
        $(function() {
            $("#quickButton1").live("click", function (e) {
                e.preventDefault();
                $.ajax({
                    url: "/Users/QuickEditSave/",
                    data: ({}),                  
                    success: function (data) {
                        uiDialog.close();
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        alert(xhr.responseText);
                    }
                });
            });
        });
    });    
</script>

please post complete code for your view. – Behnam Esmaili Dec 14 '12 at 15:47 — Behnam Esmaili, Dec 14 '12 at 15:47

score 1 · Answer 1 · edited May 23 '17 at 12:29

you must serialize form input elements into JSON object then send it via $.Ajax.

use this plugin to serialize you'r form data (this part is from an SO question):

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(function() {
    $('form').submit(function() {
        $('#result').text(JSON.stringify($('form').serializeObject()));
        return false;
    });
});

and then send it with :

   $.ajax({
         url: "/Users/QuickEditSave/",
         data: JSON.stringify($('form').serializeObject()),                  
         success: function (data) {
          uiDialog.close();
         },
         error: function(xhr, ajaxOptions, thrownError) {
            alert(xhr.responseText);
         }
    });

score 0 · Answer 2 · answered Dec 14 '12 at 15:52

0

Resolved:

var formData = $("form").serialize();

data: formData,
type: "POST",

then in my controller expect and object:

public string QuickEditSave(newUser newuser)

answered Dec 14 '12 at 15:52

bruceiow

325
1
6
17

If this is the solution, you should mark it as such. http://stackoverflow.com/help/accepted-answer – Killnine Dec 20 '13 at 15:47

Pass model object back to controller from partial on ui dialog

2 Answers2