c# - 如何交互 BlazorWebView 和 Windows 窗体

Question

我想将数据从 Windows 窗体发送到 BlazorWebView 并将通知从 webview 接收回窗体。这个怎么做？在 .Net6 Windows 窗体应用程序中。

 BlazorWebView blazorApp = new BlazorWebView()
            {
                Dock = DockStyle.Fill,
                HostPage = "wwwroot/index.html",
                Services = serviceProvider                   
            };
            
            blazorApp.RootComponents.Add<App>("#app");

            var form1 = new Form1();
            form1.Controls.Add(blazorApp);
            Application.Run(form1);

Answer 1

BlazorWebView 控件(我从现在开始将其称为 BWV 以节省输入)的诀窍是不要将其视为标准的 WinForms/WPF 控件，而应将其视为 ASP.NET Blazor 应用程序。因此，您正在与 Web 应用程序交互，而不是您通常使用的 WinForm 或 MAUI 控件。

发送数据

像在 ASP.NET 中一样，通过标准依赖注入(inject)处理来回发送数据，因此使用要在 WinForms 应用程序和 BWV 之间传递的数据设置一个类并注入(inject)它。

使用您要在您的 WinForms/Maui 应用程序和 BWV 之间传递的数据创建一个类:

public class AppState
{
    public int Counter { get; set; }
}

实例化它并将其作为单例添加到您的 WinForms/Mai App 中

public partial class Form1 : Form
{
    private readonly AppState _appState = new();

    public Form1()
    {
        var services = new ServiceCollection();
        services.AddWindowsFormsBlazorWebView();
        services.AddSingleton<AppState>(_appState);
        blazorApp.HostPage = "wwwroot\\index.html";
        blazorApp.Services = services.BuildServiceProvider();
        blazorApp.RootComponents.Add<Main>("#app");

将其注入(inject)您的 .razor 页面以供使用。

@inject AppState AppState

<h3>Hello, world!</h3>

<p>The current count is <strong>@AppState.Counter</strong></p>

<button @onclick="IncrementCount">Increment</button>
<button @onclick="TriggerException">Throw</button>


@code {
    void IncrementCount()
    {
        AppState.Counter++;
    }

}

同样 - 在您的 WinForms C# 代码中使用实例化的类

private void button1_Click(object sender, EventArgs e)
    {
        MessageBox.Show(
            owner: this,
            text: $"Current counter value is: {_appState.Counter}",
            caption: "Counter");
    }

参见 https://github.com/dotnet/maui/tree/main/src/BlazorWebView/samples/BlazorWinFormsApp

发送通知

这可以使用 Razor 页面参数并使用操作或事件来完成。

我使用的一个示例只是来自 Razor 页面的一个简单的 EventCallBack，所以在 Razor 页面中有一个这样的参数:

 [Parameter]
public EventCallback Callback { get; set; }

在你的c#代码中创建一个任务

public async Task DoSomething()
{
    await Something();
    ... do other things
}

现在将该任务作为参数传递给 Razor 页面。请注意，为简单起见，我在此处使用 Razor 组件，但您可以将 IDictionary ? 类型的参数传递给 BWV，它表示要传递给根组件的可选参数字典。

<MyRazorControl Callback="Refresh"/>

您可以从 Razor 页面中调用它

<button type="button" class="btn btn-primary" @onclick="DoSomething">Do Some Work</button>

@code {

    [Parameter]
    public EventCallback Callback { get; set; }

    private async Task DoSomething()
    {
        await Callback.InvokeAsync();
    }

}