Контроллер получает {int [0]} из View вместо массива идентификаторов?

Question

У меня есть View, содержащий Ajax-вызов, который должен отправлять флажки, выбранные на контроллере. Я получаю {int[0]} вместо массива идентификаторов. Как мне передать идентификаторы моему контроллеру?

Я пытался добавить name к флажкам ввода, думая, что он будет привязан к массиву, но нет.

JavaScript:

$("#sendSubEvents").submit(function (event) {

                //event.preventDefault();

                var action = $(this).attr('action');
                var idSelector = function () { return this.id; };
                var subEventsChecked = $(":checkbox:checked:not(#wdn_menu_toggle)").map(idSelector).get();
                var checked = { 'subEventsChecked': subEventsChecked };
                //Shows selected for testing.
                //alert("Sending selection: " + subEventsNotChecked);

                $.ajax({
                    url: action,
                    type: 'POST',                    
                    data: checked,
                    success: function (response) {
                        if (response) {
                            alert("Event selection successfully saved.");
                        }

                    }

                });
            })

;

HTML-форма:

<form id="sendSubEvents" asp-action="AttendSubEvent" asp-controller="Ambassador" method="post">
            @Html.HiddenFor(x => x.SubEvents)
            <table id="subEventsTable">
                <thead>
                    <tr>
                        <th>Event Name</th>
                        <th>Sub Event Name</th>
                        <th>Description</th>
                        <th>Date</th>
                        <th>Start Time</th>
                        <th>End Time</th>
                        <th>Location</th>
                        <th>Available</th>

                    </tr>
                </thead>
                <tbody>
                    @foreach (var ev in Model.SubEvents.OrderBy(x => x.SubEventName))
                    {
                        <tr>
                            <td>@ev.EventName</td>
                            <td>@ev.SubEventName</td>
                            <td>@ev.SubEventDescription</td>
                            <td>@ev.Date.ToShortDateString()</td>
                            <td>@DateTime.Today.Add(ev.StartTime).ToString("hh:mm tt")</td>
                            <td>@DateTime.Today.Add(ev.EndTime).ToString("hh:mm tt")</td>
                            <td>@ev.Location</td>
                            <td><input name="subEventIds" type="checkbox" id=@ev.SubEventId asp-for="@ev.Attend" /></td>
                        </tr>
                    }
                </tbody>
            </table>
            <br />

            <button type="submit" id="addSubEventsBtn" class="wdn-button wdn-button-complement" style="float:right;">Submit</button>
        </form>

Контроллер (действие):

[HttpPost]
        [Authorize(Roles = "Ambassador")]
        public IActionResult AttendSubEvent(int[] subEventsChecked)
        {
            var model = new AmbassadorAssociatedSubEventsViewModel();         

            _ambassadorManager.AttendSubEvent(subEventsChecked, _userManager.CurrentUser.UserName);

            return RedirectToAction(nameof(GetSubEvents));

Мне нужно получить выбранные идентификаторы в массиве вконтроллер.

Answer 1

Похоже, вы смешиваете форму отправки и ajax submit. Кроме того, нет необходимости использовать ajax, если вы использовали $("#sendSubEvents").submit().

Ниже приведены способы отправки формы со значениями флажков.

1. Один из способов заключается в том, что вам вообще не нужно использовать js.

Измените имена флажков на subEventsChecked и используйте <input type="submit"/> для отправки формы.

См. https://stackoverflow.com/a/57071037/10158551:

<input name="subEventsChecked" type="checkbox" value=@ev.SubEventId />
//...
<input type="submit" id="addSubEventsBtn" class="wdn-button wdn-button-complement"  value="Submit" />

2. Другой способ - не использовать js для отправки:

<input name="subEventsChecked" type="checkbox" value="@ev.SubEventId" />
<button onclick="submitForm()" type="submit" id="addSubEventsBtn" class="wdn-button wdn-button-complement" style="float:right;">Submit</button>

//js
function submitForm() {
     $("#sendSubEvents").submit();
}

3.Используйте Ajax:

<form id="sendSubEvents">//remove asp-controller, asp-action and method
        @Html.HiddenFor(x => x.SubEvents)
        <table id="subEventsTable">
            <thead>
                <tr>
                    <th>Event Name</th>
                    <th>Sub Event Name</th>
                    <th>Description</th>
                    <th>Date</th>
                    <th>Start Time</th>
                    <th>End Time</th>
                    <th>Location</th>
                    <th>Available</th>

                </tr>
            </thead>
            <tbody>
                @foreach (var ev in Model.SubEvents.OrderBy(x => x.SubEventName))
                {
                    <tr>
                        <td>@ev.EventName</td>
                        <td>@ev.SubEventName</td>
                        <td>@ev.SubEventDescription</td>
                        <td>@ev.Date.ToShortDateString()</td>
                        <td>@DateTime.Today.Add(ev.StartTime).ToString("hh:mm tt")</td>
                        <td>@DateTime.Today.Add(ev.EndTime).ToString("hh:mm tt")</td>
                        <td>@ev.Location</td>
                        <td><input name="subEventIds" type="checkbox" value=@ev.SubEventId  /></td>
                    </tr>
                }
            </tbody>
        </table>
        <br />

        <button onclick="submitForm()" id="addSubEventsBtn" class="wdn-button wdn-button-complement" style="float:right;">Submit</button>
    </form>

Js:

function submitForm() {

        var checkedValue = [];
        var inputElements = document.getElementsByName('subEventIds');
        for (var i = 0; inputElements[i]; ++i) {
            if (inputElements[i].checked) {
                checkedValue.push(inputElements[i].value);
            }
        }
        var checked = { 'subEventsChecked': checkedValue };


        $.ajax({
            url: "/Products/AttendSubEvent",
            type: 'POST',
            data: checked,
            success: function (response) {
                if (response) {
                    alert("Event selection successfully saved.");
                }

            }

        });
    }