学习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事件的调用,修改为如下代码。

@οnclick="@(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" @ο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);
        }
    }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
ASP.NET Core BlazorMicrosoft推出的一种新型的Web开发框架,它允许开发人员使用C#语言开发客户端Web应用程序。而气泡图是一种常用的数据可视化工具,可以用来显示二维数据中点的分布情况。 使用ASP.NET Core Blazor开发气泡图可以借助各种JavaScript库或组件来实现。在Blazor中,可以使用BlazorChartJS等开源图表组件库来绘制气泡图。这些组件库通常提供了一系列的API和选项,可以轻松地配置和自定义气泡图的各种属性和样式。 在Blazor中,可以使用C#语言来处理数据,并将数据传递给气泡图组件进行展示。可以通过绑定数据源的方式,将数据源与图表组件关联起来。当数据源发生变化时,图表组件会自动更新展示的气泡图。 气泡图通常包含X轴和Y轴,用于表示数据点的坐标位置。而数据点除了坐标位置外,还可以通过设置气泡的大小和颜色来表达额外的信息。通过给气泡图组件传递相应的数据数组,可以根据数据的具体值来确定气泡的位置、大小和颜色。 除了气泡图本身的展示外,还可以添加一些交互和动画效果来增强用户体验。例如,可以通过鼠标悬停在气泡上时显示气泡详情,或者通过动画效果展示数据点的添加和删除。 总之,ASP.NET Core Blazor可以与各种开源的气泡图组件库配合使用,通过C#语言处理数据、绑定数据源,并通过配置和自定义实现气泡图的展示效果和交互效果,为开发人员提供了方便快捷的方式来开发气泡图。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

野生的狒狒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值