学习ASP.NET Core Blazor编程系列二十一——数据刷新

Bertha 。 2024-03-16 13:49 10阅读 0赞

在上一篇[ 学习ASP.NET Core Blazor编程系列二十——文件上传（完） ][_ASP.NET Core Blazor_]文章中曾经谈过文件上传功能遗留了二个问题。第一个问题我们已经在上一篇文章中解决了，第二个问题，就是数据刷新问题，这不仅仅是上传中会碰到，只要是用数据列表或表格呈现数据，都可能会碰到没有及时刷新，数据不是最新的这个问题。

## 十、刷新数据 ##

Blazor 绑定（绑定就是刷新）机制有以下几种

1.  首次加载时的自动绑定
2.  调用 StateHasChanged 强制重新绑定（重新绑定即刷新）
3.  注册事件自动刷新

Blazor组件在第一次渲染完成之后，ShouldRender 会返回为 false，然后后面调用都返回 false，对于任意一个组件，若出现没刷新的情况下，请考虑这个因素。  
那么，如何让Blazor组件进行刷新呢？方法很简单，手动调用该组件的StateHasChanged 方法，然后绑定数据。

### StateHasChanged 方法 ###

这个方法至关重要，我们来看看这个方法里面有什么。如下图。

![8e121c9ee229a4477e6a7bcac66d7ede.png][]

数据刷新的流程以上图来讲解，接下来，我们以具体的代码来实现此功能。

1. 在Visual Studio 2022中的解决方案资源管理器中使用鼠标左键双击打开UpFileInfoList.razor文件。在@code代码块中声明一个事件。代码如下：

[Parameter]
        public EventCallback RefterData { get; set; }

2.在Visual Studio 2022中的解决方案资源管理器中使用鼠标左键双击打开FileUpload1.razor文件。在@code代码块中用代码实现RefterData事件的一个方法 RefterDataHandler，并在UpFileInfoList组件中调用我们刚才写的RefterDataHandler方法，在上传方法中调用RefterDtaHandler方法 。代码如下：

![8710635da868512fd4bfea78848973a1.gif][]

@page "/FileUpload1"
    @using BlazorAppDemo.Models
    @using BlazorAppDemo.Utils
    
    @using Microsoft.AspNetCore.Mvc.ModelBinding
    @using Microsoft.EntityFrameworkCore
    @inject IWebHostEnvironment Environ
    @inject IDbContextFactory<BookContext> dbFactory
     
    <h3>多文件上传示例</h3>
    <p>
        <label>
            提示信息：@Message
     
        </label>
    </p>
    <p>
        <label>
            上传文件最大可以为：<input type="number" @bind="maxFileSize"/>字节
     
        </label>
    </p>
    <p>
        <label>
            一次可上传：<input type="number" @bind="maxAllowedFiles" />个文件
     
        </label>
    </p>
    <p>
        <label>
            选择上传文件：<InputFile OnChange="@LoadFiles" multiple />
     
        </label>
        <BlazorAppDemo.Pages.Descri.UpFileInfoList RefterData="RefterDataHandler" @ref="@upfileList"></BlazorAppDemo.Pages.Descri.UpFileInfoList>
    
    </p>
    @if (isLoading)
    {
        <p>文件上传中......</p>
    }
    else
    {
        <ul>
            @foreach (var file in loadedFiles)
            {
                <li>
                    <ul>
                        <li>文件名：@file.Name</li>
                        <li>最后修改时间：@file.LastModified.ToString()</li>
                        <li>文件大小(byte)：@file.Size</li>
                        <li>文件类型：@file.ContentType</li>
                    </ul>
                </li>
               
            }
     
        </ul>
    }
     
    @code {
    
        private List<IBrowserFile> loadedFiles = new();
        private long maxFileSize = 1024 * 18;
    
        private int maxAllowedFiles = 2;
        private bool isLoading;
    
        private string Message = string.Empty;
        private BlazorAppDemo.Pages.Descri.UpFileInfoList upfileList;
    
        private async Task LoadFiles(InputFileChangeEventArgs e)
        {
    
            isLoading = true;
            loadedFiles.Clear();
            foreach (var file in e.GetMultipleFiles(maxAllowedFiles))
    
            {
                try
                {
    
                    ModelStateDictionary modelState = new ModelStateDictionary();
                    loadedFiles.Add(file);
    
                    FileHelpers.db = dbFactory.CreateDbContext();
                    string result=  await FileHelpers.ProcessFormFile(file, modelState, Environ, maxFileSize);
                    if (string.IsNullOrEmpty(result))
                    {
                        Message = "上传成功！";
                        RefterDataHandler();
     
                    }else
                        Message = "上传失败！";
                }
                catch (Exception ex)
                {
                    Message = ex.Message;
     
                }
    
            }
            isLoading = false;
        }
    
        public void RefterDataHandler()
        {
            StateHasChanged();
            upfileList.BindData();
        }
    
    
    }

![9e726d4b2d0307b4f0e859cdd718e48a.gif][]

3.我们在Visual Studio 2022中切换到UpFileInfoList.razor页面，并在ShowConfirmMsg方法中调用RefterData方法 。具体代码如下。

![a86f1c3fc32d9b12e897193ebae12d11.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();
        [Parameter]
        public EventCallback RefterData { get; set; }
        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);
             
                await RefterData.InvokeAsync();
            }
        }
     
    }

![cff01a1cb8f4a069d0a03de88504cfa8.gif][]

4.在Visual Studio 2022中按F5运行图书租赁管理应用程序，然后在浏览器中点击“上传文件”菜单。如下图。

![a617c29d4b51577fc79b517b9b332001.png][]

5. 在浏览器的“多文件上传示例”页面中使用鼠标左键点击“选择文件”按钮，在弹出的对话框中，选择“1K文件”，文件将被上传，文件信息会在上传成功之后，及时更新到“已上传文件列表”中。如下图。

![4f7540419f06e28ac4e95e4ddcd4ab16.png][]

6. 在已上传文件列表中，点击要删除的上传文件记录前面的删除按钮。系统会弹出一个“你是否确认要删除当前文件”的提示信息，如下图。

![90246c4f4ecba7843668e6bde88b3f91.png][]

7. 使用鼠标左键点击“确定”按钮，系统将把文件信息删除，同时刷新“已上传文件列表”信息。如下图。

![f1d4da7ce85f280a8c59f1bcd679a006.png][]

[_ASP.NET Core Blazor_]: https://www.cnblogs.com/chillsrc/p/17034603.html
[8e121c9ee229a4477e6a7bcac66d7ede.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b3ee9046efea4c889bd415a3f354f18f.png
[8710635da868512fd4bfea78848973a1.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/7894500b8653481da7ae8e0fc277e72e.png
[9e726d4b2d0307b4f0e859cdd718e48a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/a78fa28d0fdb4f1eae505534f6baba27.png
[a86f1c3fc32d9b12e897193ebae12d11.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/01d0aea360b24628bc8eeef7cd1aca78.png
[cff01a1cb8f4a069d0a03de88504cfa8.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/02b7e6c1b53b4f39820c10635b5dc432.png
[a617c29d4b51577fc79b517b9b332001.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/c977719960a44b09954783751b1d9b44.png
[4f7540419f06e28ac4e95e4ddcd4ab16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/c1e23951baad44f7b29716f0d1847dee.png
[90246c4f4ecba7843668e6bde88b3f91.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/8a331fdf554d4cd6acd9b59488e8dbd9.png
[f1d4da7ce85f280a8c59f1bcd679a006.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/72dfe084490e48b7ad992c0e366b5247.png