基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（二）

系列文章

1. 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目
2. 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身，让它跑起来
3. 基于 abp vNext 和 .NET Core 开发博客项目 - 完善与美化，Swagger登场
4. 基于 abp vNext 和 .NET Core 开发博客项目 - 数据访问和代码优先
5. 基于 abp vNext 和 .NET Core 开发博客项目 - 自定义仓储之增删改查
6. 基于 abp vNext 和 .NET Core 开发博客项目 - 统一规范API，包装返回模型
7. 基于 abp vNext 和 .NET Core 开发博客项目 - 再说Swagger，分组、描述、小绿锁
8. 基于 abp vNext 和 .NET Core 开发博客项目 - 接入GitHub，用JWT保护你的API
9. 基于 abp vNext 和 .NET Core 开发博客项目 - 异常处理和日志记录
10. 基于 abp vNext 和 .NET Core 开发博客项目 - 使用Redis缓存数据
11. 基于 abp vNext 和 .NET Core 开发博客项目 - 集成Hangfire实现定时任务处理
12. 基于 abp vNext 和 .NET Core 开发博客项目 - 用AutoMapper搞定对象映射
13. 基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战（一）
14. 基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战（二）
15. 基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战（三）
16. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（一）
17. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（二）
18. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（三）
19. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（四）
20. 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（五）
21. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（一）
22. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（二）
23. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（三）
24. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（四）
25. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（五）
26. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（六）
27. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（七）
28. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（八）
29. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（九）
30. 基于 abp vNext 和 .NET Core 开发博客项目 - 终结篇之发布项目

---

上一篇搭建了 Blazor 项目并将整体框架改造了一下，本篇将完成用 C# 代码代替 JavaScript 实现几个小功能，说是代替但并不能完全不用 JavaScript，应该说是尽量不用吧。

二维码显示与隐藏

可以看到，当我鼠标移入的时候显示二维码，移出的时候隐藏二维码。

这个功能如果是用JavaScript来完成的话，肯定首先想到的是HTML的 Mouse 事件属性，那么在Blazor中也是一样的，给我们实现了各种on*事件。

打开index.razor页面，给微信图标那个 NavLink 标签添加两个事件，@onmouseover和@onmouseout。

...
<NavLink class="link-item weixin" title="扫码关注微信公众号：『阿星Plus』查看更多。" @onmouseover="Hover" @onmouseout="Hover">
    <i class="iconfont iconweixin"></i>
</NavLink>
...

当鼠标移入移出的时候都执行我们自定义的一个方法Hover()。

C# 代码写在@code{}花括号中，实现显示和隐藏原理是利用css，默认是隐藏的，当显示的时候将具有隐藏属性的class值去掉就可以了。

所以，可以添加两个字段，一个用于判断当前是否处于隐藏状态，一个用来存储class的值。

/// <summary>
/// 是否隐藏
/// </summary>
private bool IsHidden = true;

/// <summary>
/// 二维码CSS
/// </summary>
private string QrCodeCssClass => IsHidden ? "hidden" : null;

当IsHidden = true，QrCodeCssClass = "hidden"，当IsHidden = false，QrCodeCssClass = null。

那么在Hover()方法中，不断修改IsHidden的值就可以实现效果了。

/// <summary>
/// 鼠标移入移出操作
/// </summary>
private void Hover() => IsHidden = !IsHidden;

最后将QrCodeCssClass变量赋值给二维码图片所在的div上。

...
<div class="qrcode @QrCodeCssClass">
    <img src="https://static.meowv.com/images/wx_qrcode.jpg" />
</div>
...

大功告成，index.razor完整代码如下：

@page "/"

<div class="main">
    <div class="container">
        <div class="intro">
            <div class="avatar">
                <a href="javascript:;"><img src="https://static.meowv.com/images/avatar.jpg"></a>
            </div>
            <div class="nickname">阿星Plus</div>