How to bind JavaScript array of JSON objects to a List of objects in viewModel. dotnetcore mvc

Question

This is my javascript array of json objects

var pObjIds = [{"Id":"2","Name":"small"},{"Id":"3","Name":"average"}]

I have collected my form fields into a FormData() like this

var form = new FormData($(this)[0]);

I have appended the array of json objects to the FormData like this

form.append("Availability", pObjIds);

I have a ViewModel with a property

public List<Item> Availability { get; set; }

The Item class looks like this

public class Item
{
    [JsonProperty(PropertyName = "Id")]
    public int Id { get; set; }

    [JsonProperty(PropertyName = "Name")]
    public string Name { get; set; }
}

My controller method to receive the form data is

[HttpPost]
public IActionResult AddSupplier(SupplierVM vm, List<Item> list)
{
  if (ModelState.IsValid)
  {
  }
   return View("AddSupplier", vm);
}

My intention is to bind the appended Availability in the formData to the property public List<Item> Availability { get; set; } in the ViewModel.

The above code is what I have tried but its not binding. Always returning count=0 for Availability.

Are my doing something wrong or is there a better way i can do it? I have used FormCollection in controller but still not seen the appended array of json objects but i can log it in the console and see that it is appended successfully.

I am using dotnet core 3.0 mvc.

Thanks in advance.

This is the client side code that calls the AddSupplier

var form = new FormData($(this)[0]);
                form.append("Availability", pObjIds);
                $.ajax({
                    type: 'POST',
                    url: '/supplier/addsupplier/',
                    data: form,
                    processData: false,
                    contentType: false,
                    datatype: 'json',
                    success: function (result) {
                        if (result.status == false) {
                            swal({
                                title: 'Error!',
                                text: result.msg,
                                icon: "error",
                                button: "Ok",
                            });
                        }
                    },
                    error: function () {
                        swal({
                            title: "Unknown Error!",
                            text: "unable to process request!",
                            icon: "error",
                            button: "Ok",
                        });
                    }
                });

can you post a bit more code on how you call AddSupplier on the client side? Also, this SO answer might potentailly be related — timur
– timur, Commented Apr 12, 2020 at 11:10
Thanks for your response. I have just edited the question including the code snippet on how I am calling the AddSupplier on the client side — user10688545
– user10688545, Commented Apr 12, 2020 at 18:27

Fei Han · Accepted Answer · 2020-04-13 06:00:00Z

0

I have a ViewModel with a property

public List<Item> Availability { get; set; }

My intention is to bind the appended Availability in the formData to the property public List<Item> Availability { get; set; } in the ViewModel.

To achieve your requirement, you can try to append values for FormData object like below.

var form = new FormData($(this)[0]);

//form.append("Availability", pObjIds);

$(pObjIds).each(function (index, el) {
    form.append(`Availability[${index}].Id`, el.Id);
    form.append(`Availability[${index}].Name`, el.Name);
});


$.ajax({
    type: 'POST',
    url: '/supplier/addsupplier/',
    data: form,
    processData: false,
    contentType: false,
    datatype: 'json',
    success: function (result) {
        // code logic here
        //...

In controller action AddSupplier

[HttpPost]
public IActionResult AddSupplier(SupplierVM vm)
{
    //code logic here

View model class SupplierVM

public class SupplierVM
{
    public int Id { get; set; }

    //other properties

    public List<Item> Availability { get; set; }
}

Test Result

answered Apr 13, 2020 at 6:00

Fei Han

28k1 gold badge35 silver badges47 bronze badges

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

7 Comments

user10688545 Over a year ago

Thanks for your response. However, the two properties in the JSON object are going together and also the formData already have form elements collected in it so if I loop through to add them json data individually, how are my going to get them dynamically in the controller. I just tried but it is still returning Count=0

Fei Han Over a year ago

if I loop through to add them json data individually, how are my going to get them dynamically in the controller As above screenshot showed, you would find the data would be bound to Availability property of view model class, you can get data through vm.Availability in your controller action.

Fei Han Over a year ago

I just tried but it is still returning Count=0 You can check the actual data you sent on browser network tab.

user10688545 Over a year ago

Please I have checked but didn't see anything or where exactly on the Network Tab should i check? @Fei Han

Fei Han Over a year ago

In Network tab, you can select the request you sent to '/supplier/addsupplier' and check if the actual form data looks like this.

|

Collectives™ on Stack Overflow

How to bind JavaScript array of JSON objects to a List of objects in viewModel. dotnetcore mvc

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related