James: 本系列為大家介紹如何使用 Blazor 來開發管理后臺，有興趣的朋友歡迎跟著實驗，體驗 Blazor 開發的高效與樂趣。

本系列目錄：

使用 Blazor 開發內部后臺（一）：認識Blazor

使用 Blazor 開發內部后臺（二）：了解 Blazor 組件

使用 Blazor 開發內部后臺（三）：登錄

前言

很多后臺管理系統會采用側邊欄或上方導航組件來實現導航功能，其實也不復雜，但本文介紹另一種簡單直接的選擇：仍使用上中下三層布局，單獨寫一個Home頁面用于導航。這樣的好處在于Home首頁或Layout組件里，不用寫嵌套的結構和處理導航組件的點擊事件。

Card組件

請讀者先自行參考Antd Blazor文檔：網格型內嵌卡片。Card本身是非常簡單的展示組件，而網格型內嵌卡片，可以方便我們快速搭建一個布局整齊的導航欄。先展示一下頁面：

卡片導航

Card的Title用來作為類別的主題，下方的子卡片則展示具體的頁面鏈接。這樣每個頁面的基礎代碼如下：

<Card Title="分類主題名稱" Bordered="true"><CardGrid Style="width: 25%; text-align: center; padding: 0 5px; background-color: whitesmoke;" Hoverable="true"><a href="/MyUrl1" style="font-size:20px">要導航的頁面名1</a></CardGrid><CardGrid Style="width: 25%; text-align: center; padding: 0 5px; background-color: whitesmoke;" Hoverable="true"><a href="/MyUrl2" style="font-size:20px">要導航的頁面名2</a></CardGrid> </Card>

配置和動態化

隨著時間的推進，后臺管理系統通常會加入越來越多的功能，因此也要求導航欄的內容可以根據配置動態展示。

如果使用上述Card組件，則可以很直觀地定義一個Json數據結構：

[{"Title": "用戶管理","Items": [{"Name": "列表查詢","Route": "/user/list","Disabled": true}]},{"Title": "圖書管理","Items": [{"Name": "列表查詢","Route": "/book/list"}]},{"Title": "音頻管理","Items": [{"Name": "列表查詢","Route": "/video/list","Disabled": true}]},{"Title": "新聞管理","Items": [{"Name": "列表查詢","Route": "/news/list"}],"Hide": true},{"Title": "統計分析","Items": [{"Name": "登錄相關","Route": "/analysis/login","Disabled": false},{"Name": "圖書相關","Route": "/analysis/book","Disabled": true},{"Name": "音頻相關","Route": "/analysis/video","Disabled": true},{"Name": "新聞相關","Route": "/analysis/news","Disabled": true}]} ]

這里我增加了額外的Hide和Disabled字段，Hide字段決定是否顯示某個主題，而Disabled字段決定是否啟用某個頁面的導航鏈接（但不隱藏）。對應的Model類如下：

public class HomePageContent{public string Title { get; set; }public HomePageContentItem[] Items { get; set; }public bool Hide { get; set; }}public sealed class HomePageContentItem{public string Name { get; set; }public string Route { get; set; }public bool Disabled { get; set; }}

接著我們要設計如何讓Blazor收到這樣的配置內容，我們可以讓后端以Http接口的方式提供，但我這里介紹一種更直接的辦法，供讀者參考：

在Blazor項目wwwroot文件夾下創建一個uidata文件夾，在里面再創建一個home文件夾，然后創建一個叫navLinks.json的靜態文件用于存儲上述的Json數據。

在Blazor項目Services文件夾（沒有的話自己創建一個），定義一個接口：

public interface IUserInterfaceDataService{Task<HomePageContent[]> LoadHomePageContentsAsync();}

該接口封裝所有類似靜態文件的訪問請求，符合高內聚低耦合的設計。現在添加一個具體類：

internal class UserInterfaceDataService : IUserInterfaceDataService{private const string Root = "/uidata/";private readonly HttpClient _client;public UserInterfaceDataService(HttpClient client){_client = client;}public Task<HomePageContent[]> LoadHomePageContentsAsync() => GetAsync<HomePageContent>("home/naviLinks.json");private async Task<T[]> GetAsync<T>(string path){var data = await _client.GetFromJsonAsync<T[]>(Root + path);return data;}}

再次提醒：別忘了依賴注入！

之后，我們讓home.razor頁面在初始化時，先訪問靜態文件naviLinks.json，然后再根據該文件里的Json數據展示首頁內容。在home.razor.cs里，加入代碼：

public partial class Home{private HomePageContent[] _contentList = Array.Empty<HomePageContent>();protected async override Task OnInitializedAsync(){_contentList = await UIDataService.LoadHomePageContentsAsync();}}

數據可以獲取了，那么如何依賴這樣的結構動態生成頁面呢？Razor語法的易用性就體現出來了：

@page "/home" @inject HttpClient Http @inject IUserInterfaceDataService UIDataService<div style="margin:40px">@foreach (var content in _contentList){@if (!content.Hide){<div style="margin:20px 0"><Card Title=@content.Title Bordered="true">@foreach (var item in content.Items){<CardGrid Style="width: 25%; text-align: center; padding: 0 5px; background-color: whitesmoke;" Hoverable="@(!item.Disabled)">@if (item.Disabled){<span style="font-size:20px;color:dimgray">@item.Name</span>}else{<a href=@item.Route style="font-size:20px">@item.Name</a>}</CardGrid>}</Card></div>}} </div>

基于@if和@for關鍵詞，可以非常簡單地實現HTML代碼的動態生成。

現在我們訪問首頁，Blazor就可以根據靜態文件的配置內容動態生成頁面了。靜態文件的更新不需要重啟后端程序，因此首頁導航欄的更新對用戶和后端來說，都是無感的。有的讀者擔心瀏覽器可能會緩存靜態文件，導致配置更新不及時——解決辦法有很多，例如可以將每次靜態文件的請求鏈接加入一個時間戳的請求參數（.../navLinks.json?t=xxx），或者干脆讓用戶清除瀏覽器頁面緩存（畢竟只是內部用的后臺）。

結束語

下一篇文章準備介紹一下如何使用Antd Blazor組件搭建后臺系統中常見的“條件搜索+列表展示”頁。不過本月雜事很多，應該要過些日子再更了。

今天是八一建軍節，“聚是一團火，散是滿天星”，祝現役、退役的所有軍人朋友們節日快樂！祝偉大的祖國繁榮昌盛！

---

歡迎加入 Blazor 中文社區，共同建設熱愛的技術社區！

QQ群：1012762441

微信群：JamesYengMVP(加我邀請)

總結

以上是生活随笔為你收集整理的使用 Blazor 开发内部后台（四）：基于Card组件快速搭建导航首页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。