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

学习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编程系列十八——文件上传（中）

 

 

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

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

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

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

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

@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" @onclick="@(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();

    }
}

 

七、实现Html.DisplayNameFor功能

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

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

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

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;
        }
    }
   
}

 

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

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

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