如何在剃刀视图上显示网格视图灯箱

Question

我正在实现asp.net核心项目。我有一个Index razor视图，其中有一些列，每行都有一个名为Details的链接。我希望当用户单击“详细信息”链接时，该行的一些相关数据将显示在灯箱上，这意味着灯箱将显示一些列（网格视图）。现在，我尝试的是当用户单击“详细信息”链接时，它转到控制器中的相关方法并返回其相关视图。但是正如我提到的，我希望details方法返回一个灯箱，该灯箱隐藏下面的索引视图。我尝试过的索引视图中的代码如下：

@model IEnumerable<CSDDashboard.TempClasses.ApiApplicantDTO>

<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>
                    applicant name
                </th>

                <th>
                    requested item count
                </th>
                <th>
                    Delivered items
                </th>
                <th>
                    pending item
                </th>
                <th>
                   in process item
                </th>
                <th>
                    operations
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>

                    <td>
                        @Html.DisplayFor(modelItem => item.applicantName)
                    </td>


                    <td>
                        @Html.DisplayFor(modelItem => item.requestedItemCount)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.deliveredItemCount)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.pendingItemCount)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.inProcessItemCount)
                    </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>

这里是索引方法：

public async Task<IActionResult> Index(string searchString, string currentFilter, string sortOrder, int? pageNumber)
        {
            ApiApplicantDTO tempObject;
            List<ApiApplicantDTO> myArrList = new List<ApiApplicantDTO>();
      
            var applicants = (from t1 in _context.VwReport.ToList()
                                 
                              group t1 by new { t1.ApplicantId, t1.ApplicantName } into ApiAppGp
                              
                              select new
                              {
                                  
                                  applicantID = ApiAppGp.Key.ApplicantId,
                                  applicantName = ApiAppGp.Key.ApplicantName,

                                  deliveredApiCount = (ApiAppGp.ToList().Where(a => a.LastReqStatus == "access")?.Count() ?? 0),
                                  inProcessApiCount = (ApiAppGp.ToList().Where(a => a.LastReqStatus == "registered")?.Count() ?? 0),
                                  pendingApiCount = (ApiAppGp.ToList().Where(a => a.LastReqStatus == "pending")?.Count() ?? 0),
                                
                                  apicount = ApiAppGp.Count(),

                              }).ToList();



            for (int i = 0; i < applicants.Count(); i++)
            {
                tempObject = new ApiApplicantDTO();

                tempObject.applicantID = applicants.ElementAt(i).applicantID;
                tempObject.applicantName = applicants.ElementAt(i).applicantName;
      
                tempObject.deliveredApiCount = applicants.ElementAt(i).deliveredApiCount;
                tempObject.inProcessApiCount = applicants.ElementAt(i).inProcessApiCount;
                tempObject.pendingApiCount = applicants.ElementAt(i).pendingApiCount;
            
                tempObject.requestedApiCount = applicants.ElementAt(i).apicount;


                myArrList.Add(tempObject);
            }


     
            return View(myArrList);//.ToListAsync());
     
        }

这是“详细信息”方法：

public async Task<IActionResult> Details(int? id)
        {
            List<ApiApplicantDTO> al = new List<ApiApplicantDTO>();

            ApiApplicantDTO apDTO;

            var myquery = (from t in _context.VwReport
                          where t.ApplicantId==id
                          select new { apiName = t.ApiName,applicantName=t.ApplicantName,requestStatus=t.LastReqStatus }).ToList();

            

            foreach(var index in myquery)
            {
                apDTO = new ApiApplicantDTO();

                apDTO.apiName = index.apiName;
                apDTO.applicantName = index.applicantName;
                apDTO.requestStatus = index.requestStatus;

                al.Add(apDTO);
            }
   return View(al);
        }