在 ASP.NET Core Razor 頁面上提交 Post 后如何刷新頁面內容？

Question

我正在使用 ASP Net Core，並使用 Razor Pages 創建了一個項目。

我有一個頁面列出了與當前用戶關聯的產品，他可以添加新產品。

OnPost方法被調用后，我想刷新頁面，讓它顯示用戶的所有產品，而無需再次請求數據庫

以下是我目前的解決方案：

    public async Task OnGet()
    {
        var currentUser = await GetCurrentUser();
        if (currentUser != null)
            Products = await _dbContext.Products.Where(x => x.AtpUserId == currentUser.Id).ToListAsync();
    }

    public async Task OnPost(Product product)
    {
        var currentUser = await GetCurrentUser();
        if (currentUser != null)
        {
            product.UserId = currentUser.Id;
            product.Currency = "USD";
            await _dbContext.Products.AddAsync(product);
            await _dbContext.SaveChangesAsync();
            Products = await _dbContext.Products.Where(x => x.UserId == currentUser.Id).ToListAsync(); // can I avoid this ?
        }
    }

如果沒有從數據庫重新加載數據的最后一行，我無法找到相同的結果。

• 我查看了一些示例，但是來自腳手架頁面的示例都使用中間Create頁面，然后重定向到Index頁面。 我希望用戶能夠從索引頁面創建
• 我試圖通過調用RedirectToPage("Index");來替換OnPost方法的最后一行RedirectToPage("Index"); 但不會再次調用OnGet方法，刷新時包含產品的表為空。 為什么？

Answer 1

根據我的經驗，管理網頁上元素列表的最佳方法是在客戶端代碼上管理它們，並在我的用戶提交時查詢數據庫。

我將嘗試進一步闡述：

如果您有一個顯示元素列表的頁面，並且您的用戶可以從那里添加、修改或刪除元素，那么最好的方法（恕我直言）如下：

- 使用從數據庫獲取的當前信息加載頁面（您可以在客戶端代碼中存儲該信息的表示，例如，在 JSON 對象上）。

- 讓您的用戶管理頁面上的信息。 當他添加新元素時，您會更新 JSON 對象上的信息並將其反映在屏幕上，但在提交更改之前不要與數據庫聯系。

- 您對更新或刪除進行相同操作，始終在主 JSON 對象中維護實際信息，但無需調用服務器進行任何操作。

- 操作完成后（這可能意味着很多不同的事情，具體取決於您的業務模型），您將獲得更新的 JSON 對象，以及當前完整的元素列表，並將其發送到服務器以對唯一的數據庫事務應用更改.

這會產生更少的網絡流量、更少的數據庫操作、更快、更可靠、更容易更新視圖，並且幾乎可以完全通過客戶端代碼進行管理。

它不適用於某些場景，例如，如果您的元素集合需要由不同的用戶同時修改，或者由當前用戶交互之外的外部事件進行修改，但它是管理許多簡單用戶交互的干凈有效的方式我們使用它以不必要的方式使過於復雜。

Answer 2

首先，這是一個很好的問題，謝謝你的提問！

您嘗試實現的目標無法通過重定向來完成。 數據庫將再次被調用，這是不可避免的。 但是還有另一種方法，如果您真的不想從數據庫請求數據兩次，我會推薦這種方法。 下面我們來一探究竟：

調用OnPost時，您需要將Products數據傳回模型。 這意味着您必須綁定該數據，以便在提交后將其與表單數據一起傳遞給模型。

首先，使用[BindProperty]在 Razor 頁面模型中標記產品屬性，然后在 HTML 中添加<input type="hidden" value="@Model.Products" /> 。 這將通過表單提交提交您的Products數據。

現在在您的OnPost ， Products 將有一個值，因為它將被綁定。 當OnPost返回Page ， @Model.Products將具有從初始OnGet相同值。 我以前做過這個，而且它奏效了，所以我可以向你保證它會奏效。

---

這是一些示例代碼：

public class SomePageModel{

  [BindProperty]
  public IList<Product> Products {get; set;}
  
  [BindProperty]
  public Product Product {get; set;}
  
  public async Task OnGet()
  {
      var currentUser = await GetCurrentUser();
      if (currentUser != null)
          Products = await _dbContext.Products.Where(x => x.AtpUserId == currentUser.Id).ToListAsync();
  }

  public async Task OnPost()
  {
      var currentUser = await GetCurrentUser();
      if (currentUser != null)
      {
          Product.UserId = currentUser.Id;
          Product.Currency = "USD";
          await _dbContext.Products.AddAsync(Product);
          await _dbContext.SaveChangesAsync();
      }
  }
}

要使綁定工作，您需要將數據傳遞回模型，因此為它包含一個隱藏的<input /> ：

<form method="POST">
  <input type="hidden" asp-for="Products" value="PassProductsAsJSONString" />
</form>