问题描述

我正在使用 ASP.NET Core 开发一个项目，我有这个“我的个人资料”页面。

因此，当单击详细信息按钮时，我想显示该预订的完整详细信息，假设我将向该视图发送一个包含所有数据的 viewmodel（所有具有完整详细信息的预订），现在我想显示的方式完整的细节在 Modal。

像这样。如何使用 asp.net core 实现这一点？

解决方法

我会写这个作为答案，因为评论的文字太多了。

您只想将单个项目显示为弹出窗口。为此，您有多种通用方法：

渲染服务器端的所有内容并隐藏您不需要的内容

最后，每个弹出窗口都只是 HTML。通常是一个 <div> 元素。所以一种选择是，在你的剃刀视图中呈现所有弹出窗口，并简单地用 CSS 隐藏它们。现在您可以添加一个 css 类来使其中一个可见。

MyView.cshtml

@foreach(var reservation in Model.Reservations)
{
    <div click="document.getElementById('@reservation.id').style.display='block';">
       reservation list item
    </div>
    <div id="@reservation.id" style="display:none">reservation details</div>
}

您会将部分封装在 js 函数中，而reservation.id 可能不是 HTML id 属性的正确属性，但我想您已经明白了。

仅渲染列表并获取 HTML 片段

这里只渲染列表，然后使用 javascript 从服务器加载 HTML 片段。

  MyController.cs
  
  getReservationDetails(Guid reservationId) {
     var reservation = load(reservationId);
     // popup html only,no layout,no body tag,...
     return View(reservation);
  }

在您的列表中，您将需要一个 js 函数，它将reservationId 作为 URL 参数传递并在您的弹出窗口中显示三个响应（预订详细信息）。请参阅下面一些提供模态的常见 JS 框架。

将预订作为数据传递给 javascript 并呈现客户端

在这里，您将所有预订作为数据传递给 javascript。然后你可以在 JavaScript 中创建弹出窗口

   <script>
      const reservations = [{ ... reservation as json },{ ... }];
      
      function showReservation(index) {
         // render and show in JS
      }
   </script>

见How to get JSON object from Razor Model object in javascript。使用 javascript 呈现 HTML 的示例库：https://github.com/janl/mustache.js/