Question

我有一个模式，当用户单击索引页面上的删除链接时出现，但这仅显示第一条记录，无论单击了什么行，我认为我的“ @data_target”部分中缺少某些内容我的代码，但不确定。

代码如下：

 @foreach (var item in Model)
{
    using (Html.BeginForm("Delete", "ModelName", new { id = item.ID }))
    {
        var myModal = "myModal" + item.ID;

        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Account_Name)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                @Html.ActionLink("Delete", "Index", new { id = item.ID }, new { @class = "DeleteRecord", @data_target = "myModal" })

                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-keyboard="false" aria-labelledby="myModalLabel">
                    <div class="modal-dialog modal-sm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <center>
                                    <h4 class="modal-title" id="myModalLabel">Delete Record</h4>
                                </center>
                            </div>
                            <div class="modal-body">
                                <center>
                                   Record ID :<span><b>@item.ID</b></span><br />
                                    Account Name : <span><b>@item.Account_Name</b></span><br />

                                </center>
                            </div>
                            <div class="modal-footer">
                                <center>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                                    <input type="submit" value="Delete" class="btn btn-danger" />
                                </center>
                            </div>
                        </div>
                    </div>
                </div>


            </td>
        </tr>
    }
}

然后函数是

<script>
$(function () {
    $('.DeleteRecord').on("click", function (e) {
        e.preventDefault();
        //perform the url load  then
        $('#myModal').modal({
            keyboard: true
        }, 'show');
        return false;
    })
})

Answer 1

应该是data_targer =“＃myModal”

Answer 2

更新您的功能，如下所示。 $(this).closest('td')将选择单击的td按钮的父元素.DeleteRecord。然后它将在该#myModal中找到td。

$(document).ready(function () {
    $('.DeleteRecord').on("click", function (e) {
        e.preventDefault();
        //perform the url load  then
        $(this).closest('td').find('#myModal').modal({
            keyboard: true
        }, 'show');
        return false;
    });
});

在您的代码$('#myModal').modal(...);中，它使用了id选择器，它将始终为您提供具有myModel id的第一个元素。

Boostrap模态仅显示第一条记录

2 个答案: