ASP.NET MVC中的Bootstrap模式仅为第一个id打开模态

Question

我已经创建了一个简单的crud操作来测试bootstrap模式。我试图在bootstrap模式中打开我的其他视图。但只有第一行详细信息才会打开以进行编辑操作。我的意思是编辑表单只对第一个id打开。然后模态不再起作用了。

这是我的索引页面 -

@model IEnumerable<AMSTest.Models.tbl_category>
....
<a id="btnCreate" data-toggle="modal" href="#myModal" class="btn btn-primary">Create</a>

<table class="table table-hover">
    <tr>
        <th>@Html.DisplayNameFor(model => model.category_name)</th>
        <th>@Html.DisplayNameFor(model => model.category_image)</th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>@Html.DisplayFor(modelItem => item.category_name)</td>
        <td>@Html.DisplayFor(modelItem => item.category_image)</td>
        <td>
            <a id="btnEdit" data-id="@item.category_id" data-toggle="modal" class="btn btn-primary" href="#myModal">Edit</a>

            @Html.ActionLink("Details", "Details", new { id=item.category_id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.category_id })
        </td>
    </tr>
}
</table>


<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledBy="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <div id="modal-content"></div>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script>
        $('#btnCreate').click(function (eve) {
            $('#modal-content').load("/Category/Create");
        });

        $('#btnEdit').click(function (eve) {
            $('#modal-content').load("/Category/Edit/" + $(this).data("id"));
        });

        $('#btnDetails').click(function (eve) {
            $('#modal-content').load("/Category/Details/" + $(this).data("id"));
        });

        $('#btnDelete').click(function (eve) {
            $('#modal-content').load("/Category/Delete/" + $(this).data("id"));
        });
    </script>
}

现在该怎么办？