基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目
基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身，让它跑起来
基于 abp vNext 和 .NET Core 开发博客项目 - 完善与美化，Swagger登场
基于 abp vNext 和 .NET Core 开发博客项目 - 数据访问和代码优先
基于 abp vNext 和 .NET Core 开发博客项目 - 自定义仓储之增删改查
基于 abp vNext 和 .NET Core 开发博客项目 - 统一规范API，包装返回模型
基于 abp vNext 和 .NET Core 开发博客项目 - 再说Swagger，分组、描述、小绿锁
基于 abp vNext 和 .NET Core 开发博客项目 - 接入GitHub，用JWT保护你的API
基于 abp vNext 和 .NET Core 开发博客项目 - 异常处理和日志记录
基于 abp vNext 和 .NET Core 开发博客项目 - 使用Redis缓存数据
基于 abp vNext 和 .NET Core 开发博客项目 - 集成Hangfire实现定时任务处理
基于 abp vNext 和 .NET Core 开发博客项目 - 用AutoMapper搞定对象映射
基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战（一）
基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战（二）
基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战（三）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（一）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（二）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（三）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（四）
基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇（五）
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（一）
上一篇搭建了 Blazor 项目并将整体框架改造了一下，本篇将完成用 C# 代码代替 JavaScript 实现几个小功能，说是代替但并不能完全不用 JavaScript，应该说是尽量不用吧。
二维码显示与隐藏可以看到，当我鼠标移入的时候显示二维码，移出的时候隐藏二维码。
这个功能如果是用JavaScript来完成的话，肯定首先想到的是HTML的 Mouse 事件属性，那么在Blazor中也是一样的，给我们实现了各种on*事件。
打开index.razor页面，给微信图标那个 NavLink 标签添加两个事件，@onmouseover和@onmouseout。
... <NavLink title="扫码关注微信公众号：『阿星Plus』查看更多。" @onmouseover="Hover" @onmouseout="Hover"> <i></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> <img src="http://static.meowv.com/images/wx_qrcode.jpg" /> </div> ...大功告成，index.razor完整代码如下：
@page "http://www.likecs.com/" <div> <div> <div> <div> <a href="javascript:;"><img src="http://static.meowv.com/images/avatar.jpg"></a> </div> <div>阿星Plus</div> <div> <p> 生命不息，奋斗不止 <br>Cease to struggle and you cease to live </p> </div> <div> <NavLink title="Posts" href="http://www.likecs.com/default/index/url/posts"> <i></i> </NavLink> <NavLink target="_blank" title="Notes" href="http://notes.meowv.com/"> <i></i> </NavLink> <NavLink target="_blank" title="API" href="http://api.meowv.com/"> <i></i> </NavLink> <NavLink title="Manage" href="http://www.likecs.com/account/auth"> <i></i> </NavLink> <NavLink target="_blank" title="Github" href="http://github.com/Meowv/"> <i></i> </NavLink> <NavLink title="扫码关注微信公众号：『阿星Plus』查看更多。" @onmouseover="Hover" @onmouseout="Hover"> <i></i> </NavLink> <div> <img src="http://static.meowv.com/images/wx_qrcode.jpg" /> </div> </div> </div> </div> </div> @code { /// <summary> /// 是否隐藏 /// </summary> private bool IsHidden = true; /// <summary> /// 二维码CSS /// </summary> private string QrCodeCssClass => IsHidden ? "hidden" : null; /// <summary> /// 鼠标移入移出操作 /// </summary> private void Hover() => IsHidden = !IsHidden; } 菜单显示与隐藏