Controller receives null from Ajax in ASP.NET Core 6.0 MVC

Question

I am writing a program that captures a list of variable data, which I am trying to pass through jQuery to an ASP.NET Core 6.0 MVC controller.

This is the data model:

namespace RTS_RecruiterSystem.Models.ViewModels
{
    public class ScreeningViewModel
    {
        public int CandidateId { get; set; }
        public string TypeRequirement { get; set; } = string.Empty;
        public int ScreeningId { get; set; }
        public bool SelectedOption { get; set; }
    }
}

This is the part of the view where the form is located

<form id="frmScreeningProcess" method="post" enctype="multipart/form-data" autocomplete="off">
    <div class="mt-4">
        <!-- Agregar una barra de botones Guardar/Limpiar/Regresar para ventana Modal -->
        <div class="row">
            <div class="col-md-3 offset-md-9 d-flex justify-content-end">
                @*<button type="submit" name="currentTab" value="screening-tab-pane" id="btnSaveScreening" class="btn btn-primary btn-md" title="Save Form"><i class="fa-solid fa-floppy-disk pe-2"></i> Save Result</button>*@
                <button type="submit" name="currentTab" value="screening-tab" id="btnSaveScreening" class="btn btn-primary btn-md" title="Save Form"><i class="fa-solid fa-floppy-disk pe-2"></i> Save Result</button>
            </div>
        </div>
        <hr />
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <h4><i class="far fa-circle-check pe-2"></i> Must to have</h4>
                    <div class="col-md-12">
                        <hr class="blue-separator" />
                        <div class="table table-responsive">
                            <div class="scroll-container" style="max-height: 400px; overflow-y: auto; border: 1px solid #ccc;">
                                <table id="MustToHaveTable" class="table table-striped table-hover table-responsive">
                                    <thead class="table-blue-sm">
                                        <tr>
                                            <th>@Html.DisplayNameFor(m => m.ListCandidateScrViewModel[0].ScreeningId)</th>
                                            <th>@Html.DisplayNameFor(m => m.ListCandidateScrViewModel[0].ScreeningName)</th>
                                            <th>@Html.DisplayNameFor(m => m.ListCandidateScrViewModel[0].ScreeningValue)</th>
                                        </tr>
                                    </thead>
                                    <tbody class="dataTableBody-md">
                                    @{
                                        for (int i = 0; i < Model.ListCandidateScrViewModel.Count; i++)
                                        {
                                            idYes = "ListCandidateScrViewModel_" + i + "__SelectedOption";
                                            idNo = "ListCandidateScrViewModel_" + i + "__SelectedOptionNo";
                                    
                                            if (Model.ListCandidateScrViewModel[i].TypeRequirement == "M")
                                            {
                                                <tr id="ListCandidateScreeningViewModel_@i">
                                                    @Html.HiddenFor(m => m.ListCandidateScrViewModel[i].CandidateId, new { @class = "form-control" })
                                                    @Html.HiddenFor(m => m.ListCandidateScrViewModel[i].ScreeningId, new { @class = "form-control" })
                                                    @Html.HiddenFor(m => m.ListCandidateScrViewModel[i].ScreeningName, new { @class = "form-control" })
                                                    @Html.HiddenFor(m => m.ListCandidateScrViewModel[i].TypeRequirement, new { @class = "form-control" })
                                                    <td class="text-center" style="width:10%">@Html.DisplayFor(m => m.ListCandidateScrViewModel[i].ScreeningId)</td>
                                                    <td style="width:65%">@Html.DisplayFor(m => m.ListCandidateScrViewModel[i].ScreeningName)</td>
                                                    <td class="text-center" style="width:25%">
                                                        <div class="col-md-12">
                                                            <div class="form-check form-check-inline">
                                                                <input type="radio" class="form-check-input" asp-for="ListCandidateScrViewModel[i].SelectedOption" value="Yes">
                                                                <label class="form-check-label" for="@idYes">Yes</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input type="radio" class="form-check-input" asp-for="ListCandidateScrViewModel[i].SelectedOption" id="@idNo" value="No">
                                                                <label class="form-check-label" for="@idNo">No</label>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            }
                                        }
                                    }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

This is the controller:

[HttpPost]
public JsonResult SaveScreening(List<ScreeningViewModel> lstScreeningViewModel)
{
    // Acciones
    return Json(new { success = true, message = "Cambios guardados correctamente" });
}

In the script I have

