c# - 用户数据未显示在模态中,但在单击按钮时会打开新选项卡,但第一条记录除外
问题描述
我有一个显示各种用户的表格和一个详细信息按钮,该按钮应在模式弹出窗口中显示用户详细信息。这适用于列表中的第一个,但其他所有它都会打开一个新选项卡以获取信息,我确定我遗漏了一些明显的东西,但这让我感到困惑。
控制器;
[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">×</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');
})
解决方案
像这样更改您的代码
<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();
}
});
}
这应该可以工作,我猜不是在测试此代码的环境中,所以无论如何可能存在拼写错误和语法错误,试一试
推荐阅读
- vue.js - react-snap:防止双重加载
- google-apps-script - 我如何编写一个脚本来查找 Google 表格中某个范围的总和,然后将其除以已过去的月数?
- python - 我如何在 Pandas 中按列分组,并找到它的总和?
- java - 为什么控制器使用空属性字段保存用户
- c++ - 字符串迭代延迟200ms
- javascript - 只有在用户确认警报后才会触发 POST 请求
- python-3.x - pandas drop duplicates 不会返回删除重复项的数据框
- c - 管道和叉子问题,输出按排序顺序
- python-3.x - 将字符串转换为列表对这个问题有帮助吗?
- python - 如何更改此代码以使每个文件的进度条出现并且迭代是每个循环?