ASP .NET MVC + Submit + JSON

Question

I need to send Model data and JSON data in one request. What does it mean:

If i send JSON data with this function:

    $("#SaveOrder").click(function () {
        $.ajax({
            url: '/Manager/AddOrder',
            type: 'POST',
            dataType: 'json',
            data: $.toJSON(ResultArray),
            contentType: 'application/json; charset=utf-8'
        });
    });

i have

public ActionResult AddOrder(SUPNew.Models.Order newOrder, List<OrderList> ResultArray)

SUPNew.Models.Order newOrder = null  
List<OrderList> ResultArray = not null

but if i send request with <input type="submit"> i have

SUPNew.Models.Order newOrder = not null  
List<OrderList> ResultArray = null

How can i send jQuery array (JSON data) and SUPNew.Models.Order in one request?

Content of ResultArray- $.toJSON(ResultArray), where ResultArray is jQuery array like:

var CurrentOrder =
            [{
                'ProviderAn': $("#DdlProviders").val(),
                'ItemAn': $("#DdlItems").val()
            }];

And this is MVC 2

What is the content of ResultArray? And is this MVC 3?

Filip Ekberg
– Filip Ekberg

2011-01-22 11:36:26 +00:00
Commented Jan 22, 2011 at 11:36 — Filip Ekberg
– Filip Ekberg, Commented Jan 22, 2011 at 11:36

Community · Accepted Answer · 2017-05-23 12:18:41Z

5

Don't forget to set the request content type:

$('#SaveOrder').click(function () {
    $.ajax({
        url: '/Manager/AddOrder',
        type: 'POST',
        dataType: 'json',
        data: JSON.stringify({
            newOrder: { orderProp1: 'value1', orderProp2: 'value2' },
            resultArray: [
                { orderListProp1: 'value1', orderListProp2: 'value2' },
                { orderListProp1: 'value3', orderListProp2: 'value4' },
                { orderListProp1: 'value5', orderListProp2: 'value6' }
            ]
        }),
        contentType: 'application/json; charset=utf-8',
        success: function(result) {
            // the request succeeded
        }
    });

    // Don't forget to cancel the default action or if SaveOrder
    // is some link you might get redirected before the 
    // AJAX call ever had time to execute
    return false;
});

Now on the server side you might need a new view model which will aggregate those two objects:

public class MyViewModel
{
    public Order NewOrder { get; set; }
    public List<OrderList> ResultArray { get; set; }
}

and have:

[HttpPost]
public ActionResult AddOrder(MyViewModel model)
{
    ...
}

Also on the server side unless you are using ASP.NET 3.0 which supports JSON by default you need to write a custom handler capable of parsing it.

UPDATE:

You could use the following to serialize the form as JSON:

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            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;
};

and then:

$.ajax({
    url: '/Manager/AddOrder',
    contentType: 'application/json',
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify({
        newOrder: $('#SaveOrder').serializeObject(),
        resultArray: [
            { orderListProp1: 'value1', orderListProp2: 'value2' },
            { orderListProp1: 'value3', orderListProp2: 'value4' },
            { orderListProp1: 'value5', orderListProp2: 'value6' }
        ]
    }),
    contentType: 'application/json; charset=utf-8'
});

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Jan 22, 2011 at 11:47

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

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

6 Comments

Darin Dimitrov Over a year ago

@user568262, in my answer I suggested using a view model (MyViewModel) which will aggregate both NewOrder and ResultArray properties and send them as a single JSON object. You could assign the NewOrder property using form.serialize() and leave the ResultArray property as in my example. Isn't this working for you?

FSou1 Over a year ago

I tried for fake value like { ClientFIO : 'Hello' } and it works for form values and bind into "Order NewOrder". Now just need to find nice plugin for form->json data serialize and it should work. I hope :)

Darin Dimitrov Over a year ago

@user568262, please see if the proposed technique in my update works for you.

FSou1 Over a year ago

Yeah, i found this serialize 5 min ago and was tring to make it work, but ur example didn't give any chance for mistake. It's awsome, u r my Guru :) Everything work perfect. Sorry, didn't watch very careful at ur first post.

FSou1 Over a year ago

Just one little problem. It isn't work RedirectToAction("Index") in AddOrder Action =\

|

Collectives™ on Stack Overflow

ASP .NET MVC + Submit + JSON

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related