前言 眾所周知記憶體緩存(MemoryCache)數據是從記憶體中獲取，性能表現上是最優的，但是記憶體緩存有一個缺點就是不支持分散式，數據在各個部署節點上各存一份，每份緩存的過期時間不一致，會導致幻讀等各種問題，所以我們實現分散式緩存通常會用上Redis 但如果在高併發的情況下讀取Redis的緩存，會進行 ...
學習ASP.NET Core Blazor編程系列文章之目錄 學習ASP.NET Core Blazor編程系列一——綜述 學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式（上）
學習ASP.NET Core Blazor編程系列三——實體 學習ASP.NET Core Blazor編程系列五——列表頁面 學習ASP.NET Core Blazor編程系列七——新增圖書 學習ASP.NET Core Blazor編程系列八——數據校驗 學習ASP.NET Core Blazor編程系列十三——路由（完） 學習ASP.NET Core Blazor編程系列十五——查詢 學習ASP.NET Core Blazor編程系列十六——排序 學習ASP.NET Core Blazor編程系列十七——文件上傳（上） 學習ASP.NET Core Blazor編程系列二十——文件上傳（完）
在上一篇 學習ASP.NET Core Blazor編程系列二十——文件上傳（完） 文章中曾經談過文件上傳功能遺留了二個問題。第一個問題我們已經在上一篇文章中解決了，第二個問題，就是數據刷新問題，這不僅僅是上傳中會碰到，只要是用數據列表或表格呈現數據，都可能會碰到沒有及時刷新，數據不是最新的這個問題。
十、刷新數據
Blazor 綁定（綁定就是刷新）機制有以下幾種
- 首次載入時的自動綁定
- 調用 StateHasChanged 強制重新綁定（重新綁定即刷新）
- 註冊事件自動刷新
Blazor組件在第一次渲染完成之後，ShouldRender 會返回為 false，然後後面調用都返回 false，對於任意一個組件，若出現沒刷新的情況下，請考慮這個因素。
那麼，如何讓Blazor組件進行刷新呢？方法很簡單，手動調用該組件的StateHasChanged 方法，然後綁定數據。
StateHasChanged 方法
這個方法至關重要，我們來看看這個方法裡面有什麼。如下圖。
數據刷新的流程以上圖來講解，接下來，我們以具體的代碼來實現此功能。
1. 在Visual Studio 2022中的解決方案資源管理器中使用滑鼠左鍵雙擊打開UpFileInfoList.razor文件。在@code代碼塊中聲明一個事件。代碼如下：
[Parameter]
public EventCallback RefterData { get; set; }
2.在Visual Studio 2022中的解決方案資源管理器中使用滑鼠左鍵雙擊打開FileUpload1.razor文件。在@code代碼塊中用代碼實現RefterData事件的一個方法 RefterDataHandler，併在UpFileInfoList組件中調用我們剛纔寫的RefterDataHandler方法，在上傳方法中調用RefterDtaHandler方法 。代碼如下：
@page "/FileUpload1"
@using BlazorAppDemo.Models
@using BlazorAppDemo.Utils
@using Microsoft.AspNetCore.Mvc.ModelBinding
@using Microsoft.EntityFrameworkCore
@inject IWebHostEnvironment Environ
@inject IDbContextFactory<BookContext> dbFactory
<h3>多文件上傳示例</h3>
<p>
<label>
提示信息：@Message
</label>
</p>
<p>
<label>
上傳文件最大可以為：<input type="number" @bind="maxFileSize"/>位元組
</label>
</p>
<p>
<label>
一次可上傳：<input type="number" @bind="maxAllowedFiles" />個文件
</label>
</p>
<p>
<label>
選擇上傳文件：<InputFile OnChange="@LoadFiles" multiple />
</label>
<BlazorAppDemo.Pages.Descri.UpFileInfoList RefterData="RefterDataHandler" @ref="@upfileList"></BlazorAppDemo.Pages.Descri.UpFileInfoList>
</p>
@if (isLoading)
{
<p>文件上傳中......</p>
}
else
{
<ul>
@foreach (var file in loadedFiles)
{
<li>
<ul>
<li>文件名：@file.Name</li>
<li>最後修改時間：@file.LastModified.ToString()</li>
<li>文件大小(byte)：@file.Size</li>
<li>文件類型：@file.ContentType</li>
</ul>
</li>
}
</ul>
}
@code {
private List<IBrowserFile> loadedFiles = new();
private long maxFileSize = 1024 * 18;
private int maxAllowedFiles = 2;
private bool isLoading;
private string Message = string.Empty;
private BlazorAppDemo.Pages.Descri.UpFileInfoList upfileList;
private async Task LoadFiles(InputFileChangeEventArgs e)
{
isLoading = true;
loadedFiles.Clear();
foreach (var file in e.GetMultipleFiles(maxAllowedFiles))
{
try
{
ModelStateDictionary modelState = new ModelStateDictionary();
loadedFiles.Add(file);
FileHelpers.db = dbFactory.CreateDbContext();
string result= await FileHelpers.ProcessFormFile(file, modelState, Environ, maxFileSize);
if (string.IsNullOrEmpty(result))
{
Message = "上傳成功！";
RefterDataHandler();
}else
Message = "上傳失敗！";
}
catch (Exception ex)
{
Message = ex.Message;
}
}
isLoading = false;
}
public void RefterDataHandler()
{
StateHasChanged();
upfileList.BindData();
}
}
3.我們在Visual Studio 2022中切換到UpFileInfoList.razor頁面，併在ShowConfirmMsg方法中調用RefterData方法 。具體代碼如下。
@page "/Descri/UpFileInfoList"
@using BlazorAppDemo.Models
@using BlazorAppDemo.Utils
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<BookContext> dbFactory
@inject IJSRuntime JsRuntime
<h3>已上傳文件列表</h3>
<table class="table" width="99%">
<thead>
<tr>
<th></th>
<th>
@HtmlHelper.GetDisplayName(fileDesc,m=>m.Name)
</th>
<th>
@HtmlHelper.GetDisplayName(fileDesc ,m=> m.NewName)
</th>
<th class="text-center">
@HtmlHelper.GetDisplayName(fileDesc ,m=>m.UploadDateTime)
</th>
<th class="text-center">
@HtmlHelper.GetDisplayName(fileDesc ,m=> m.FileSize)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in fileDescs)
{
<tr>
<td>
<button id="delete" class="btn btn-primary" @onclick="@(async e => await ShowConfirmMsg(e, @item.ID))">刪除</button>
</td>
<td>
@item.Name
</td>
<td>
@item.NewName
</td>
<td class="text-center">
@item.UploadDateTime
</td>
<td class="text-center">
@item.FileSize
</td>
</tr>
}
</tbody>
</table>
@code {
private static BookContext _context;
private List<FileDescribe> fileDescs = new List<FileDescribe>();
private FileDescribe fileDesc = new FileDescribe();
[Parameter]
public EventCallback RefterData { get; set; }
protected override async Task OnInitializedAsync()
{
BindData();
await base.OnInitializedAsync();
}
public void BindData()
{
_context = dbFactory.CreateDbContext();
fileDescs = _context.FileDescribe.ToList();
}
public void DeleteFile(MouseEventArgs e, int Id)
{
List<int> listId = new();
listId.Add(Id);
int[] Ids= listId.ToArray();
var entity = _context.Find<FileDescribe>(Id);
_context.Remove<FileDescribe>(entity);
_context.SaveChangesAsync();
}
public async Task ShowConfirmMsg(MouseEventArgs e,int Id)
{
if (await JsRuntime.InvokeAsync<bool>("confirm",$"你是否確認要刪除當前文件？"))
{
DeleteFile(e, Id);
await RefterData.InvokeAsync();
}
}
}
4.在Visual Studio 2022中按F5運行圖書租賃管理應用程式，然後在瀏覽器中點擊“上傳文件”菜單。如下圖。
5. 在瀏覽器的“多文件上傳示例”頁面中使用滑鼠左鍵點擊“選擇文件”按鈕，在彈出的對話框中，選擇“1K文件”，文件將被上傳，文件信息會在上傳成功之後，及時更新到“已上傳文件列表”中。如下圖。
6. 在已上傳文件列表中，點擊要刪除的上傳文件記錄前面的刪除按鈕。系統會彈出一個“你是否確認要刪除當前文件”的提示信息，如下圖。
7. 使用滑鼠左鍵點擊“確定”按鈕，系統將把文件信息刪除，同時刷新“已上傳文件列表”信息。如下圖。
