Blazor在一键点击事件中执行C#和JS函数

Question

我有一个按钮，它执行JS函数：

<button class="btn-orange btn" onclick="expand(this.closest('.profile'))">JavaScript</button>

还有一个按钮，它执行C#并根据bool:切换图标

<button class="btn-orange btn"
@onclick="@(() =>
{
if (tempBool)
{
tempBool = !tempBool;
}
else
{
tempBool = true;
}
})">
<i class="fa @(tempBool ? "fa-compress" : "fa-expand")" aria-hidden="true"></i>
</button>

我如何将它们组合在一起？

我用OnClientClick事件、JsRuntime.InvokeVoidAsync("expand(this.closest(.profile))");或将两者都放在onclick事件中进行了尝试。

如何在按钮onclick事件中执行JavaScript函数和C#？

我的JavaScript代码我尝试执行

EventPageExpandable.js:

function expand(card) {
card.classList.toggle('profile--expanded');
// If card is not expanded after toggle, add 'unexpanded' class
if (!card.classList.contains('profile--expanded')) card.classList.toggle('profile--unexpanded');
// Else if card is expanded after toggle and still contains 'unexpanded' class, remove 'unexpanded'
else if (card.classList.contains('profile--expanded') && card.classList.contains('profile--unexpanded')) card.classList.toggle('profile--unexpanded');
}

我如何尝试使用JsRuntime:

await JsRuntime.InvokeVoidAsync("EventPageExpandable.expand", "this.closest('.profile')");

还是像这样？但两者都不起作用。

await JsRuntime.InvokeVoidAsync("expand", "this.closest('.profile')");```

Answer 1

注入JSRuntime:

@inject IJSRuntime JsRuntime

绑定按钮的onclick事件：

<button @onclick=ButtonClicked>Test</button>

并执行JavaScript函数：

private async Task ButtonClicked()
{
Console.WriteLine("From C#");
await JsRuntime.InvokeVoidAsync("console.log", "From js");
}

调用JS函数时，将函数名作为第一个参数，然后传递所有参数