接受从 Javascript Ajax Post 到 C# 方法的列表

Question

I would like to know how to pass a list of valid Targets into the method PassThings() from Javascript to C#. For Example something like this coming from a Javascript $.ajax post.

{
    "OverheadID": "31l",
    "ValuationClassID": 1,
    "InventoryElementID": 1,
    "Target_A_LC": 0,
    "Target_A_QTY": 0,
    "Target_B_LC": null,
    "Target_B_QTY": null,
    "TargetDescription": null
  },
  {
    "OverheadID": "31l",
    "ValuationClassID": 1,
    "InventoryElementID": 2,
    "Target_A_LC": 0,
    "Target_A_QTY": 0,
    "Target_B_LC": null,
    "Target_B_QTY": null,
    "TargetDescription": null
  },
  {
    "OverheadID": "31l",
    "ValuationClassID": 1,
    "InventoryElementID": 3,
    "Target_A_LC": 0,
    "Target_A_QTY": 0,
    "Target_B_LC": null,
    "Target_B_QTY": null,
    "LopTargetDescription": null
  },
  {
    "OverheadID": "31l",
    "ValuationClassID": 2,
    "InventoryElementID": 1,
    "Target_A_LC": 0,
    "Target_A_QTY": 0,
    "Target_B_LC": null,
    "Target_B_QTY": null,
    "TargetDescription": null
  } 

I have been unable to get any kind of list to work from my Javascript $.ajax post to the C# method PassThings() .

I only have been able to hard code the variable OneOfNine which represents a single valid Target in JSON format.

This was to confirm that the Javascript will send a valid syntax and my JsonConvert.DeserializeObject<Target>(OneOfNine) would function.

public class Target{       
    public virtual string OverheadID { get; set; } //not a true Fkey
    public int ValuationClassID { get; set; } //not a true Fkey     
    public int InventoryElementID { get; set; } //not a true Fkey
    public decimal? Target_A_LC { get; set; } //LOP Target A Local Currency
    public decimal? Target_A_QTY { get; set; } //LOP Target A Qty
    public decimal? Target_B_LC { get; set; } //Target B Local Currency
    public decimal? Target_B_QTY { get; set; } //LOP Target B Qty
    public string TargetDescription { get; set; } //optional text reference 
}   

public IActionResult PassThings()
{ 

    var OneOfNine = "{ \"OverheadID\": \"ASASAS\", \"ValuationClassID\": 2, \"InventoryElementID\": 3, \"Target_A_LC\": 0, \"Target_A_QTY\": 0, \"Target_B_LC\": 0, \"Target_B_QTY\": 0, \"TargetDescription\": \"na\" }";
    var deserial = JsonConvert.DeserializeObject<Target>(OneOfNine);

    var resource =
    new Target
    {
        OverheadID = deserial.OverheadID,
        ValuationClassID = deserial.ValuationClassID,
        InventoryElementID = deserial.InventoryElementID,
        Target_A_LC = deserial.Target_A_LC,
        Target_A_QTY = deserial.Target_A_QTY,
        Target_B_LC = deserial.Target_B_LC,
        Target_B_QTY = deserial.Target_B_QTY,
        TargetDescription = deserial.TargetDescription
    };

    return Ok(resource);
} 

I tried setup like this

public IActionResult PassThings([FromBody]List<Target> things)

And my Javascript code in this format.

$.ajax({
    type: 'POST',
    //contentType: 'application/json; charset=utf-8',
    accepts: 'application/json', //mandatory activity
    contentType: 'application/json', //mandatory activity
    url: '/api/APILopTargets/PassThings',
    data: JSON.stringify(things)
}); 

Answer 1

If you would like url to be /api/APILopTargets/PassThings , the ApiController needs to be configured like

[Route("api/[controller]")]
[ApiController]
public class APILopTargetsController : ControllerBase
{
    [HttpPost("PassThings")]//add the attribute
    public IActionResult PassThings([FromBody]List<Target> things)
    {...}
}

JavaScript:

var things = [
      {
       "OverheadID": "31l",
       "ValuationClassID": 1,
       "InventoryElementID": 1,
       "Target_A_LC": 0,
       "Target_A_QTY": 0,
       "Target_B_LC": null,
       "Target_B_QTY": null,
       "TargetDescription": null
      },
      {...},
      ...
    ];

$.ajax({
        contentType: 'application/json; charset=utf-8',
        type: 'POST',
        url: '/api/APILopTargets/PassThings',
        data: JSON.stringify(things),
        success: function (result) {

        }
 });