Question 85802 in ASP.NET Question posted in
The official documentation can be found here.

AJAX Call push null data to controller, action recieves null – Asp.net

I am trying to push my data to the action/controller. I tried to push it as int, object, or string but nothing changed. I couldn’t fix it, every time it returns null or 0 as a count. I debug the cshtml side, I can get my data properly. The problem is: Action receives the data as null

ParticipantList.cshtml

    [Authorize]
    [HttpPost]
    public async Task<IActionResult> ParticipantList([FromBody] List<int> productEmployeeId)
    {
        if (productEmployeeId != null)
        {
            await MediatrSend(new SetParticipantListUpdateQuery
            {
                ProductEmployeeId = productEmployeeId
            });
            return Ok();
        }
        return BadRequest("invalid input");
    }

ProductController.cs

@section Scripts{
    <script>
        $(document).ready(function () {
            $('#btnUpdate').click(function () {
                var productEmployeeId = [];
                $('select[name^="employeeDropdown"]').each(function () {
                    var ProductEmployeeId = $(this).val();
                    productEmployeeId.push(ProductEmployeeId);
                });
                $.ajax({
                    url: '@Url.Action("ParticipantList", "Product")',
                    type: 'POST',
                    data: JSON.stringify(productEmployeeId),
                    dataType:'Json',
                    contentType: 'application/json; charset=utf-8',
                    success: function () {
                        console.log('Participants updated successfully.');
                    },
                    error: function () {
                        console.log('Error updating participants.');
                    }
                });

            });
        });
    </script>
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    !! input type !!

    It was pushing null because there was a conflict between the type in the action parameter and the type in the AJAX part and I sent extra null ids from the unselected dropdowns. I filtered out the empty ids and fixed the parsing.

    Here is my edited code

    @section Scripts{
    <script>
        $(document).ready(function () {
            $('#btnUpdate').click(function () {
                console.log("button clicked")
                var productEmployeeId = [];
                $('select[name^="employeeDropdown"]').each(function () {
                    const ProductEmployeeId = $(this).val();
                    const parsed = parseInt(ProductEmployeeId);
                    if (parsed) {
                        productEmployeeId.push(parsed);
                    }
                });
                $.ajax({
                    url: '@Url.Action("ParticipantList", "Product")',
                    type: 'POST',
                    data: JSON.stringify(productEmployeeId),
                    contentType: 'application/json; charset=utf-8',
                    success: function () {
                        console.log('Participants updated successfully.');
                    },
                    error: function () {
                        console.log('Error updating participants.');
                    }
                });

            });
        });
    </script>
}

  2. 0

    Try changning your ajax call to the following

                $.ajax({
                url: '@Url.Action("ParticipantList", "Product")',
                type: 'POST',
                data: JSON.stringify({"productEmployeeId": productEmployeeId}),
                contentType: 'application/json',
                success: function () {
                    console.log('Participants updated successfully.');
                },
                error: function () {
                    console.log('Error updating participants.');
                }
            });

    You need to set your function param in your JSON.stringify.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search