Using ASP.NET MVC to map FormData with an array to a model class

Question

Using ASP.NET MVC to map FormData with an array to a model class

I am currently facing an issue with mapping a list of objects in a FormData to my ASP.NET MVC Model class at the controller. I have successfully sent the FormData over to the server-side, but I am unable to bind any value. Can someone provide guidance on how to correctly map the objects? Below is the code snippet I am currently working with:

Update I am still struggling with this problem and any help would be greatly appreciated! Update2 Just to clarify, I am utilizing Vue.js as my client-side framework

Client-side

  const formData = new FormData();

  formData.append("Product[0].ProductName", "T-Shirt");
  formData.append("Product[0].Options.Quantity", "1");
  formData.append("Product[1].ProductName", "Shoe");
  formData.append("Product[1].Options.Quantity", "2");

Server-side (Controller)

    [HttpPost("verifyCart")]
    public async Task<IActionResult> verifyCart([FromForm] Product[] products)
    {
    }

Server-side (Model)

public class Product
    {
        public string ProductName { get; set; }
        public List<Option> Options { get; set; }        
    }


public class Options
    {
        public int Quantity { get; set; } 
    }

javascript c#asp.net vue.js form-data

Answer 1

Answer №1

By making a simple change in the form data, I was able to get it to work:

formData.append("Product[0].ProductName", "T-Shirt");
formData.append("Product[0].Options.Quantity", "1");
formData.append("Product[1].ProductName", "Shoe");
formData.append("Product[1].Options.Quantity", "2");

All I had to do was change "Product" to its plural form:

formData.append("Products[0].ProductName", "T-Shirt");
formData.append("Products[0].Options.Quantity", "1");
formData.append("Products[1].ProductName", "Shoe");
formData.append("Products[1].Options.Quantity", "2");

This change was necessary because the parameter used in the post action is "products":

[HttpPost]
public IActionResult VerifyCart([FromForm] Product[] products)
{
}

To test this on the client side, I made sure to update my code accordingly:

const formData = new FormData();

    formData.append("Products[0].ProductName", "T-Shirt");
    formData.append("Products[0].Options.Quantity", "1");
    formData.append("Products[1].ProductName", "Shoe");
    formData.append("Products[1].Options.Quantity", "2");

    $.ajax({
            type: "POST",
            url: '/Home/VerifyCart',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
            }
     });

Update

To address the Quantity issue, I decided to modify the client-side code as follows:

const formData = new FormData();

    formData.append("Products[0].ProductName", "T-Shirt");
    formData.append("Products[0].Options[0].Quantity", "1");
    formData.append("Products[1].ProductName", "Shoe");
    formData.append("Products[1].Options[0].Quantity", "2");

    $.ajax({
            type: "POST",
            url: '/Home/VerifyCart',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
            }
     });

Answer 2

By making a simple change in the form data, I was able to get it to work:

formData.append("Product[0].ProductName", "T-Shirt");
formData.append("Product[0].Options.Quantity", "1");
formData.append("Product[1].ProductName", "Shoe");
formData.append("Product[1].Options.Quantity", "2");

All I had to do was change "Product" to its plural form:

formData.append("Products[0].ProductName", "T-Shirt");
formData.append("Products[0].Options.Quantity", "1");
formData.append("Products[1].ProductName", "Shoe");
formData.append("Products[1].Options.Quantity", "2");

This change was necessary because the parameter used in the post action is "products":

[HttpPost]
public IActionResult VerifyCart([FromForm] Product[] products)
{
}

To test this on the client side, I made sure to update my code accordingly:

const formData = new FormData();

    formData.append("Products[0].ProductName", "T-Shirt");
    formData.append("Products[0].Options.Quantity", "1");
    formData.append("Products[1].ProductName", "Shoe");
    formData.append("Products[1].Options.Quantity", "2");

    $.ajax({
            type: "POST",
            url: '/Home/VerifyCart',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
            }
     });

Update

To address the Quantity issue, I decided to modify the client-side code as follows:

const formData = new FormData();

    formData.append("Products[0].ProductName", "T-Shirt");
    formData.append("Products[0].Options[0].Quantity", "1");
    formData.append("Products[1].ProductName", "Shoe");
    formData.append("Products[1].Options[0].Quantity", "2");

    $.ajax({
            type: "POST",
            url: '/Home/VerifyCart',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
            }
     });

Using ASP.NET MVC to map FormData with an array to a model class

Answer №1

Similar questions

Iterating through a legitimate JSON object and storing each data value in a separate variable

The Challenge() function consistently leads users to the Login Page

Module not found in Node.js Express JS

We were unable to find an existing Kibana index, therefore we are unable to establish a connection

Exploring the integration of datatables.net-vue3 with Vue.js 3 in Visual Studio: A step-by-step guide

Transitioning images in JQuery by using a rollover effect

Working with Vue's v-for directive to bind computed properties

Ways to dynamically emphasize text within ngFor loop

Toggle visibility on the child DOM element of each item in the v-for loop

What is the process for converting a multidimensional array from PHP into JavaScript?

Using Node JS, how to pass a variable length array to a function?

What is preferable: defining JSON schema properties or utilizing oneOf conditions within an array of objects

Why does my POST request result in [object Object] being returned?

Default Selection Issue with Radio Buttons in AngularJS

Identify when objects in kineticJS are dropped

What is the reason for the absence of Duplex Stream in the Web Streams API?

What could be causing the beforeRouteUpdate function to not successfully update the route

Utilize AngularJs and JavaScript to upload information to a JSON file

Managing multiple updates or inserts in a MSSQL database using Sequelize

Our connection to [ws] was unexpectedly interrupted as the page was in the process of loading, all while utilizing Vue CLI within Firefox and a proxy