.NET MAUI中BlazorWebView组件向XAML后台传参方案咨询

方法一：通过RootComponent传递回调（贴近EventCallback逻辑） #

1. 定义Blazor组件的回调参数 #

在你的表单Blazor组件（如FormComponent.razor）中，声明一个EventCallback类型的参数，用于触发向XAML后台的传值：

<div>
    <input @bind="userInput" placeholder="输入内容" />
    <button @onclick="SubmitToXaml">提交到XAML</button>
</div>

@code {
    [Parameter]
    public EventCallback<string> OnFormDataSubmitted { get; set; }

    private string userInput;

    private async Task SubmitToXaml()
    {
        if (OnFormDataSubmitted.HasDelegate)
        {
            await OnFormDataSubmitted.InvokeAsync(userInput);
        }
    }
}

2. 在XAML中绑定回调方法 #

在承载BlazorWebView的ContentPage的XAML文件里，给RootComponent配置参数，绑定到后台的处理方法：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.FormHostPage">
    <blazor:BlazorWebView HostPage="wwwroot/index.html">
        <blazor:BlazorWebView.RootComponents>
            <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:FormComponent}">
                <blazor:RootComponent.Parameters>
                    <Parameter Name="OnFormDataSubmitted" Value="{x:Bind HandleFormSubmit, Mode=OneWay}" />
                </blazor:RootComponent.Parameters>
            </blazor:RootComponent>
        </blazor:BlazorWebView.RootComponents>
    </blazor:BlazorWebView>
</ContentPage>

3. 在XAML后台实现回调逻辑 #

在FormHostPage.xaml.cs中编写处理方法，接收Blazor组件传递的值：

namespace YourAppNamespace;

public partial class FormHostPage : ContentPage
{
    public FormHostPage()
    {
        InitializeComponent();
    }

    public async Task HandleFormSubmit(string submittedData)
    {
        // 这里编写你的业务逻辑，比如弹窗提示、存储数据等
        await DisplayAlert("收到Blazor传值", $"内容：{submittedData}", "确认");
    }
}

方法二：利用依赖注入的消息服务（适合多组件/页面传值场景） #

1. 创建共享消息服务 #

public class FormMessageService
{
    // 定义事件，用于传递表单数据
    public event Action<string> FormDataReceived;

    public void SendFormData(string data)
    {
        FormDataReceived?.Invoke(data);
    }
}

2. 注册服务到DI容器 #

在MauiProgram.cs中添加服务注册：

builder.Services.AddSingleton<FormMessageService>();

3. 在Blazor组件中注入并调用服务 #

@inject FormMessageService MessageService

<div>
    <input @bind="userInput" placeholder="输入内容" />
    <button @onclick="SendData">发送数据</button>
</div>

@code {
    private string userInput;

    private void SendData()
    {
        MessageService.SendFormData(userInput);
    }
}

4. 在XAML后台订阅消息事件 #

namespace YourAppNamespace;

public partial class FormHostPage : ContentPage
{
    private readonly FormMessageService _messageService;

    public FormHostPage(FormMessageService messageService)
    {
        InitializeComponent();
        _messageService = messageService;
        // 订阅消息事件
        _messageService.FormDataReceived += HandleFormData;
    }

    private void HandleFormData(string data)
    {
        // 注意：UI操作需切换到主线程
        MainThread.BeginInvokeOnMainThread(async () =>
        {
            await DisplayAlert("消息服务传值", $"内容：{data}", "确认");
        });
    }

    protected override void OnDisappearing()
    {
        base.OnDisappearing();
        // 取消订阅，避免内存泄漏
        _messageService.FormDataReceived -= HandleFormData;
    }
}

内容的提问来源于stack exchange，提问作者cdslvaaa