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

野性酷女 2024-03-16 13:49 13阅读 0赞

## 六、添加文件上传列表Blazor组件页面 ##

1.  在Visual Studio 2022的解决方案资源管理器中，找到“Pages”文件夹，然后点击鼠标右键在弹出菜单中选择“添加-->新建文件夹”，然后把文件夹命名为“Descri”。如下图。

![68b50f5ba2a5238bfe89ad60e70c109c.png][]

2. 在“Descri”文件夹上使用鼠标右键单击，在弹出菜单中选择“添加-->Razor组件…”，

3.在弹出对话框中选择“Razor组件”，在名称输入框中输入“UpFileInfoList.razor”，然后点击“添加”按钮。如下图。

![7e509c295c040cab1805d0691e3e20e1.png][]

4.UpFileInfoList这个页面用于显示已经上传的文件信息，这个页面的具体内容如下：

![b6a91e4b5f7231161c866d317f71f07b.gif][]

@page "/Descri/UpFileInfoList"
    @using BlazorAppDemo.Models
    @using BlazorAppDemo.Utils
    @using Microsoft.EntityFrameworkCore
     
    @inject IDbContextFactory<BookContext> dbFactory
    
     
    
    <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="@(e => DeleteFile(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()
        {
    
            _context = dbFactory.CreateDbContext();
            fileDescs = _context.FileDescribe.ToList();
            await base.OnInitializedAsync();
        }
    
        public void DeleteFile(MouseEventArgs e, int Id)
        {
    
            List<int> listId = new();
            listId.Add(Id);
    
            var entity = _context.Find<FileDescribe>(listId.ToArray());
            _context.Remove<FileDescribe>(entity);
           _context.SaveChangesAsync();
    
        }
    }

![53826f26eb5dc83c561c17bb84847930.gif][]

七、实现Html.DisplayNameFor功能

在ASP.NET CORE MVC中有一个非常有用的类Html，其中有一个方法DisplayNameFor(m=>m.Name)，根据实体类中属性上的特性Display所描述的信息，在页面上显示。在Blazor中默认没有这个功能，需要我们自己来实现。

1. 如第六点中的代码，[我们使用@HtmlHelper.GetDisplayName][HtmlHelper.GetDisplayName]方法来显示每个类属性的名称。 FileDescribe实体类中的 Display 特性提供这属性需要在页面上的显示值。 例如，Name属性通过特性\[Display(Name = "文件名称")\]进行设置，因此呈现窗体时会显示“文件名称”。如下图。

![a421cb8eacb7614c0ca2f86c0c867e43.png][]

2.接下来我们来实现这个辅助类，在Visual Studio 2022的解决方案资源管理器中，选中“Utils”文件夹，单击鼠标右键，在弹出的快捷菜单中选择“添加-->类”，在弹出的“添加新项”对话框的名称输入框中，输入“HtmlHelper”，然后使用鼠标左键点击“添加”按钮，创建一个新的类，代码如下 ：

![61d218c175255541be10720ba67b4a3b.gif][]

using System.ComponentModel.DataAnnotations;
    using System.ComponentModel;
    using System.Linq.Expressions;
    using System.Reflection;
     
    namespace BlazorAppDemo.Utils
    {
        public static class HtmlHelper
        {
            //an use the below extension method:
    
    
    public static string GetDisplayName<TModel, TProperty>(this TModel model, Expression<Func<TModel, TProperty>> expression)
            {
                Type type = typeof(TModel);
    
    
                MemberExpression memberExpression = (MemberExpression)expression.Body;
                string propertyName = ((memberExpression.Member is PropertyInfo)? memberExpression.Member.Name : null);
     
    
                DisplayAttribute attr;
                attr = (DisplayAttribute)type.GetProperty(propertyName).GetCustomAttributes(typeof(DisplayAttribute), true).SingleOrDefault();
     
              
                if (attr == null)
                {
    
                    MetadataTypeAttribute metadataType = (MetadataTypeAttribute)type.GetCustomAttributes(typeof(MetadataTypeAttribute), true).FirstOrDefault();
                    if (metadataType != null)
                    {
                        var property = metadataType.MetadataClassType.GetProperty(propertyName);
                        if (property != null)
                        {
    
                            attr = (DisplayAttribute)property.GetCustomAttributes(typeof(DisplayNameAttribute), true).SingleOrDefault();
                        }
                    }
                }
                return (attr != null) ? attr.Name : String.Empty;
            }
        }
       
    }

![8cbe9fcb7565b2804154d56db1551f60.gif][]

3. 在Visual Studio 2022的菜单栏上，找到“调试-->开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序，并在浏览器中打开Home页面，我们使用鼠标点击左边的菜单栏上的“上传文件”菜单项，页面会进入“FileUpload1”页面，我们会看到我们写的图书列表页面，如下图。

![7f8603e799a4760c9dbacec7116314d1.png][]

5. 我们在“多文件上传示例”页面中选择一个上传文件，然后应用程序会自动上传文件，并会在数据库中记录了一上传文件的相关信息，并会在页面中显示一个已经上传的文件列表。如下图。

![f72c73df4289bc3e3876bdaa679da371.png][]

备注：虽然我们实现了上传文件信息的记录，但是现在还是存在一个数据刷新等小问题，等待解决。

1. 在FileUpload1.razor的html代码中，添加 <BlazorAppDemo.Pages.Descri.UpFileInfoList RefterData="RefterDataHandler" @ref="@upfileList"></BlazorAppDemo.Pages.Descri.UpFileInfoList>，将已上传文件列表组件，添加到“上传文件”页面中。

2.在FileUpload1.razor的@code代码中添加upfileList变量，代码如下：

private BlazorAppDemo.Pages.Descri.UpFileInfoList upfileList;

[68b50f5ba2a5238bfe89ad60e70c109c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9f87f44e5f3b4183b963a8a525039311.png
[7e509c295c040cab1805d0691e3e20e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/58b1d62aa22144ab994254ede932ab39.png
[b6a91e4b5f7231161c866d317f71f07b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/020f26d610ad45b4be3481490a7289c8.png
[53826f26eb5dc83c561c17bb84847930.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/114348cb4fee4c12b1e0bc591b8e21db.png
[HtmlHelper.GetDisplayName]: mailto:%E6%88%91%E4%BB%AC%E4%BD%BF%E7%94%A8@HtmlHelper.GetDisplayName
[a421cb8eacb7614c0ca2f86c0c867e43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d260072616654985b5d42d0d5f12405a.png
[61d218c175255541be10720ba67b4a3b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/56a3f65388d84ba6bf4f85663cfa6f41.png
[8cbe9fcb7565b2804154d56db1551f60.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/96a85cf8c42c4b64ba00e883ccc2c6f0.png
[7f8603e799a4760c9dbacec7116314d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b0506831eb864efd94ae16bcbb62899c.png
[f72c73df4289bc3e3876bdaa679da371.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/fc2ff26b542d4afa832ead5ba45383ec.png