学习ASP.NET Core Blazor编程系列二十——文件上传（完）

学习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编程系列十八——文件上传（中）

八、两个问题

我们通过前面的二篇文章的学习，已经实现了文件上传功能之中的上传文件功用，将文件信息保存到数据库的功能，以及删除文件功能。我们已经实现的文件上传功能，还存在着两个问题。

第一个问题，在删除上传文件信息时，没有任何时间，用户在删除时，并不知道自己要不要删除，没有让用户再次确认。

1. 在Visual Studio 2022中按F5运行图书租赁管理系统应用程序，在浏览器中使用鼠标左键点击“上传文件”菜单项，如下图。
2. 在浏览器的“多文件上传示例”页面中的“已上传文件列表”中，使用鼠标点击“删除”按钮，如下图，页面中没有任何反应，用户不知道是否已经将文件删除。

第二个问题，用户在上传文件和删除了上传文件信息之后，“已上传文件列表”没有及时刷新，用户并不知道删除的上传文件信息是否已经成功,上传的文件有哪些。

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);
        }
    }
}