目前項目當中存有 .NET Framework 和 .NET Core 兩種類型的項目，但是都需要進行容器化將其分別部署在 Windows 集群和 Linux 集群當中。在 WCF 進行容器化的時候，遇到了以下幾個問題： 1. 某些服務使用到了 WSHttpBinding 保護服務安全，要在容器里... ...
學習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組件頁面
- 在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. 我們在“多文件上傳示例”頁面中選擇一個上傳文件，然後應用程式會自動上傳文件，並會在資料庫中記錄了一上傳文件的相關信息，並會在頁面中顯示一個已經上傳的文件列表。如下圖。
備註：雖然我們實現了上傳文件信息的記錄，但是現在還是存在一個數據刷新等小問題，等待解決。
