如何使用 ASP.NET Core 和 Html Modal 查看每个表格行的完整详细信息

Question

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

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

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

Answer 1

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

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

渲染所有服务器端并隐藏你不需要的东西

最后，每个弹出窗口都只是 HTML。通常是 <div> 元素。所以一种选择是，在你的 razor 视图中渲染所有弹出窗口，然后用 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);
  }

在您的列表中，您需要一个将 reservationId 作为 URL 参数传递并在弹出窗口中显示响应（预订详细信息）的 js 函数。请参阅下面的一些提供模态的常见 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/

获取详细信息作为数据

在这里创建

• 返回单个预留的预留详细信息的操作。它接受 URL 参数 reservationId 并以 JSON 格式返回详细信息。
• 接受预订 ID、从服务器加载数据并将数据呈现为弹出窗口的 JavaScript 函数

参见例如How to return a Json from a .Net Core Web API?

链接

模态

• https://getbootstrap.com/docs/3.4/javascript/#modals
• https://jqueryui.com/dialog/

杂项

• https://thoughtbot.com/blog/rendering-views-in-javascript

这只是一个起点。如果您对细节有疑问，您可以考虑哪个选项适合您，尝试一下，然后在新的 SO 帖子中继续。