Twitter bootstrap 使用引导模式确认删除列表项

我正在尝试使用引导模式创建删除确认。除了模式总是显示和删除列表中的第一个项目，而不是单击“删除”按钮的实际列表项目之外，其他一切都很正常。有人能看出我错在哪里吗

<table class="table">

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.InvoiceID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.InvoiceDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DueDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Paid)
        </td>
        <td style="white-space: nowrap;width: 1px;">               
            <button type="button" class="btn btn-primary btn-xs" onclick="location.href='@Url.Action("Edit", "Billing", new { id = item.InvoiceID })'"><span class="glyphicon glyphicon-edit" style="vertical-align:middle;margin-top: -5px"></span> Edit</button>
            <button type="button" class="btn btn-default btn-xs" onclick="location.href='@Url.Action("Index", "InvoiceItem", new { id = item.InvoiceID })'"><span class="glyphicon glyphicon-eye-open" style="vertical-align:middle;margin-top: -5px"></span> Details</button>
            <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" data-id=@item.InvoiceID><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
            <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Confirm Delete</h4>
                        </div>
                        <div class="modal-body">
                            <!-- The problem seems to be here:--> 
                            <p>Are you sure you want to delete invoice number: <b>@item.InvoiceID</b></p>
                        </div>
                        <div class="modal-footer">
                            <form asp-controller="Billing" asp-action="Delete" asp-route-id=@item.InvoiceID method="post" class="form-inline" role="form">
                                <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>               
        </td>
    </tr>
}

@foreach（模型中的var项目）
{
@DisplayFor（modelItem=>item.InvoiceID）
@DisplayFor（modelItem=>item.Description）
@DisplayFor（modelItem=>item.InvoiceDate）
@DisplayFor（modelItem=>item.DueDate）
@DisplayFor（modelItem=>item.Paid）
编辑
细节
删除
&时代；
确认删除
是否确实要删除发票号：@item.InvoiceID

删除
接近
}

通过脚本加载上述视图，以避免在更改下拉列表时使用以下代码刷新页面：

<script type="text/javascript">     


    $(document).ready(function () {
        loadPartial();
        $("#ddlCategory").change(loadPartial);
    });

    function loadPartial() {
        var companyID = $("#ddlCategory").val();
        var displayPaid = $("#chkDisplayPaid").is(':checked');
        var url = '@(Url.Action("InvoiceList", "Billing",null, null ))?companyID=' + companyID + '&displayPaid=' + displayPaid;
        $("#InvoiceList").load(url);
    }
</script> 

$（文档）.ready（函数（）{
loadPartial（）；
$（“#类别”）。更改（loadPartial）；
});
函数loadPartial（）{
var companyID=$（“#ddlcontegory”）.val（）；
var displaypady=$（“#chkdisplaypady”）。是（':checked'）；
var url='@（url.Action（“发票列表”、“账单”，null，null））？companyID='+companyID+'&displaypad='+displaypad；
$（“#发票列表”）.load（url）；
}

如果在循环中使用相同的id重复相同的模式，这是错误的，html页面不能有重复的id，或者将模式

id=“myModal”

更改为

id=“@（i+1）”

和

data target=“#（i+1）”

和

foreach

循环为

for

循环为

@for（var i=0；i>model.count（）；i++）

但是这种方法是错误的，因为您正在为每一行重复模式

与此相反，请将模态保持在表的外部，并按如下方式执行：

@foreach (var item in Model)
{      
  ......rest same code                     
   <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" data-id=@item.InvoiceID><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
  ....... rest same code     
 }

---

*如果愿意，可以在同一页面中打开相同或不同的模式进行编辑和详细信息

哇，多好的回答啊-谢谢，我完全明白你的意思。我唯一不确定的是，脚本应该放在哪里。因为上面的视图是通过脚本加载的，以避免页面刷新。所以我不能将脚本放在视图中，因为它不会被加载，而将它放在主视图中是不会触发的。我编辑了我的原始帖子，以显示我用于加载视图而不刷新页面的脚本。当我将代码放在那里时，当打开模式时，它不会触发。$（“#InvoiceList”）.load（url，function（）{//do write script here}）；谢谢，这很有效。我还有一个问题，就是jquery javascript源文件冲突。jquery文件与什么冲突？您是同时使用两个不同版本的jquery，还是它与引导冲突？

<div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Confirm Delete</h4>
                        </div>
                        <div class="modal-body">
                            <!-- The problem seems to be here:--> 
                            <p>Are you sure you want to delete invoice number: <b id="InvoiceID"></b></p>
                        </div>
                        <div class="modal-footer">
                            <form asp-controller="Billing" asp-action="Delete" method="post" class="form-inline" role="form">
<input type="hidden" id="id">
                                <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div> 

 $(document).ready(function () {
        $('#myModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);//Button which is clicked
            var clickedButtonId= button.data('Id');//Get id of the button
// set id to the hidden input field in the form.
           $("#InvoiceID").text(clickedButtonId);
           $("input #id").val(clickedButtonId);
    });