学习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编程系列十八——文件上传(中)八、两个问题
我们通过前面的二篇文章的学习,已经实现了文件上传功能之中的上传文件功用,将文件信息保存到数据库的功能,以及删除文件功能。我们已经实现的文件上传功能,还存在着两个问题。
第一个问题,在删除上传文件信息时,没有任何时间,用户在删除时,并不知道自己要不要删除,没有让用户再次确认。
- 在Visual Studio 2022中按F5运行图书租赁管理系统应用程序,在浏览器中使用鼠标左键点击“上传文件”菜单项,如下图。
- 在浏览器的“多文件上传示例”页面中的“已上传文件列表”中,使用鼠标点击“删除”按钮,如下图,页面中没有任何反应,用户不知道是否已经将文件删除。
第二个问题,用户在上传文件和删除了上传文件信息之后,“已上传文件列表”没有及时刷新,用户并不知道删除的上传文件信息是否已经成功,上传的文件有哪些。
3.在浏览器的“多文件上传示例”页面中使用鼠标左键点击“选择文件”按钮,在弹出的对话框中,选择“WMS流程图”文件,如下图。
4.浏览器中显示文件已经上传,但是在页面的“已上传文件列表”中却没有刷新新的数据。如下图。
九、添加文件删除确认提示信息
我们首先解决第一个问题,当用户点击删除按钮时,提供一个删除确认操作。
1. 为了更好的用户体验,当用户单击删除上传文件时,要提供一个删除确认的操作。 在Visual Studio 2022的解决方案资源管理器中找到“Descri”文件夹,并使用鼠标左键双击打开UpFileInfoList.razor文件。
2.在文本编辑器中,添加IJSRuntime注入。代码如下: - @onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"inject IJSRuntime JsRuntime
复制代码 3.在@onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"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页面中的删除事件,添加了确认提示信息。具体代码如下: - @onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"page "/Descri/UpFileInfoList"@onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"using BlazorAppDemo.Models@onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"using BlazorAppDemo.Utils@onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"using Microsoft.EntityFrameworkCore @onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"inject IDbContextFactory dbFactory@onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"inject IJSRuntime JsRuntime [size=4]已上传文件列表[/size]
- [table] [tr] @onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"HtmlHelper.GetDisplayName(fileDesc,m=>m.Name) @onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"HtmlHelper.GetDisplayName(fileDesc ,m=> m.NewName) @onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"HtmlHelper.GetDisplayName(fileDesc ,m=>m.UploadDateTime) @onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"HtmlHelper.GetDisplayName(fileDesc ,m=> m.FileSize) [/tr] @onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"foreach (var item in fileDescs) { [tr] [td] 删除 [/td] [td] @onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"item.Name [/td] [td] @onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"item.NewName [/td] [td] @onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"item.UploadDateTime [/td] [td] @onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"item.FileSize [/td] [/tr] } [/table]@onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"code { private static BookContext _context; private List fileDescs = new List(); 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 listId = new(); listId.Add(Id); int[] Ids= listId.ToArray(); var entity = _context.Find(Id); _context.Remove(entity); _context.SaveChangesAsync(); } public async Task ShowConfirmMsg(MouseEventArgs e,int Id)
- {
- if (await JsRuntime.InvokeAsync<bool>("confirm",$"你是否确认要删除当前文件?"))
- {
- DeleteFile(e, Id);
- }
- }}
复制代码
来源:https://www.cnblogs.com/chillsrc/archive/2023/01/08/17034603.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@onclick="@(async e => await ShowConfirmMsg(e, @item.ID))"itdo.tech】 我们会及时删除侵权内容,谢谢合作! |