面试题：C#中Blazor应用如何与WebAssembly交互数据

Question

在C#的Blazor应用中，简要描述如何在Blazor组件与WebAssembly之间进行数据传递与交互，包括常见的方法和机制。

Answer 1

1. 组件间传递数据

• 父传子：
  • 在父组件中，通过属性绑定将数据传递给子组件。例如，在父组件的 .razor 文件中：

  <ChildComponent MyData="@parentData" />
  @code {
      private string parentData = "Hello from parent";
  }
  

  • 在子组件 ChildComponent.razor 中定义接收属性：

  @code {
      [Parameter]
      public string MyData { get; set; }
  }
  

• 子传父：
  • 子组件通过事件回调通知父组件。首先在子组件中定义事件和回调委托，例如在 ChildComponent.razor 中：

  <button @onclick="SendDataToParent">Send Data</button>
  @code {
      [Parameter]
      public EventCallback<string> OnDataSent { get; set; }
      private async Task SendDataToParent()
      {
          await OnDataSent.InvokeAsync("Data from child");
      }
  }
  

  • 在父组件中接收并处理事件：

  <ChildComponent OnDataSent="@HandleChildData" />
  @code {
      private async Task HandleChildData(string data)
      {
          // 处理来自子组件的数据
          Console.WriteLine($"Received from child: {data}");
      }
  }
  

2. Blazor组件与WebAssembly交互

• 调用JavaScript函数：
  • 使用 IJSRuntime 接口。在组件中注入该接口：

  @inject IJSRuntime JSRuntime
  @code {
      protected override async Task OnInitializedAsync()
      {
          await JSRuntime.InvokeVoidAsync("jsFunction", "parameter");
      }
  }
  

  • 其中 jsFunction 是在JavaScript文件（如 wwwroot/js/site.js）中定义的函数：

  window.jsFunction = function (param) {
      console.log('Received from Blazor: ', param);
  };
  

• JavaScript调用Blazor方法：
  • 先在Blazor组件中注册可调用的方法。例如：

  @inject IJSRuntime JSRuntime
  @implements<IAsyncDisposable>
  private DotNetObjectReference<MyComponent>? dotNetHelper;
  protected override async Task OnInitializedAsync()
  {
      dotNetHelper = DotNetObjectReference.Create(this);
      await JSRuntime.InvokeVoidAsync("registerBlazorFunction", dotNetHelper);
  }
  [JSInvokable]
  public Task<string> GetDataFromBlazor()
  {
      return Task.FromResult("Data from Blazor");
  }
  public async ValueTask DisposeAsync()
  {
      if (dotNetHelper != null)
      {
          await JSRuntime.InvokeVoidAsync("unregisterBlazorFunction", dotNetHelper);
          dotNetHelper.Dispose();
      }
  }
  

  • 在JavaScript中注册和调用该方法：

  function registerBlazorFunction(dotNetHelper) {
      window.blazorFunction = function () {
          dotNetHelper.invokeMethodAsync('GetDataFromBlazor')
          .then(data => {
              console.log('Received from Blazor: ', data);
          });
      };
  }
  function unregisterBlazorFunction(dotNetHelper) {
      window.blazorFunction = null;
      dotNetHelper.dispose();
  }