基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（二）
上一篇搭建了 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> <div class="description"> <p> 生命不息，奋斗不止 <br>Cease to struggle and you cease to live </p> </div> <div class="links"> <NavLink class="link-item" title="Posts" href="posts"> <i class="iconfont iconread"></i> </NavLink> <NavLink target="_blank" class="link-item" title="Notes" href="https://notes.meowv.com/"> <i class="iconfont iconnotes"></i> </NavLink> <NavLink target="_blank" class="link-item" title="API" href="https://api.meowv.com/"> <i class="iconfont iconapi"></i> </NavLink> <NavLink class="link-item" title="Manage" href="/account/auth"> <i class="iconfont iconcode"></i> </NavLink> <NavLink target="_blank" class="link-item" title="Github" href="https://github.com/Meowv/"> <i class="iconfont icongithub"></i> </NavLink> <NavLink class="link-item weixin" title="扫码关注微信公众号：『阿星Plus』查看更多。" @onmouseover="Hover" @onmouseout="Hover"> <i class="iconfont iconweixin"></i> </NavLink> <div class="qrcode @QrCodeCssClass"> <img src="https://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;}
菜单显示与隐藏
菜单是在小屏幕上才会出现的，相信看完了二维码的显示与隐藏，这个菜单的显示与隐藏就好办了吧，实现方法是一样的，菜单按钮是在头部组件Header.razor中的，包括主题切换功能，所以下面代码都在Header.razor里面。
@code { /// <summary> /// 下拉菜单是否打开 /// </summary> private bool collapseNavMenu = false; /// <summary> /// 导航菜单CSS /// </summary> private string NavMenuCssClass => collapseNavMenu ? "active" : null; /// <summary> /// 显示/隐藏 菜单 /// </summary> private void ToggleNavMenu() => collapseNavMenu = !collapseNavMenu;}
默认是不打开的，collapseNavMenu = false。然后根据collapseNavMenu值为NavMenuCssClass给定不同的class。
...<nav class="navbar-mobile"> <div class="container"> <div class="navbar-header"> <div> <NavLink class="menu-item" href="" Match="NavLinkMatch.All">