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](https://stackoverflow.com/questions/58502744/send-multiple-parameters-to-asp-net-core-3-mvc-action-using-post-method) might potentailly be related — timur, Apr 12 '20 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, Apr 12 '20 at 18:27

score 0 · Accepted Answer · answered Apr 13 '20 at 06:00

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 '20 at 06:00

Fei Han

26,415
1
30
41

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 – user10688545 Apr 13 '20 at 07:27
`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 Apr 13 '20 at 07:58
`I just tried but it is still returning Count=0` You can check the actual data you sent on browser network tab. – Fei Han Apr 13 '20 at 07:59
Please I have checked but didn't see anything or where exactly on the Network Tab should i check? @Fei Han – user10688545 Apr 13 '20 at 20:56
In Network tab, you can select the request you sent to '/supplier/addsupplier' and check if the actual form data looks like [this](https://i.stack.imgur.com/sr3xM.png). – Fei Han Apr 14 '20 at 09:59
I did as you said, saw the elements in the request sent as you show in the image above but in the controller, it is still returning Count=0. Or is there anything settings i need to make it work? or if I can get another good way to send the data to the controller. – user10688545 Apr 14 '20 at 16:17
Sorry oh. It worked just that It seems the back tick is causing some deadlock in the application. add supplier method in the controller is calling a business logic method that checks if the email already exist but each time it goes in there, it throws a deadlock. – user10688545 Apr 15 '20 at 04:49

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

1 Answers1