AJAX POST Data to MVC Controller in ASP.NET Core Always Null When Passing An Object Array Over a Certain Length

Question

I have a javascript function that is creating a model that includes an array of objects and sending that data to my MVC controller with an AJAX POST request. For some reason, it seems that there is a limit on the size of that array that can be passed to the controller though, which though experimentation, seems to be between 450 and 500 objects in my case. Once it's larger than that threshold, the controller will just receive a null value. Is there some configuration or workaround that can be done to remove or work around this limitation?

I've already tried several web.config based "solutions" that a lot of people have proposed on similar SO questions to no avail (I think those may be applicable only for .Net Framework's version of ASP.NET, not .NET Core).

Javascript:

var i = 0;
$("#SupplierNumber option").each(function () {
    var supplierNumber = {};
    supplierNumber.Value = $(this).val();
    supplierNumber.text = $(this).val();
    supplierNumbers.push(supplierNumber);
    //Below limits max size for testing
    i = i + 1;
    if (i > 450) {
        return false;
    }
});

//Other non-array values gathered here
var model = {
    "SupplierNumbers": supplierNumbers,
    //... other non-array values added to model
}

$.ajax({
    type: "POST",
    url: "/Administration/TestPost",
    data: model,
    dataType: "json",
    success: function (data) {
        alert("Finished");
    }
});

Controller:

[HttpPost]
public async Task<IActionResult> TestPost(TestViewModel model)
{
    //model is null here when array is > 500 in size 
    return Json(new { success = true });
}

Is my answer helpful?

Yiyi You
– Yiyi You

2020-10-13 03:06:40 +00:00
Commented Oct 13, 2020 at 3:06 — Yiyi You
– Yiyi You, Commented Oct 13, 2020 at 3:06

lennoxGER · Accepted Answer · 2021-08-12 08:19:47Z

3

Try this before you use JSON.stringify!

I had exactly the same problem. All I needed to do was the following:

In my Startup.cs I added the following lines in ConfigureServices:

services.Configure<FormOptions>(options =>
        {
            options.ValueCountLimit = int.MaxValue;
            options.ValueLengthLimit = int.MaxValue;
        });

answered Aug 12, 2021 at 8:19

lennoxGER

7347 silver badges9 bronze badges

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

Comments

Yiyi You · Accepted Answer · 2020-10-09 03:20:53Z

Here is two solutions:

First demo,use json type data,we usually use this way to pass array in ajax(pass json type data,need to use contentType: 'application/json' in ajax and use [FromBody] in action):

IndexViewModel:

public class IndexViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

Controller:

        [HttpGet]
        public IActionResult TestAjax() {
            return View();
        }
        [HttpPost]
        public IActionResult TestAjaxWithJsonData([FromBody]List<IndexViewModel> l) {
            return Ok();
        }

View:

 <button onclick="postdata1()">submit(jsondata)</button>
    
    
@section scripts{ 
    <script type="text/javascript">
        function postdata1() {
            var a = [];
            for (var i = 0; i < 500; i++) {
                var indexViewModel = {};
                indexViewModel.Id = i;
                indexViewModel.Name = "name" + i;
                a.push(indexViewModel);
            }
            var data = JSON.stringify(a);
            $.ajax({
                type: "POST",
                url: 'TestAjaxWithJsonData',
                data: data,
                contentType: 'application/json'
            }).done(function (data) {
            });
        }
    </script>
}

result:

Second demo,use FormData:

Controller:

[HttpPost]
    public IActionResult TestAjaxWithFormdata(List<IndexViewModel> l)
    {
        return Ok();
    }

View：

<button onclick="postdata2()">submit(formdata)</button>
    
    
@section scripts{ 
    <script type="text/javascript">
        
        function postdata2() {
            var formdata = new FormData();
            for (var i = 0; i < 500; i++) {
                formdata.append("l[" + i + "].Id", i);
                formdata.append("l[" + i + "].Name", "name" + i);
            }
        $.ajax({
                type: "POST",
                url: 'TestAjaxWithFormdata',
                cache: false,
                contentType: false,
                processData: false,
                data: formdata,
             }).done(function (data) {
        });
        }
        
    </script>
}

result:

Sadullah DOĞAN · Accepted Answer · 2020-10-12 14:08:04Z

1

I dont know what is the exact problem but you can try this solution. Try to pass data as a sting into action after that Deserialize tht string to object.

var model = {
"SupplierNumbers": supplierNumbers,
//... other non-array values added to model
}

$.ajax({
type: "POST",
url: "/Administration/TestPost",
data: {"data":JSON.stringify(model)},
dataType: "json",
success: function (data) {
    alert("Finished");
}
});

on controller side you can Deserilize this string to model.

[HttpPost]
public async Task<IActionResult> TestPost(string data)
{
 TestViewModel model=DeserializeObject<TestViewModel>(data);
return Json(new { success = true });
}

edited Oct 12, 2020 at 14:08

answered Oct 8, 2020 at 20:12

Sadullah DOĞAN

3352 silver badges10 bronze badges

1 Comment

110SidedHexagon Over a year ago

This still results in a null value being received by the controller, but if I use JSON.stringify on the list items that make up the model it works.

AB Venkatesh · Accepted Answer · 2021-04-15 07:15:28Z

1

We need to set the value count limit and length.

Please Add below code in startup.cs --- It is working for me

        services.AddMvc(options =>
        {
            options.MaxModelBindingCollectionSize = 100000;
        });

        services.Configure<FormOptions>(options =>
        {
            options.ValueCountLimit = int.MaxValue;
            options.ValueLengthLimit = int.MaxValue;
            options.MultipartHeadersLengthLimit = int.MaxValue;
        });

answered Apr 15, 2021 at 7:15

AB Venkatesh

112 bronze badges

Comments

110SidedHexagon · Accepted Answer · 2020-10-16 14:59:58Z

0

After some more searching, I was able to figure out that this is a configuration issue within ASP.NET Core. By default, the max number of values in a complex model that can be bound is 1024. Adding the option below in the ConfigureServices method of the Startup class will allow you to increase this limit to whatever you need (MSDN).

services.AddMvc(options =>
{
   options.MaxModelBindingCollectionSize = 100000;
})

Also, something else that I found that people might find useful when facing this problem, but with a form submit action, is the below option that goes in the same method mentioned above (source).

services.Configure<FormOptions>(options => options.ValueCountLimit = 100000);

answered Oct 16, 2020 at 14:59

110SidedHexagon

5732 gold badges14 silver badges38 bronze badges

Collectives™ on Stack Overflow

AJAX POST Data to MVC Controller in ASP.NET Core Always Null When Passing An Object Array Over a Certain Length

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related