$("#frmScreeningProcess").on("submit", function (e) {
    var lstScreeningViewModel = [];

    // Obtener el número de filas en la tabla
    var totalRows = $('#MustToHaveTable tr').length - 1;

    for (i = 0; i < totalRows; i++) {
        var candidateId = parseInt($("#ListCandidateScrViewModel_" + i + "__CandidateId").val());
        var typeRequirement = $("#ListCandidateScrViewModel_" + i + "__TypeRequirement").val();
        var screeningId = parseInt($("#ListCandidateScrViewModel_" + i + "__ScreeningId").val());
        var selectedOption = $("#ListCandidateScrViewModel_" + i + "__SelectedOption").prop("checked");

        lstScreeningViewModel.push({
            CandidateId: candidateId,
            TypeRequirement: typeRequirement,
            ScreeningId: screeningId,
            SelectedOption: selectedOption
        });
    };

    $.ajax({
        type: "POST",
        url: "/Candidate/SaveScreening",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify({ lstScreeningViewModel: lstScreeningViewModel } ),
        success: function (response) {
            // Maneja la respuesta del servidor
            if (response.success) {
                console.log("Datos actualizados correctamente");
            } else {
                alert("Error al guardar los cambios");
            }
        },
        error: function () {
            alert("Error en la solicitud AJAX");
        }
    });
});

This is the array that is sending ajax to the controller:

[
    { "CandiateId": 1, "TypeRequirement": "M", "ScreeninigId": 1, "SelectedOption": true},
    { "CandiateId": 1, "TypeRequirement": "M", "ScreeninigId": 2, "SelectedOption": false },
    { "CandiateId": 1, "TypeRequirement": "M", "ScreeninigId": 3, "SelectedOption": true },
    { "CandiateId": 1, "TypeRequirement": "M", "ScreeninigId": 4, "SelectedOption": false },
    { "CandiateId": 1, "TypeRequirement": "M", "ScreeninigId": 5, "SelectedOption": true },
    { "CandiateId": 1, "TypeRequirement": "M", "ScreeninigId": 6, "SelectedOption": false }
]

The problem is that I can not get the controller to receive the data correctly, since it does not receive anything and does not generate any errors.

Any suggestion to solve the problem?

Answer 1

When you define a list in imput parameters, Anyway parameter value (lstScreeningViewModel), must be has data, in case this is null value so maybe you need add [FromBody] attribute berfore lstScreeningViewModel in your controller

[HttpPost]
public JsonResult SaveScreening([FromBody] List<ScreeningViewModel> lstScreeningViewModel)
{
  // Acciones
  return Json(new { success = true, message = "Cambios guardados correctamente" });
}

finaly I have suggestion for you, use Postman application to test your Controller directly and debug it seperatly of front issues (ajax). so debug faster than now!

Answer 2

I spent three days researching, testing recommendations from various forums, ChatGpt suggestions, but I couldn't find the answer, until I saw a post by sonicbabbler on stackoverflow ([.Net Core AJAX Post Null][1]). There the problem was similar to mine, but instead of using a List<myModel> object I used an IEnumerable<myModel> and in the ajax part I only had a different order of the data, contentType and dataType properties, but in the model, all the properties were of type string, I made the changes and it worked. However, for me it was quite frustrating to have tried something similar and it didn't work, so I returned my model to how I had it originally, to the controller action I added [FromBody] and it was like this:

[HttpPost]
public IActionResult SaveScreeningAjax([FromBody] List<ScreeningViewModel> lstScreeningViewModel)
{
    // Acciones
    return Json(new { success = true, message = "Cambios guardados correctamente" });
}

And finally the js file looks like this:

$("#frmScreeningProcess").on("submit", function (e) {
    var data = [];

    // Obtener el número de filas en la tabla
    var totalRows = $('#MustToHaveTable tr').length - 1;

    for (i = 0; i < totalRows; i++) {
        var candidateId = parseInt($("#ListCandidateScrViewModel_" + i + "__CandidateId").val());
        var typeRequirement = $("#ListCandidateScrViewModel_" + i + "__TypeRequirement").val();
        var screeningId = parseInt($("#ListCandidateScrViewModel_" + i + "__ScreeningId").val());
        var selectedOption = $("#ListCandidateScrViewModel_" + i + "__SelectedOption").prop("checked");

        data.push(
            {
                candidateId: candidateId,
                typeRequirement: typeRequirement,
                screeningId: screeningId,
                selectedOption: selectedOption
            }
        );
    };

    console.log("Array: " + data);
    $.ajax({
        url: "/Candidate/SaveScreeningAjax",
        type: "POST",
        data: JSON.stringify(data),
        contentType: "application/json",
        dataType: "json",

        success: function (response) {
            // Maneja la respuesta del servidor
            if (response.success) {
                // Actualiza la parte específica de la vista
                console.log("Datos actualizados correctamente");
            } else {
                // Maneja cualquier error si es necesario
                alert("Error al guardar los cambios");
            }
        },
        error: function () {
            // Maneja errores de la solicitud AJAX
            alert("Error en la solicitud AJAX");
        }
    });
});

I'm sorry I can't give a technical explanation on how I solved the problem, because I don't know myself what solved the problem, but as I see that this problem is very common, I hope this will help to solve this problem when someone else encounters it. Thank you to those who took the time to help me.