在模态用户数据不显示，但按钮即可打开新的标签页，除了第一条记录

Question

我有显示各种用户和详细信息按钮应在一个模式弹出显示用户详细信息的表格。这适用于在列表中的第一个，但所有的人它会打开一个新标签的信息，我敢肯定，我失去了一些东西很明显，但它莫名其妙我。

控制器;

    [HttpGet]
    public ActionResult DetailsPopup(int id)
    {
        var user = UIDal.GetToolUser(id);
        return PartialView(user);
    }

按钮代码：

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.DomainAccount)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.DisplayLogonId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.UnlimitedAccess)
                </td>
                <td id="toolUserIdValue" style="display:none;">
                    @Html.DisplayFor(modelItem => item.ToolUserId)
                </td>
                <td class="float-left">

                    <a href="@Url.Action("DetailsPopup", "ToolUser" , new { id = item.ToolUserId })" class="btn btn-warning" id="btnDetailsModal" data-target="#detailsModal" data-toggle="tooltip" data-placement="top" title="User Details">
                        <i class="fas fa-info-circle"></i>
                    </a>

                </td>
            </tr>
        }

详细模态：

        <div id="detailsModal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">User Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="detailsBody" class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="modalClose" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

jQuery的：

    $(document).ready(function () {
    $("#btnDetailsModal").on("click", function (e) {
        e.preventDefault();
        var uid = document.getElementById("toolUserIdValue").innerHTML;
        var trimString = uid;
        trimString = trimString.trim();
        uinfo = trimString;

            $.ajax({
                type: "GET",
                url: "@Url.Action("DetailsPopup")" + '/' + uinfo,
                async: true,
                cache: false,
                data: JSON.stringify(uinfo),
                contentType: "application/json; charset=utf-8",
                //dataType: "json",
                success: function (data) {
                    //$("#responsedata").html("");
                    $("#detailsBody").html(data);
                    $("#detailsModal").modal('show');
                },
                error: function(errmsg) {
                    alert(JSON.stringify(errmsg));
                    $('#loadingDiv').hide();
                }
            });
    });
});


$('#modalClose').on("click", function () {
    $(this).removeData('detailsBody');
})

Answer 1

改变你的代码是这样的

<td class="float-left">

                    <a href="#" onClick="getDetails(@item.id)" class="btn btn-warning"  data-target="#detailsModal" data-toggle="tooltip" data-placement="top" title="User Details">
                        <i class="fas fa-info-circle"></i>
                    </a> 
                </td>

然后就创建这样准备功能之外的功能

function getDetails(var id)
{
 $.ajax({
                type: "GET",
                url: "ToolUser/DetailsPopup/"+id,
                async: true,
                cache: false,
                data: JSON.stringify(uinfo),
                contentType: "application/json; charset=utf-8",
                //dataType: "json",
                success: function (data) {
                    //$("#responsedata").html("");
                    $("#detailsBody").html(data);
                    $("#detailsModal").modal('show');
                },
                error: function(errmsg) {
                    alert(JSON.stringify(errmsg));
                    $('#loadingDiv').hide();
                }
            }); 
}

这应该工作，我想不会对环境来测试这个代码，以便错别字和语法错误可能是反正有没有给它一个镜头