Как передать массив javascript в C# ASP NET модель?

Question

Я работаю над ASP Net Core 3 Application web. Можете ли вы помочь мне, я хотел бы передать массив javascript Id в свойстве ViewModel для распознавания в моем контроллере.

Я надеюсь, что это понятно.

Я искал какое-то решение на net но не было идеального решения для моей ситуации, может быть, у вас есть идеи.

Мой Javascript:

<script>
    (function ($) {
        $(document).ready(function () {
            var table = $("#table_enseignant").DataTable({
                columnDefs:
                    [{
                        orderable: false,
                        className: 'select-checkbox',
                        targets: 0
                    },
                    {
                        visible: false,
                        targets: 1
                    }
                    ],
                'select': {
                    style: 'multi',
                    selector: 'tr'
                },
            });

            $('#btnSubmit').click(function () {
                debugger;
                var enseignantsId = $.map(table.rows({ selected: true }).data(), function (item) { return item[1] });
                $.ajax({
                    type: "POST",
                    url: "../Utilisateurs/Create",
                    contentType: 'application/json; charset=UTF-8',
                    data: JSON.stringify({ enseignantsId : enseignantsId })             
                });
            });
        });
    })(jQuery);
</script>

Мой CS HTML (Частичный просмотр):

@model FichesEnseignants.ViewsModels.UtilisateurViewModel.UtilisateurCreateOrUpdateViewModel

@{
    Layout = null;
}
<div id="UtilisateursAValiderTable">
    <h5 class="text-left">Liste d'enseignant</h5>
    <table class="table table-striped table-bordered display" id="table_enseignant">
        <thead class="thead-dark">
            <tr>
                <th class="text-center"></th>
                <th>Id</th>
                <th scope="col">Enseignant</th>
                <th scope="col">Département</th>
                <th scope="col">Site</th>
            </tr>
        </thead>
        <tbody>
            @if (Model.ListeEnseignantAValider.Count > 0)
            {
                foreach (var enseignant in Model.ListeEnseignantAValider)
                {
                    <tr class="">
                        <td class="text-center"></td>
                        <td>@enseignant.Id</td>
                        <td class="">
                            @enseignant.Nom @enseignant.Prenom
                        </td>
                        <td>@enseignant.Departement.NomDpt</td>
                        <td>@enseignant.Site.Ville</td>
                    </tr>
                }
            }
        </tbody>
    </table>
</div>

Мой CS HTML (Просмотр):

<div class="d-flex flex-column">
    <form asp-action="Create">
        <div class="d-flex flex-column" style="margin: 30px 0">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="text-center">
                <div class="table-responsive-sm">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <table class="table table-striped table-bordered">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">Nom<span>*</span></th>
                                <th scope="col">Prenom<span>*</span></th>
                                <th scope="col">Email <span>*</span></th>
                                <th scope="col">Département</th>
                                <th scope="col">Site</th>
                                <th scope="col">Poste(s)</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>
                                    <input class="form-control" type="text" asp-for="Nom" id="NomUtilisateurInput" required placeholder="Nom de l'utilisateur">
                                </th>
                                <th>
                                    <input class="form-control" type="text" asp-for="Prenom" id="PrenomUtilisateurInput" required placeholder="Prénom de l'utilisateur">
                                </th>
                                <th>
                                    <input class="form-control" type="text" asp-for="Email" required placeholder="Email de l'utilisateur">
                                </th>
                                <th>
                                    <select asp-for="DepartementId" id="departementInput" class="form-control" disabled>
                                        <option value="" selected ></option>
                                        @foreach (var departement in Model.Departements)
                                        {
                                            <option value="@departement.Id">@departement.NomDpt</option>
                                        }
                                    </select>
                                </th>
                                <th>
                                    <select asp-for="SiteId" id="siteInput" class="form-control" disabled>
                                        <option value="" selected ></option>
                                        @foreach (var site in Model.Sites)
                                        {
                                            <option value="@site.Id">@site.Ville</option>
                                        }
                                    </select>
                                </th>
                                <th class="text-left">
                                    <div class="form-group form-check">
                                        <label class="form-check-label">
                                            <input id="checkboxUtilisateurEnseignant" class="form-check-input" type="checkbox" asp-for="IsEnseignant" /> Enseignant
                                        </label>
                                    </div>
                                    <div class="form-group form-check">
                                        <label class="form-check-label">
                                            <input id="checkboxUtilisateurResponsable" class="form-check-input" type="checkbox" asp-for="IsResponsableDpt" />Responsable Département
                                        </label>
                                    </div>
                                    <div class="form-group form-check">
                                        <label class="form-check-label">
                                            <input id="checkboxUtilisateurReferent" class="form-check-input" type="checkbox" asp-for="IsRefFaculte" /> Référent faculté
                                        </label>
                                    </div>
                                    <div class="form-group form-check">
                                        <label class="form-check-label">
                                            <input id="checkboxUtilisateurDoyen" class="form-check-input" type="checkbox" asp-for="IsDoyen" /> Doyen
                                        </label>
                                    </div>
                                </th>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="d-flex flex-column" style="margin: 30px 0" id="UtilisateursAValider">
            <div class="content">
                *My Partiel view added*
            </div>
        </div>

        <div class="form-group d-flex justify-content-end">
            <div class="p-2">
                <a asp-controller="Home" asp-action="Index" type="button" class="btn btn-outline-dark" data-dismiss="modal">Annuler</a>
            </div>
            <div class="p-2">
                <button type="submit" class="btn btn-success" id="btnSubmit">Confirmer</button>
            </div>
        </div>
    </form>
</div>

Моя ViewModel:

public class UtilisateurCreateOrUpdateViewModel
    {
        [HiddenInput]
        public int? Id { get; set; }
        [...]
        public int[] enseignantsId { get; set; }
        [...]

    }

И мой контроллер:

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(UtilisateurCreateOrUpdateViewModel utilisateurCreateVm)
{}

Answer 1

Вы передаете json данные из ajax в контроллер, поэтому вам нужно добавить атрибут [FromBody] при получении модели в действии Создать.

[HttpPost]
   [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create([FromBody]UtilisateurCreateOrUpdateViewModel utilisateurCreateVm)
    {
       //...
    }

Читать эту статью .

Обновление

Измените URL ajax следующим образом:

$('#btnSubmit').click(function () {
                debugger;
                var enseignantsId = $.map(table.rows({ selected: true }).data(), function (item) { return item[1] });

                $.ajax({
                    type: "POST",
                    url: "/Utilisateurs/Create",
                    contentType: 'application/json; charset=UTF-8',
                    data: JSON.stringify({ enseignantsId: enseignantsId })
                });
            });