一：背景 1. 背景 前段時間有位朋友咨詢說他的程式出現了非托管記憶體泄漏，說裡面有很多的 HEAP_BLOCK 都被標記成了 Internal 狀態，而且 size 都很大， 讓我幫忙看下怎麼回事？ 比如下麵這樣。 1cbea000: 42000 . 42000 [101] - busy (41fe ...
學習ASP.NET Core Blazor編程系列一——綜述 學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式（上） 學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式（中）
學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式（下）
上一篇文章中我們已經創建了書籍租賃管理系統中所需要的圖書信息表，本文介紹一下如何在blazor中呈現圖書信息列表。
1. 在Visual Studio 2022的解決方案資源管理器中，滑鼠右鍵單擊“Pages”文件夾。在彈出菜單中選擇，添加-->Razor組件。如下圖。
2.在彈出對話框，名稱中輸入BookIndex.razor。如下圖。
3. 在Visual Studio 2022的解決方案資源管理器中，滑鼠左鍵雙擊“Pages\BookIndex.razor”文件，在文本編輯器中打開，在文件的頂部添加@page指令。代碼如下。
@page "/BookIndex"
<PageTitle>圖書列表</PageTitle>
<h3>圖書列表</h3>
@code {
}
4. 在Visual Studio 2022的解決方案資源管理器中，滑鼠左鍵雙擊“Shared\NavMenu.razor”文件，在文本編輯器中打開，我們在此文中添加指向BookIndex的菜單。具體代碼如下：
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">BlazorAppDemo</a>
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="BookIndex">
<span class="oi oi-list-rich" aria-hidden="true"></span> 圖書列表
</NavLink>
</div>
</nav>
</div>
@code {
private bool collapseNavMenu = true;
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
4. 在Visual Studio 2022的菜單欄上，找到“生成à生成解決方案”，通過Vs2022的生成操作，測試我們寫的代碼有沒有問題。
5.在Visual Studio 2022 的文本編輯器中打開“Pages\BookIndex.razor”文件，輸入以下代碼。如下圖。
@page "/BookIndex"
@using BlazorAppDemo.Models
<PageTitle>圖書列表</PageTitle>
<h3>圖書列表</h3>
<table class="table-responsive" width="90%">
<tr><td>Name</td>
<td>Author</td>
<td>Price</td>
<td>ReleaseDate</td>
<td>StockQty</td>
<td>Qty</td>
</tr>
@foreach (var item in books)
{
<tr>
<td>@item.Name</td>
<td>@item.Author</td>
<td>@item.Price</td>
<td>@item.ReleaseDate</td>
<td>@item.StockQty</td>
<td>@item.Qty</td>
</tr>
}
</table>
@code {
private List<Book> books = new List<Book>();
}
6. 在Visual Studio 2022的菜單欄上，找到“調試à開始調試”或是按F5鍵，Visual Studio 2022會生成BlazorAppDemo應用程式，併在瀏覽器中打開Home頁面，我們使用滑鼠點擊左邊的菜單欄上的“圖書列表”菜單項，頁面會進入“BookIndex”頁面，我們會看到我們寫的圖書列表頁面，如下圖。
