Какой правильный способ отправить один элемент в списке, когда у каждого из них есть отдельная кнопка отправки

Question

У меня есть страница мероприятия со списком участников. Оттуда пользователей можно пригласить на это событие, открыв модальное представление, содержащее список пользователей. Пользователи показаны в одном и том же модальном окне, рядом с каждым из них есть кнопка «Пригласить» (отправить). Как я могу сообщить действию контроллера, какой пользователь приглашен? Из того, что я смог найти, создание формы для каждого элемента списка - это плохо и, кроме того, отображаются предупреждения, но если я создаю элемент формы поверх «foreach», мне нужно как-то найти, какого пользователя отправить. Также подумал о добавлении увеличивающихся чисел к каждому имени кнопки отправки, но мне все еще нужно как-то сопоставить их со «своими» пользователями. Наряду с идентификатором приглашенного пользователя действие публикации контроллера также должно получить идентификатор события. Вот код:

    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h4 class="modal-title">Select user</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
<form id="eventMemberForm" method="post" class="col-sm-6 custom-close" data-ajax="true" data-ajax-method="post" data-ajax-complete="completed" data-ajax-url="@Url.Action("SendInvitation", "Sports")">
    <input type="hidden" asp-for="Invitation.FkEvent" value="@Model.Event.EventId" />
    <input type="hidden" asp-for="Invitation.EventInvitationId" />

                <div class="modal-body">
                    <input class="form-control p-2 mb-2" id="myInput" type="text" placeholder="Search..">
                    <h4 class="align-content-center">Users</h4>
                    <div class="form-group">
                        <table class="w-100">
                            <tbody id="myField">
                                @foreach (var item in Model.Users)
                                {
                                    <tr>
                                        <td class="d-flex">
                                            <div> @Html.DisplayFor(modelItem => item.Text) </div>
                                            <input type="hidden" asp-for="Invitation.FkUser" value="@item.Value" />
                                            <div class="ml-auto">
                                                <input id="btnSave" type="submit" value="Invite" class="btn btn-success" />
                                            </div>
                                        </td>
                                    </tr>
                                    ++i;
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
              </form>
            </div>
        </div>
    </div>

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#myInput").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#myField tr").filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });

    completed = () => {
        alert("User invited");
    };
</script>

Answer 1

Вы можете использовать jquery ajax для передачи необходимых вам параметров через событие щелчка, чтобы получить соответствующее значение элемента управления, необходимого рядом с текущей кнопкой.

Добавив атрибут name к кнопку отправки, а затем срабатывает в jquery.

И добавьте id в div, в котором хранится текстовое значение User, чтобы облегчить поиск соответствующего значения в jquery.

@section Scripts{
    <script>
        $(document).ready(function () {
            $("#myInput").on("keyup", function () {
                var value = $(this).val().toLowerCase();
                $("#myField tr").filter(function () {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
            $("[name=submitBtn]").click(function () {
                event.preventDefault(); 
                var obj = {
                    myUser: {
                        Text: $($(this).parent().siblings()[0]).text(),
                        Value: $($(this).parent().siblings()[1]).val()
                    },
                    eventId: $("#Invitation_FkEvent").val()
                };



                $.ajax({
                    url: $("#eventMemberForm").attr("data-ajax-url"),
                    method: 'post',
                    data: obj,
                })
            });
        });
        completed = () => {
            alert("User invited");
        };
    </script>
}
<h1>Index</h1>
<button data-toggle="modal" data-target="#myModal" class="btn btn-primary">Submit</button>
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Select user</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form id="eventMemberForm" method="post" class="col-sm-6 custom-close" data-ajax="true" data-ajax-method="post" data-ajax-complete="completed" data-ajax-url="@Url.Action("SendInvitation", "Sports")">
                <input type="hidden" asp-for="Invitation.FkEvent" value="@Model.Event.EventId" />
                <input type="hidden" asp-for="Invitation.EventInvitationId" />



                <div class="modal-body">
                    <input class="form-control p-2 mb-2" id="myInput" type="text" placeholder="Search..">
                    <h4 class="align-content-center">Users</h4>
                    <div class="form-group">
                        <table class="w-100">
                            <tbody id="myField">
                                @foreach (var item in Model.Users)
                                {
                                    <tr>
                                        <td class="d-flex">
                                            <div id="textValue"> @Html.DisplayFor(modelItem => item.Text) </div>
                                            <input type="hidden" asp-for="Invitation.FkUser" value="@item.Value" />
                                            <div class="ml-auto">
                                                <input id="btnSave" type="submit" value="Invite" class="btn btn-success" name="submitBtn"/>
                                            </div>
                                        </td>
                                    </tr>
                                    ++i;
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Контроллер:

public IActionResult SendInvitation(User myUser, string eventId)
        {
            //do what you want
            return View();
        }