如何使用 ASP.NET 核心和 Html 模式查看每個表格行的完整詳細信息

Question

我正在使用 ASP.NET 內核開發一個項目，並且我有這個我的個人資料頁面。

因此，當單擊詳細信息按鈕時，我想顯示該預訂的完整詳細信息，假設我要向該視圖發送一個包含所有數據的 ViewModel（所有具有完整詳細信息的預訂），現在我想顯示完整詳細信息的方式是與模態。

像這樣。 如何使用 asp.net 內核實現這一目標？

Answer 1

我會寫這個作為答案，因為它的評論太多了。

您只想將單個項目顯示為彈出窗口。 為此，您有多種通用方法：

渲染服務器端的所有內容並隱藏您不需要的內容

最后，每個彈出窗口只是 HTML。 通常是一個<div>元素。 因此，一種選擇是，在 razor 視圖中呈現所有彈出窗口，並使用 CSS 將它們全部隱藏。 現在您可以添加 css class 以使其中一個可見。

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 function 將 reservationId 作為 URL 參數傳遞並在彈出窗口中顯示響應（預訂詳細信息）。 請參閱下面的一些提供模態的常見 JS 框架。

將保留作為數據傳遞給 javascript 並呈現客戶端

在這里，您將所有預訂作為數據傳遞給 javascript。 然后您可以在 JavaScript 中創建彈出窗口

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

See How to get JSON object from Razor Model object in javascript . 使用 javascript 渲染 HTML 的示例庫： https://github.com/janl/mustache.js/

獲取詳細信息作為數據

你在這里創建

• 返回單個預訂的預訂詳細信息的操作。 它接受 URL 參數reservationId並以 JSON 形式返回詳細信息。
• JavaScript function 接受預訂 ID，從服務器加載數據並將數據呈現為彈出窗口

參見例如如何從 a.Net Core Web API 返回 Json？

鏈接

模態

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

雜項

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

這只是一個起點。 如果您對細節有疑問，您可以考慮哪個選項適合您，嘗試一下，然后在新的 SO 帖子中繼續。