CODEWITHSUNDEEP
asp.net-mvcasp.net-core-mvc
ahmed assiri
ahmed assiri

Reputation: 29

Pass array of objects to controller by jQuery AJAX, action data is always null in ASP.NET Core 2.2 MVC - it is working with .NET Framework 4.5

I am working in project that I need to use ajax call to save object data from my page witch contain order details. When I use project with .NET framework version 4.5, it is working very well - but when I use ASP.NET Core MVC, it is not working. Any help please?

I did try every thing in similar questions but they did not work. For example I use notation [frombody] - but I still have the same problem.

I have the following controller action:

public ActionResult CreateOrders([FromBody] T_POS_ENT_ORDER_DETIALS_Temp []T_POS_ENT_ORDER_Data)
{
    GRepository<T_POS_ENT_ORDER_DETIALS_Temp> t_pos_ent_orderOpr = new GRepository<T T_POS_ENT_ORDER_DETIALS_Temp>();

    T_POS_ENT_ORDER_Data.order_Date = DateTime.Now;
    t_pos_ent_orderOpr.Add(T_POS_ENT_ORDER_Data);

    return Json(new { msg = "Successfully added " }); 
}

And I have the following ajax call:

    var DATA = [];
    DATA.push({ LocPrice: "12" });
    DATA.push({ LocProductID: "1002" });
    DATA.push({ discount: "0" });
    DATA.push({ posNumber: "1" });
    DATA.push({ productName: "soap" });
    DATA.push({ productQynt: "1" });
    $.ajax({

    url: '/AjaxT_POS_ENT_ORDER/CreateOrders',
    data: JSON.stringify({ 'billArray': DATA }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    type: "POST",
    async: false,

    success: OnSuccess,

  });

I also have this class:

public class T_POS_ENT_ORDER_DETIALS_Temp
{
    public string LocPrice { get; set; }
    public string LocProductID { get; set; }
    public string discount { get; set; }
    public string  posNumber { get; set; }
    public string productName { get; set; }
    public int productQynt { get; set; }
}

There is no error showing only the order details is always null ...

Upvotes: 1

Views: 3993

Answers (3)

Julio Schurt
Julio Schurt

Reputation: 2104

I'm working in .Net Core 3.1 and this works for me:

1. Controller

Try [FromForm] instead [FromBody]

    [HttpPost]
    public ActionResult CreateOrdersPOSTObject([FromForm] List<T_POS_ENT_ORDER_DETIALS_Temp> prm)
    {
        //your logic...
        return Json(new { msg = "Successfully added " });
    }

2. AJAX Call

Neither JSON.stringfy() nor contentType should be used.

            var DATA = [];
            DATA.push({ LocPrice: "12", LocProductID: "1002", discount: "0", posNumber: "1", productName: "soap", productQynt: "1" });
            DATA.push({ LocPrice: "23", LocProductID: "1003", discount: "0", posNumber: "1", productName: "shampoo", productQynt: "1" });
            DATA.push({ LocPrice: "7",LocProductID: "1004" ,discount: "0",posNumber: "2" ,productName: "sponge",productQynt: "2"});

            $.ajax({
                url: '@Url.Content("~/home/CreateOrdersPOSTObject")',
                data: { "prm": DATA },
                type: "POST",
                dataType: "json",
                async: true
            });

Or if you prefer, you can use the shorthand $.post with the same results

            var DATA = [];
            DATA.push({ LocPrice: "12", LocProductID: "1002", discount: "0", posNumber: "1", productName: "soap", productQynt: "1" });
            DATA.push({ LocPrice: "23", LocProductID: "1003", discount: "0", posNumber: "1", productName: "shampoo", productQynt: "1" });
            DATA.push({ LocPrice: "7",LocProductID: "1004" ,discount: "0",posNumber: "2" ,productName: "sponge",productQynt: "2"});

            $.post(
                '@Url.Content("~/home/CreateOrdersPOSTObject")',
                { "prm": DATA },
                function () {
                  alert( "success" );
                })
              .fail(function() {
                alert( "error" );
              });

Upvotes: 4

Rena
Rena

Reputation: 36765

You need to change JSON.stringify({ 'billArray': DATA }) to JSON.stringify(DATA) like below:

1.View:

<script>
    $(document).ready(function () {
        var DATA = [];
        DATA.push({ LocPrice: "12" });
        DATA.push({ LocProductID: "1002" });
        DATA.push({ discount: "0" });
        DATA.push({ posNumber: "1" });
        DATA.push({ productName: "soap" });
        DATA.push({ productQynt: "1" });
        $.ajax({
            url: '/AjaxT_POS_ENT_ORDER/CreateOrders',
            data: JSON.stringify(DATA),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            type: "POST",
            async: false
        });
    });
</script>

2.Controller:

[HttpPost]
public ActionResult CreateOrders([FromBody] T_POS_ENT_ORDER_DETIALS_Temp[] T_POS_ENT_ORDER_Data)
{
    //your logic...
    return Json(new { msg = "Successfully added " });
}

3.Result: enter image description here

By the way, if you want to pass them as one array object instead of six arrays,you need to change your DATA like below:

DATA.push({ LocPrice: "12",LocProductID: "1002" ,discount: "0",posNumber: "1" ,productName: "soap",productQynt: "1"});

Upvotes: 3

Andrei
Andrei

Reputation: 56726

I do not see an array in your data, there is only a single object with some fields. Also billArray does not match T_POS_ENT_ORDER_Data, and model binding is done by name matching.

To fix this, you should adjust your code to only post and receive a single object.:

public ActionResult CreateOrders(T_POS_ENT_ORDER_DETIALS_Temp T_POS_ENT_ORDER_Data)

...

var DATA = {
    LocPrice: "12",
    LocProductID: "1002",
    discount: "0",
    posNumber: "1",
    productName: "soap",
    productQynt: "1"
 });

$.ajax({
    url: '/AjaxT_POS_ENT_ORDER/CreateOrders',
    data: JSON.stringify(DATA),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    type: "POST",
    async: false,
    success: OnSuccess
});

Minor, there is a typo in class name "DETIALS" -> "DETAILS".

Upvotes: 0

Related Questions