Модальный Boostrap показывает только первую запись

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

Обновите свою функцию, как показано ниже. $(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.

Answer 2

Это должно быть data_targer = "# myModal"