【发布时间】：2020-08-09 06:55:48
【问题描述】：
我正在实施 asp.net core 3.1 项目。我需要在剃刀视图中有一个网格视图，并且当用户单击每行的详细信息链接时我想要。一个带有该行相关数据的灯箱弹出窗口，向用户显示仍然是网格视图类型。我在网上搜索了很多，我只能找到一些显示图像而不是数据的灯箱示例。我想使用这个链接，我正在实施 asp.net core 3.1 项目。我需要在剃刀视图中有一个网格视图，并且当用户单击每行的详细信息链接时我想要。一个灯箱弹出窗口，其中包含根据所选申请人 ID 的该行的相关数据，向用户显示仍然是网格视图类型。我在网上搜索了很多，我只能找到一些显示图像而不是数据的灯箱示例。我想使用这个链接https://fancyapps.com/fancybox/ 来实现fancybox 来显示网格视图。我很感激如果有人帮助我找到一个好的资源来学习，我如何在单击详细信息链接后将特定申请者 ID 的 itemName 和 requeststatus 值及其相关标头从剃刀视图发送到fancybox。我只希望这些字段显示在灯箱上而不是 rezor 视图上。
@model IEnumerable<CSDDashboard.TempClasses.ApiApplicantDTO>
<head>
<link href="~/css/DataTable/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="~/contents/Index.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="~/css/jquery.fancybox.min.css" type="text/css" media="screen" />
</head>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script language="JavaScript" type="text/javascript" src="~/js/jquery.fancybox.min.js"></script>
<script language="JavaScript" type="text/javascript" src="~/js/datatables.min.js"></script>
<script>
jQuery(document).ready(function ($) {
// $(document).ready(function() {
//$(".fancybox").fancybox();
// });
jQuery(".fancybox").fancybox();
});
jQuery(document).ready(function ($) {
// $(document).ready(function() {
//$(".fancybox").fancybox();
// });
//jQuery(".fancybox").fancybox();
$("#myDummyTable").DataTable({
//"searching": false,
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Persian.json"
}
});
});
</script>
<div id="main">
</div>
<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>
Name
</th>
<th>
Requested item count
</th>
<th>
delivered request
</th>
<th>
pending request count
</th>
<th>
registered request count
</th>
<th>
operations
</th>
<th>
itemName
</th>
<th>
requestStatus
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.applicantName)
</td>
<td>
@Html.DisplayFor(modelItem => item.requestedApiCount)
</td>
<td>
@Html.DisplayFor(modelItem => item.deliveredApiCount)
</td>
<td>
@Html.DisplayFor(modelItem => item.pendingApiCount)
</td>
<td>
@Html.DisplayFor(modelItem => item.inProcessApiCount)
</td>
<td>
@Html.DisplayFor(modelItem => item.itemName)
</td>
<td>
@Html.DisplayFor(modelItem => item.requestStatus)
</td>
<td>
<a asp-action="Edit" asp-route-id="@item.applicantID">Edit</a> |
<a asp-action="Details" asp-route-id="@item.applicantID">Details</a> |
<a asp-action="Delete" asp-route-id="@item.applicantID">Delete</a>
</td>
</tr>
}
</tbody>
</table>
</div>
<style>
#myfooter {
padding-top: 2em;
}
.table {
position: relative;
top:20px;
}
#tablecontainer {
clear: both;
position: relative;
top: 20px;
display: block;
}
.a-ijaad:hover {
text-decoration: none;
color: white;
}
.a-ijaad{
font-size:0.8rem;
}
</style>
【问题讨论】：
标签： jquery asp.net-core razor