ASP.NET MVC 按钮总是点击 table 行 returns 第一行（模态）

Question

我正在尝试、尝试和尝试，但我没有找到解决方案.. :( 要是有经验的人看看就好了

我的情况：

我有一个 table 有多行，其中一行有按钮。如果那些是用于删除数据记录的“取消”按钮。总的来说，这是完美的，但我实现了一个模式对话框，在处理取消之前询问用户是否真的确定要取消它。由于我实现了模态对话框，在按钮上单击所选行总是更改为第一行，而不是用户单击的行。因此，如果用户单击第 2 行中的“取消”按钮，它会在模式弹出窗口中显示第 1 行的数据，并将第 1 行的 ID 重定向到控制器。

我的看法：

@model ViewModels.ServicesViewModel

<table class="table table-hover">
    <tr>
        <th>DB Name</th>
        <th>DB Description</th>
        <th>DB Version</th>
        <th>Access valid until</th>
        <th>Action</th>
    </tr>
    @foreach (var item in Model.AssignedDatabases)
    {
        <tr>
            <td style="width:20%">@item.DB_Name</td>
            <td style="width:35%">@item.DB_Description</td>
            <td style="width:10%">@item.DB_Version</td>
            <td style="width:15%">@item.ExpiryDate</td>
            <td style="width:20%">
                @if (item.RequestState.Equals("Open"))
                {
                    <a href="#"><i class="btn btn-info btn-md" style="font-family:Arial">Pending</i></a>
                }
                else
                {
                    <a href="#"><i data-toggle="modal" data-target="#exampleModal" class="btn btn-danger btn-md" style="font-family:Arial">Cancel</i></a>
                }
                @if (Model.ResponsibleDBs.Exists(x => x.DB_UID == item.DB_UID))
                {
                    <a href="@Url.Action("Manage", new { id = item.DB_UID })"><i class="btn btn-success btn-md" style="font-family:Arial">Manage</i></a>
                }
                @using (Html.BeginForm("Delete", "AssignedDatabases", FormMethod.Post))
                {
                    <div id="exampleModal" class="modal" tabindex="3" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title">Do you really want to cancel the access to @item.DB_Name ?</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-footer">
                                    <a href="@Url.Action("Delete", new { id = item.DB_UID })"><i class="btn btn-success btn-md" style="font-family:Arial">Yes</i></a>
                                    <a href=""><i data-dismiss="modal" class="btn btn-danger btn-md" style="font-family: Arial">No</i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                }
            </td>
        </tr>
    }

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
        <a href="@Url.Action("RequestDatabase", "RequestDatabase")"><i class="btn btn-success btn-md" style="font-family:Arial">Request new</i></a>
    </td>
</tr>
</table>


<script type="text/javascript">
    $(function () {

        $('body').on('click', 'a.modal-link', function (e) {

            e.preventDefault();

            $("#modal").remove();

            // Get the Details action URL
            var url = $(this).attr("href");

            //Make the Ajax call and render modal when response is available
            $.get(url, function (data) {
                $(data).modal();
            });
        });

    });
</script>

有人知道我做错了什么吗？谢谢！

BR, 菲尔

Answer 1

您的问题来自使用非唯一 ID #exampleModal。因此浏览器总是使用具有该 ID 的第一个元素。

如果您想在 foreach 循环中保留模式，您应该为 ID 附加一些唯一的内容。

Answer 2

@Niyak

你就是王者！谢谢！我向数据目标和模态添加了一个唯一标识符，现在它开始工作了。就这么简单...有时候只见树木不见森林:)

现在将代码更改为：

@model ViewModels.ServicesViewModel
<table class="table table-hover">
    <tr>
        <th>DB Name</th>
        <th>DB Description</th>
        <th>DB Version</th>
        <th>Access valid until</th>
        <th>Action</th>
    </tr>
    @foreach (var item in Model.AssignedDatabases)
    {
        var dataTargetCancel = "#ModalCancel" + item.DB_UID;
        var modalID = "ModalCancel" + item.DB_UID;

        <tr>
            <td style="width:20%">@item.DB_Name</td>
            <td style="width:35%">@item.DB_Description</td>
            <td style="width:10%">@item.DB_Version</td>
            <td style="width:15%">@item.ExpiryDate</td>
            <td style="width:20%">
                @if (item.RequestState.Equals("Open"))
                {
                    <a href="#"><i class="btn btn-info btn-md" style="font-family:Arial">Pending</i></a>
                }
                else
                {
                    <a href="#"><i data-toggle="modal" data-target="@dataTargetCancel" class="btn btn-danger btn-md" style="font-family:Arial">Cancel</i></a>
                }
                @if (Model.ResponsibleDBs.Exists(x => x.DB_UID == item.DB_UID))
                {
                    <a href="@Url.Action("Manage", new { id = item.DB_UID })"><i class="btn btn-success btn-md" style="font-family:Arial">Manage</i></a>
                }

                @using (Html.BeginForm("Delete", "AssignedDatabases", FormMethod.Post))
                {
                    <div id="@modalID" class="modal" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title">Do you really want to cancel the access to @item.DB_Name ?</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-footer">
                                    <a href="@Url.Action("Delete", new { id = item.DB_UID })"><i class="btn btn-success btn-md" style="font-family:Arial">Yes</i></a>
                                    <a href=""><i data-dismiss="modal" class="btn btn-danger btn-md" style="font-family: Arial">No</i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                }
            </td>
        </tr>
    }

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
        <a href="@Url.Action("RequestDatabase", "RequestDatabase")"><i class="btn btn-success btn-md" style="font-family:Arial">Request new</i></a>
    </td>
</tr>
</table>


<script type="text/javascript">
    $(function () {

        $('body').on('click', 'a.modal-link', function (e) {

            e.preventDefault();

            $("#modal").remove();

            // Get the Details action URL
            var url = $(this).attr("href");

            //Make the Ajax call and render modal when response is available
            $.get(url, function (data) {
                $(data).modal();
            });
        });

    });
</script>

ASP.NET MVC 按钮总是点击 table 行 returns 第一行（模态）

ASP.NET MVC Button click on table row always returns first row (modal)

c#

asp.net

asp.net-mvc

bootstrap-modal

bootstrap-4