基于 abp vnext 和 .net core 开发博客项目 -凯发k8官方网

基于 abp vnext 和 .net core 开发博客项目 - blazor 实战系列（二）

转载于：https://github.com/meowv/blog

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

二维码显示与隐藏

图片

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

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

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

…



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

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

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

///
/// 是否隐藏
///
private bool ishidden = true;

///
/// 二维码css
///
private string qrcodecssclass => ishidden ? “hidden” : null;
当ishidden = true，qrcodecssclass = “hidden”，当ishidden = false，qrcodecssclass = null。

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

///
/// 鼠标移入移出操作
///
private void hover() => ishidden = !ishidden;
最后将qrcodecssclass变量赋值给二维码图片所在的div上。

…

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

@page “/”

阿星plus

生命不息，奋斗不止
cease to struggle and you cease to live

@code {
///
/// 是否隐藏
///
private bool ishidden = true;

///

/// 二维码css ///

private string qrcodecssclass => ishidden ? "hidden" : null;///

/// 鼠标移入移出操作 ///

private void hover() => ishidden = !ishidden;

}

菜单显示与隐藏

图片

菜单是在小屏幕上才会出现的，相信看完了二维码的显示与隐藏，这个菜单的显示与隐藏就好办了吧，实现方法是一样的，菜单按钮是在头部组件header.razor中的，包括主题切换功能，所以下面代码都在header.razor里面。

@code {
///
/// 下拉菜单是否打开
///
private bool collapsenavmenu = false;

///

/// 导航菜单css ///

private string navmenucssclass => collapsenavmenu ? "active" : null;///

/// 显示/隐藏 菜单 ///

private void togglenavmenu() => collapsenavmenu = !collapsenavmenu;

}
默认是不打开的，collapsenavmenu = false。然后根据collapsenavmenu值为navmenucssclass给定不同的class。

…

😍阿星plus  · light

主题切换

图片

哇，这个主题切换真的是一言难尽，当切换主题的时候需要记住当前的主题是什么，当刷新页面或者跳转其他页面的时候，主题状态是需要一致的，默认是白色主题，当切换暗黑色主题后其实是在body上加了一个class。

在blazor实在是不知道用什么办法去动态控制body的样式，所以这里我想到了一个办法，写几个全局的javascript方法，然后再blazor中调用，要知道，他们是可以互相调用的，于是问题迎刃而解。

添加app.js文件，放在 /wwwroot/js/ 下面。

var func = window.func || {};

func = {
setstorage: function (name, value) {
localstorage.setitem(name, value);
},
getstorage: function (name) {
return localstorage.getitem(name);
},
switchtheme: function () {
var currenttheme = this.getstorage(‘theme’) || ‘light’;
var isdark = currenttheme === ‘dark’;

if (isdark) {document.queryselector('body').classlist.add('dark-theme');} else {document.queryselector('body').classlist.remove('dark-theme');} }

};
这里写了三个方法，设置localstorage：setstorage(name,value)，获取localstorage：getstorage(name)，切换主题：switchtheme()，localstorage 是浏览器以 name:value 形式的本地存储对象。

switchtheme主要做的事情就是，判断当前主题如果是暗黑，就给body加上对应的class，如果不是就去掉。

然后在 index.html 中引用。

…

... 有了这个三个全局的javascript方法，切换主题就变得简单多了，看代码。

…
///
/// 当前主题
///
private string currenttheme;

///
/// 初始化
///
///
protected override async task oninitializedasync()
{
currenttheme = await jsruntime.invokeasync(“window.func.getstorage”, “theme”) ?? “light”;

await jsruntime.invokevoidasync("window.func.switchtheme");

}
…
注意在blazor调用javascript方法需要注入ijsruntime接口，@inject ijsruntime jsruntime。

新建一个变量currenttheme，在生命周期函数初始化的时候去调用javascript中的getstorage方法，获取当前主题，考虑到第一次访问的情况，可以给一个默认值为light，表示白色主题，然后再去调用switchtheme，执行切换主题的方法。这样页面就会根据localstorage的值来确定当前的主题。

