How to post multiple parameters to the server?

cowabunga

The parameters include a javascript object(someObject), an array of string(someArray) and a boolean(booleanValue):

$('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "../Home/GetSomeData",
            "dataType":"JSON",
            "type": "POST",
            "data": function (d) {
                return $.extend({}, d, {
                    "objectParameter": someObject,
                    "booleanParameter": booleanValue,
                    "arrayParmeter": someArray,
                });
            }

        },

I get the 500 internal server error, which says :

The parameters dictionary contains a null entry for parameter 'booleanParameter' of non-nullable type 'System.Boolean' for method 'System.Web.Mvc.JsonResult GetSomeData(typeSomething, Boolean, System.String[])' in 'FsWeb.Controllers.HomeController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.

Apparently something is wrong with the way I'm posting ajax data to the server. So, my question is how to post javascript objects and array in ajax call?

kthorngren

I think you are setting the ajax data option to a function not an object. I would recommend simply setting the data to the object, like this:

        "ajax": {
            "url": "../Home/GetSomeData",
            "dataType":"JSON",
            "type": "POST",
            "data": {
                    "objectParameter": someObject,
                    "booleanParameter": booleanValue,
                    "arrayParmeter": someArray,
                    }
 
        },

Kevin

colin

Wondering if you might also need to JSON.stringify() the object - all the examples are for single parameters.

cowabunga

@kthorngren , I tried the way you suggested but still getting the same error.

@colin , I tried using JSON.stringify() and still not working:

$('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/Home/GetSomeData",
            "type": "POST",
            "data": function (d) {
                JSON.stringify({
                    'objectParameter': someObject, 'booleanParameter': booleanValue, 'arrayParmeter': someArray
                });
            }
        }

Maybe I'm using stringify in a wrong way.

cowabunga

interestingly, this is working fine:

 $.ajax({
        url: "../Home/GetTickets",
        contentType: "application/json",
        type: "POST",
        data:
             JSON.stringify({
                 'objectParameter': someObject, 'booleanParameter': booleanValue, 'arrayParmeter': someArray
             }),

        success: function (json) {
            BindDataToDataTable(json['Item1']); //This function renders datatable
        },
        error: function (e) {
        }

    });


function BindDataToDataTable(jsonData) {
    $('#example').DataTable({
        "data": jsonData,
         ...
         ...

allan

I suspect, but am not certain without more information, that the issue is related to how MVC .NET is attempting to serialise the nested HTTP parameters into whatever model you have. I see you've got an answer now, but I suspect that if you looked at the submitted data before (in the browser's network panel) it would have shown HTTP parameters for the data, which .NET wasn't managing to map to the model.

You almost certainly want to use:

        data: function ( d ) {
             return JSON.stringify( $.extend( d, {
                 'objectParameter': someObject, 'booleanParameter': booleanValue, 'arrayParmeter': someArray
             }) ),

I'm not actually sure what would happen if you just used a string for ajax.data along with server-side processing!

Allan

cowabunga

Thanks @allan , worked like a charm . You were right, I looked into the HTTP parameters in the network panel, earlier it was posting the data in wrong format.