Blazor 一键 onclick 事件执行 C# 和 JS 函数答案

【问题标题】：Blazor execute C# and JS function in one button onclick eventBlazor 一键 onclick 事件执行 C# 和 JS 函数
【发布时间】：2022-07-25 18:31:06
【问题描述】：

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

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

还有一个按钮，它执行 C# 并根据布尔值切换图标：

<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#？

【问题讨论】：

您是要执行两个功能还是要触发两个按钮？
我想一键执行JS函数和C#代码。当我按下它时，它会同时执行

标签： javascript c# html blazor

【解决方案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 函数时，将函数名作为第一个参数传递，然后是所有参数

【讨论】：