时间戳

首页 > 解决方案 > 当每个元素都有一个单独的提交按钮时，提交列表中单个元素的正确方法是什么

javascript - 当每个元素都有一个单独的提交按钮时，提交列表中单个元素的正确方法是什么

问题描述

我有一个包含参与者列表的活动页面。从那里可以通过打开包含用户列表的模式视图来邀请用户参加该活动。用户以相同的模式显示，每个用户旁边都有一个“邀请”（提交）按钮。如何让控制器操作知道邀请了哪个用户？据我所知，为每个列表元素创建一个表单是不好的，并且还会显示警告，但是如果我在“foreach”之上创建一个表单元素，那么我需要以某种方式找到要提交的用户。还考虑将递增数字附加到每个提交按钮名称，但我仍然需要以某种方式将它们映射到“他们的”用户。除了受邀用户 ID，控制器发布操作还需要接收事件 ID。这是代码：

    <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>

标签： javascripthtmlasp.net-mvcasp.net-core

解决方案

可以jquery ajax用来传递你需要的参数，通过点击事件，获取当前按钮旁边需要的控件对应的值。

通过将name属性添加到提交按钮，然后在 jquery 中触发。

并在id存放User的Text值的div中添加，方便在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();
        }

推荐阅读