八、两个问题
我们通过前面的二篇文章的学习，已经实现了文件上传功能之中的上传文件功用，将文件信息保存到数据库的功能，以及删除文件功能。我们已经实现的文件上传功能，还存在着两个问题。
第一个问题，在删除上传文件信息时，没有任何时间，用户在删除时，并不知道自己要不要删除，没有让用户再次确认。
-
在Visual Studio 2022中按F5运行图书租赁管理系统应用程序，在浏览器中使用鼠标左键点击“上传文件”菜单项，如下图。
-
在浏览器的“多文件上传示例”页面中的“已上传文件列表”中，使用鼠标点击“删除”按钮，如下图，页面中没有任何反应，用户不知道是否已经将文件删除。
第二个问题，用户在上传文件和删除了上传文件信息之后，“已上传文件列表”没有及时刷新，用户并不知道删除的上传文件信息是否已经成功,上传的文件有哪些。
3.在浏览器的“多文件上传示例”页面中使用鼠标左键点击“选择文件”按钮，在弹出的对话框中，选择“WMS流程图”文件，如下图。
4.浏览器中显示文件已经上传，但是在页面的“已上传文件列表”中却没有刷新新的数据。如下图。
九、添加文件删除确认提示信息
我们首先解决第一个问题，当用户点击删除按钮时，提供一个删除确认操作。
1. 为了更好的用户体验，当用户单击删除上传文件时，要提供一个删除确认的操作。 在Visual Studio 2022的解决方案资源管理器中找到“Descri”文件夹，并使用鼠标左键双击打开UpFileInfoList.razor文件。
2.在文本编辑器中，添加IJSRuntime注入。代码如下:
@inject IJSRuntime JsRuntime
3.在@code代码块中，添加一个提示信息方法ShowConfirmMsg，由这个方法去调用javascript的confirm函数。如果用户选择了“确定”，则调用DeleteFile方法，删除上传文件信息。具体代码如下：
public async Task ShowConfirmMsg(MouseEventArgs e,int Id) { if (await JsRuntime.InvokeAsync<bool>("confirm",$"你是否确认要删除当前文件？")) { DeleteFile(e, Id); } }
以上代码中，服务器使用JsRuntime.InvokeAsync方法 在客户端调用javascript的confirm函数，并将用户的反馈响应保存在布尔变量中。然后检查响应的布尔变量，如果为true，则调用DeleteFile(e,Id)方法 删除上传文件信息。
4.我们将原来按钮的onclick事件的调用，修改为如下代码。
@onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"
5.通过以上四步，我们给UpFileInfoList.razor页面中的删除事件，添加了确认提示信息。具体代码如下：
@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(); 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); } } }
