基於 abp vNext 和 .NET Core 開發部落格專案 - Blazor 實戰系列（二）
阿新 • • 發佈：2020-06-10
## 系列文章
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)**
---
上一篇搭建了 Blazor 專案並將整體框架改造了一下，本篇將完成用 C# 程式碼代替 JavaScript 實現幾個小功能，說是代替但並不能完全不用 JavaScript，應該說是儘量不用吧。
## 二維碼顯示與隱藏
可以看到，當我滑鼠移入的時候顯示二維碼，移出的時候隱藏二維碼。
這個功能如果是用JavaScript來完成的話，肯定首先想到的是HTML的 Mouse 事件屬性，那麼在Blazor中也是一樣的，給我們實現了各種`on*`事件。
開啟`index.razor`頁面，給微信圖示那個 NavLink 標籤新增兩個事件，`@onmouseover`和`@onmouseout`。
```html
...
...
```
當滑鼠移入移出的時候都執行我們自定義的一個方法`Hover()`。
C# 程式碼寫在`@code{}`花括號中，實現顯示和隱藏原理是利用css，預設是隱藏的，當顯示的時候將具有隱藏屬性的class值去掉就可以了。
所以，可以新增兩個欄位，一個用於判斷當前是否處於隱藏狀態，一個用來儲存class的值。
```CSharp
///
/// 是否隱藏
///
private bool IsHidden = true;
///
/// 二維碼CSS
///
private string QrCodeCssClass => IsHidden ? "hidden" : null;
```
當`IsHidden = true`，`QrCodeCssClass = "hidden"`，當`IsHidden = false`，`QrCodeCssClass = null`。
那麼在`Hover()`方法中，不斷修改`IsHidden`的值就可以實現效果了。
```CSharp
///
/// 滑鼠移入移出操作
/// 
...
```
大功告成，`index.razor`完整程式碼如下：
```html
@page "/"
阿星Plus
@code {
///
/// 是否隱藏
///
private bool IsHidden = true;
///
/// 二維碼CSS
///
private string QrCodeCssClass => IsHidden ? "hidden" : null;
///
/// 滑鼠移入移出操作
///
private void Hover() => IsHidden = !IsHidden;
}
```
## 選單顯示與隱藏
選單是在小螢幕上才會出現的，相信看完了二維碼的顯示與隱藏，這個選單的顯示與隱藏就好辦了吧，實現方法是一樣的，選單按鈕是在頭部元件`Header.razor`中的，包括主題切換功能，所以下面程式碼都在`Header.razor`裡面。
```CSharp
@code {
///
/// 下拉選單是否開啟
///
private bool collapseNavMenu = false;
///
/// 導航選單CSS
///
private string NavMenuCssClass => collapseNavMenu ? "active" : null;
///
/// 顯示/隱藏 選單
///
private void ToggleNavMenu() => collapseNavMenu = !collapseNavMenu;
}
```
預設是不開啟的，`collapseNavMenu = false`。然後根據`collapseNavMenu`值為`NavMenuCssClass`給定不同的class。
```html
...
...
```
大功告成，`index.razor`完整程式碼如下：
```html
@page "/"
阿星Plus
生命不息，奮鬥不止
Cease to struggle and you cease to live
@code {
///