…
///
/// 切换主题
///
private async task switchtheme()
{
currenttheme = currenttheme == “light” ? “dark” : “light”;

await jsruntime.invokevoidasync("window.func.setstorage", "theme", currenttheme);await jsruntime.invokevoidasync("window.func.switchtheme");

}
…
switchtheme()是切换主题的方法，当我们点击input按钮时可以任意切换，并且主题还要实时跟着变化。

当点击按钮执行switchtheme()时候改变currenttheme的值，然后将currenttheme传递给javascript方法setstorage，最后再次执行切换主题的javascript方法即可。

此时变量currenttheme也发挥了不少作用，在小屏幕下会显示当前主题的名称，dark or light，可以直接将currenttheme在html中赋值即可。

并且我们input是checkbox类型，当是黑色主题的时候需要时选中的状态，白色主题的时候不选中，这里就可以利用checked属性这样写：checked="@(currenttheme == “dark”)"。

... ...

优化代码

现在看起来乱乱的，并且设置获取localstorage属于公共的方法，说不定以后也能用到，我们将其封装一下，便于日后的调用，不然要写好多重复的代码。

在blazor项目根目录添加文件夹commons，在文件夹下添加一个common.cs，目前用到了ijsruntime，用构造函数注入，然后写几个公共的方法。

//common.cs
using microsoft.jsinterop;
using system.threading.tasks;

namespace meowv.blog.blazorapp.commons
{
public class common
{
private readonly ijsruntime _jsruntime;

public common(ijsruntime jsruntime){_jsruntime = jsruntime;}///

/// 执行无返回值方法///

/// /// /// public async valuetask invokeasync(string identifier, params object[] args){await _jsruntime.invokevoidasync(identifier, args);}///

/// 执行带返回值的方法///

/// /// /// /// public async valuetask invokeasync(string identifier, params object[] args){return await _jsruntime.invokeasync(identifier, args);}///

/// 设置localstorage///

/// /// /// public async task setstorageasync(string name, string value){await invokeasync("window.func.setstorage", name, value);}///

/// 获取localstorage///

/// /// public async task getstorageasync(string name){return await invokeasync("window.func.getstorage", name);} }

}
然后需要在program.cs中注入。

using meowv.blog.blazorapp.commons;
using microsoft.aspnetcore.components.webassembly.hosting;
using microsoft.extensions.dependencyinjection;
using system;
using system.net.http;
using system.threading.tasks;

namespace meowv.blog.blazorapp
{
public class program
{
public static async task main(string[] args)
{
var builder = webassemblyhostbuilder.createdefault(args);
builder.rootcomponents.add(“app”);

builder.services.addtransient(sp => new httpclient { baseaddress = new uri(builder.hostenvironment.baseaddress) });builder.services.addsingleton(typeof(common));await builder.build().runasync();} }

}
紧接着在_imports.razor中注入使用common，@inject commons.common common。

改造一下header.razor，全部代码如下：

😍阿星plus posts categories tags apps

@code {
///
/// 下拉菜单是否打开
///
private bool collapsenavmenu = false;

///

/// 导航菜单css ///

private string navmenucssclass => collapsenavmenu ? "active" : null;///

/// 显示/隐藏 菜单 ///

private void togglenavmenu() => collapsenavmenu = !collapsenavmenu;///

/// 当前主题 ///

private string currenttheme;///

/// 初始化 ///

/// protected override async task oninitializedasync() {currenttheme = await common.getstorageasync("theme") ?? "light";await common.invokeasync("window.func.switchtheme"); }///

/// 切换主题 ///

private async task switchtheme() {currenttheme = currenttheme == "light" ? "dark" : "light";await common.setstorageasync("theme", currenttheme);await common.invokeasync("window.func.switchtheme"); }

}

实现过程比较简单，相信你绝对学会了。本篇就到这里了，未完待续…

开源地址：https://github.com/meowv/blog/tree/blog_tutorial

总结

以上是凯发k8官方网为你收集整理的基于 abp vnext 和 .net core 开发博客项目 - blazor 实战系列（二）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。