基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列（四）
阿新 • • 發佈：2020-06-12
## 系列文章
1. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案](https://www.cnblogs.com/meowv/p/12896177.html)**
2. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 給專案瘦身，讓它跑起來](https://www.cnblogs.com/meowv/p/12896898.html)**
3. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 完善與美化，Swagger登場](https://www.cnblogs.com/meowv/p/12909558.html)**
4. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 資料訪問和程式碼優先](https://www.cnblogs.com/meowv/p/12913676.html)**
5. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 自定義倉儲之增刪改查](https://www.cnblogs.com/meowv/p/12916613.html)**
6. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 統一規範API，包裝返回模型](https://www.cnblogs.com/meowv/p/12924409.html)**
7. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 再說Swagger，分組、描述、小綠鎖](https://www.cnblogs.com/meowv/p/12924859.html)**
8. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 接入GitHub，用JWT保護你的API](https://www.cnblogs.com/meowv/p/12935693.html)**
9. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 異常處理和日誌記錄](https://www.cnblogs.com/meowv/p/12943699.html)**
10. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 使用Redis快取資料](https://www.cnblogs.com/meowv/p/12956696.html)**
11. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 整合Hangfire實現定時任務處理](https://www.cnblogs.com/meowv/p/12961014.html)**
12. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 用AutoMapper搞定物件對映](https://www.cnblogs.com/meowv/p/12966092.html)**
13. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰（一）](https://www.cnblogs.com/meowv/p/12971041.html)**
14. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰（二）](https://www.cnblogs.com/meowv/p/12974439.html)**
15. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 定時任務最佳實戰（三）](https://www.cnblogs.com/meowv/p/12980301.html)**
16. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（一）](https://www.cnblogs.com/meowv/p/12987623.html)**
17. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（二）](https://www.cnblogs.com/meowv/p/12994914.html)**
18. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（三）](https://www.cnblogs.com/meowv/p/13039883.html)**
19. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（四）](https://www.cnblogs.com/meowv/p/13043084.html)**
20. **[基於 abp vNext 和 .NET Core 開發部落格專案 - 部落格介面實戰篇（五）](https://www.cnblogs.com/meowv/p/13046603.html)**
21. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列（一）](https://www.cnblogs.com/meowv/p/13061975.html)**
22. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列（二）](https://www.cnblogs.com/meowv/p/13065295.html)**
23. **[基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列（三）](https://www.cnblogs.com/meowv/p/13081035.html)**
---
上一篇完成了部落格的分頁查詢文章列表頁面的資料繫結和分頁功能，本篇將繼續完成剩下的幾個頁面。
在開始主題之前重新解決上一篇的最後一個問題，當點選了頭部元件的`/posts`連結時直接強制重新整理了頁面，經過檢視文件和實踐有了更好的解決方案。
先將頭部元件`Header.razor`中的`NavLink`恢復成`Posts `，不需要點選事件了。
然後在`Posts.razor`中新增生命週期函式`OnParametersSetAsync()`，在初始化完成後執行。
```csharp
///
/// 初始化完成後執行
///
///
/// categories
/// > categories;
///
/// 初始化
///
protected override async Task OnInitializedAsync()
{
// 獲取資料
categories = await Http.GetFromJsonAsync>>($"/blog/categories");
}
}
```
當獲取到資料的時候進行繫結，沒有資料的時候還是顯示載入中的元件`
(@item.Count)
}
}
else
{
/// tags
///
private ServiceResult> tags;
///
/// 初始化
///
protected override async Task OnInitializedAsync()
{
// 獲取資料
tags = await Http.GetFromJsonAsync>>($"/blog/tags");
}
}
```
```html
@if (tags == null)
{
/// friendlinks
///
private ServiceResult> friendlinks;
///
/// 初始化
///
protected override async Task OnInitializedAsync()
{
// 獲取資料
friendlinks = await Http.GetFromJsonAsync>>($"/blog/friendlinks");
}
}
```
```html
@if (friendlinks == null)
{
/// 分類名稱
///
private string categoryName;
///
/// 文章列表資料
///
private ServiceResult> posts;
```
然後在`OnInitializedAsync()`初始化方法中呼叫API獲取資料，賦值給變數。
```csharp
///
/// 初始化
///
protected override async Task OnInitializedAsync()
{
// TODO:獲取資料,可以在API中合併這兩個請求。
var category = await Http.GetFromJsonAsync>($"/blog/category?name={name}");
posts = await Http.GetFromJsonAsync>>($"/blog/posts/category?name={name}");
if (category.Success)
{
categoryName = category.Result;
}
}
```
有了資料，直接在頁面上進行迴圈繫結。
```html
@if (posts == null)
{
@post.Title
@post.CreationTime
}
}
}
else
{
/// 標籤名稱引數
///
[Parameter]
public string name { get; set; }
///
/// 標籤名稱
///
private string tagName;
///
/// 文章列表資料
///
private ServiceResult> posts;
///
/// 初始化
///
protected override async Task OnInitializedAsync()
{
// TODO:獲取資料,可以在API中合併這兩個請求。
var tag = await Http.GetFromJsonAsync>($"/blog/tag?name={name}");
posts = await Http.GetFromJsonAsync>>($"/blog/posts/tag?name={name}");
if (tag.Success)
{
tagName = tag.Result;
}
}
}
```
```html
@if (posts == null)
{
@post.Title
@post.CreationTime
}
}
}
else
{