问题描述
我正在实现asp.net core 3.1项目。我有一个剃刀视图，在剃刀中，我正在显示从控制器中Index方法获取的一些数据，该方法的名称为RequestorsController。在razor中，每行都有一个链接，称为“详细信息”，我希望当用户单击每行的“详细信息”按钮时，该行的相关ID传递给RequestorsController中的“详细信息”方法和列表的相关数据返回剃刀视图并显示在“模态”弹出窗口中。现在我可以实现Modal弹出窗口，但是我的问题是我无法从控制器中获取数据以显示在Modal上。如果有人能解决我的问题，我将不胜感激。
<div id="tablecontainer" class="my-5 col-sm-12 d-flex justify-content-center">
<table id="myDummyTable" class="table m-table mytable table-striped mb-4 col-12 dataTable table-bordered px-0 mx-0" style="Box-sizing:content-Box;">
<thead>
<tr id="headerrow">
<th>
requestor name
</th>
<th>
items requested
</th>
<th>
operations
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.HiddenFor(modelItem => item.applicantID)
@Html.displayFor(modelItem => item.requestorName)
</td>
<td>
@Html.displayFor(modelItem => item.requesteditemCount)
</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="@item.applicantID">Details</button>
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post">
<div class="modal-body">
<div class="form-group">
<label for="recipient-apiname" class="col-form-label">name:</label>
<input type="text" class="form-control" id="recipient-apiname" name="apiname">
<input type="hidden" id="recipient-id" name="id" />
</div>
<div class="form-group">
<label for="recipient-status" class="col-form-label">status:</label>
<input type="text" class="form-control" id="recipient-status" name="status">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Save" />
</div>
</form>
</div>
</div>
</div>
@section scripts{
<script>
@{
if (ViewBag.ModalState == null)
{
ViewBag.ModalState = "hide";
}
}
$('#exampleModal').modal('@ViewBag.ModalState');
$('#exampleModal').on('show.bs.modal',function (event) {
var button = $(event.relatedTarget);
var id = button.data('id');
var modal = $(this);
modal.find('.modal-body input[name="id"]').val(id);
$.get('@Url.Action("Details","Requestors")/' + id,function (data) {
modal.find('.modal-body input[name="name"]').val(data.itemName);
modal.find('.modal-body input[name="status"]').val(data.requestStatus);
});
});
</script>
}
public async Task<IActionResult> Details(int? id)
{
List<ItemDTO> al = new List<ItemDTO>();
ItemDTO apDTO;
var myquery = (from t in _context.Items
where t.ApplicantId == id
select new { ItemName = t.ItemName,requestStatus = t.LastRequestStatus }).ToList();
foreach (var index in myquery)
{
apDTO = new ItemDTO();
apDTO.itemName = index.itemName;
apDTO.requestStatus = index.requestStatus;
al.Add(apDTO);
}
return View(al);
}
解决方法
现在我可以实现Modal弹出窗口，但是我的问题是我无法执行 从控制器获取数据以模态显示。
如您的评论中所述，当您单击“详细信息”按钮时，发生500错误，我确实重现了此错误。
这是因为Details动作返回了View而不是需要以ajax返回的json数据，并且因为没有Details视图，所以发生了500错误。 / p>
要解决此问题，只需更改返回到 Json数据的Details动作的内容，如下所示：
public async Task<IActionResult> Details(int? id)
{
List<ItemDTO> al = new List<ItemDTO>();
ItemDTO apDTO;
var myquery = (from t in _context.Items
where t.ApplicantId == id
select new { ItemName = t.ItemName,requestStatus = t.LastRequestStatus }).ToList();
foreach (var index in myquery)
{
apDTO = new ItemDTO();
apDTO.itemName = index.ItemName;// here is ItemName(case sensitive)
apDTO.requestStatus = index.requestStatus;
al.Add(apDTO);
}
return Json(al);
}
我的疑问是，如果ApplicantId是键，那么从Items表获得的数据计数必须为一个，而无需列表集合，但是由于返回了集合数据，因此在ajax中，您需要传递 data[0] 来绑定相应的输入值/
您需要将input[name="name"]更改为input[name="apiname"]。
这是ajax代码：
$.get('@Url.Action("Details","Requestors")/' + id,function (data) {
modal.find('.modal-body input[name="apiname"]').val(data[0].itemName);
modal.find('.modal-body input[name="status"]').val(data[0].requestStatus);
});