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>

然后像这样在ready函数之外创建一个函数

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();
                }
            }); 
}

这应该可以工作，我猜不是在测试此代码的环境中进行的，所以无论如何都会出现错别字和语法错误

用户数据未显示在Modal中，但在单击按钮时会打开新标签，第一条记录除外

1 个答案: