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

不念不忘少年蓝@ 2024-03-16 13:49 26阅读 0赞

## 八、两个问题 ##

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

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

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

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

3.在浏览器的“多文件上传示例”页面中使用鼠标左键点击“选择文件”按钮，在弹出的对话框中，选择“WMS流程图”文件，如下图。

![fbbd3b67760d96d5a2b8d408ec1bc6fd.png][]

4.浏览器中显示文件已经上传，但是在页面的“已上传文件列表”中却没有刷新新的数据。如下图。

![c9bce6aae96c0553978f1c509012a6f7.png][]

## 九、添加文件删除确认提示信息 ##

我们首先解决第一个问题，当用户点击删除按钮时，提供一个删除确认操作。

1. 为了更好的用户体验，当用户单击删除上传文件时，要提供一个删除确认的操作。 在Visual Studio 2022的解决方案资源管理器中找到“Descri”文件夹，并使用鼠标左键双击打开UpFileInfoList.razor文件。

2.在文本编辑器中，添加IJSRuntime注入。代码如下:

@inject IJSRuntime JsRuntime

3.在@code代码块中，添加一个提示信息方法ShowConfirmMsg，由这个方法去调用javascript的confirm函数。如果用户选择了“确定”，则调用DeleteFile方法，删除上传文件信息。具体代码如下：

![bf58eaee00b01accc06b7b78bd026d6a.gif][]

public async Task ShowConfirmMsg(MouseEventArgs e,int Id)
        {
    
            if (await JsRuntime.InvokeAsync<bool>("confirm",$"你是否确认要删除当前文件？"))
    
            {
    
                DeleteFile(e, Id);
            }
        }

![f79928c9be611706121c2bb0137983cd.gif][]

以上代码中，服务器使用JsRuntime.InvokeAsync方法 在客户端调用javascript的confirm函数，并将用户的反馈响应保存在布尔变量中。然后检查响应的布尔变量，如果为true，则调用DeleteFile(e,Id)方法 删除上传文件信息。

4.我们将原来按钮的onclick事件的调用，修改为如下代码。

@οnclick="@(async e => await ShowConfirmMsg(e, @item.ID))"

5.通过以上四步，我们给UpFileInfoList.razor页面中的删除事件，添加了确认提示信息。具体代码如下：

![d81becb39ce6a5c277bfdf76a891aba2.gif][]

@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" @οnclick="@(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);
            }
        }
    }

[a340764f19f39e45e17aea59cd6f7202.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b5fd1badaf054ecca41c5ca5f84bed4d.png
[29f645a79f3779623ffca1046df77db5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/eab17cd6dfd84675b9c57ff7f3d8a383.png
[fbbd3b67760d96d5a2b8d408ec1bc6fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/286759ee77b44b7c8ebdf7c4bb06b6f8.png
[c9bce6aae96c0553978f1c509012a6f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/dcc528d702934208b733837ed7df3bbb.png
[bf58eaee00b01accc06b7b78bd026d6a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d55d10e6956847d797e34f68f01c0ba8.png
[f79928c9be611706121c2bb0137983cd.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/67a2fbdad85a4dfeb3f7c586d37b7e61.png
[d81becb39ce6a5c277bfdf76a891aba2.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/dc4089f62ae2411e888405017de3a0dd.png