如何在MAUI应用外部的服务端托管Blazor组件？已尝试多方案

1. 先搭服务端Blazor应用 #

直接创建标准的Blazor Server项目（这本身就是服务端托管组件的方案），写个测试组件比如计数器，部署到你的服务端（IIS、Docker、云服务都行），确保能通过外部URL访问，比如https://your-blazor-server.com/counter。

示例组件代码（Counter.razor）：

@page "/counter"
<h3>计数器</h3>

<p>当前计数: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">点我加1</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

2. MAUI里用WebView加载服务端Blazor #

MAUI直接用WebView控件加载上面的服务端URL就行，这是最直接的方式——毕竟Blazor Server本身就是Web服务，MAUI作为客户端通过WebView访问：

MAUI XAML代码 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiBlazorClient.MainPage">
    <WebView Source="https://your-blazor-server.com/counter" />
</ContentPage>

跨域配置 #

如果服务端和MAUI不在同一域，得在Blazor Server的Program.cs里加CORS：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowMaui",
        policy => policy.WithOrigins("maui://localhost") // MAUI默认源
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

// 记得在UseRouting之后、UseAuthorization之前加
app.UseCors("AllowMaui");

3. 实现MAUI和Blazor的双向交互 #

如果需要MAUI原生功能（比如相机、文件）和Blazor交互，用WebView的JS桥接或者SignalR就行：

MAUI调用Blazor方法 #

在Blazor组件里注册JS可调用的方法：

@inject IJSRuntime JSRuntime

<script>
    window.setCount = (count) => {
        DotNet.invokeMethodAsync('你的Blazor项目程序集名', 'SetCount', count);
    };
</script>

Blazor后端代码：

[JSInvokable]
public void SetCount(int count)
{
    currentCount = count;
    StateHasChanged();
}

MAUI里调用：

await webView.InvokeScriptAsync("setCount", new object[] { 10 });

Blazor调用MAUI原生功能 #

MAUI里注册JS回调：

// 注册JS方法
await webView.EvaluateJavaScriptAsync(@"
    window.callMauiCamera = () => {
        window.chrome.webview.postMessage('openCamera');
    };
");

// 监听消息
webView.WebMessageReceived += (sender, e) =>
{
    if (e.Message == "openCamera")
    {
        // 调用MAUI相机功能
        _ = TakePhotoAsync();
    }
};

Blazor组件里调用：

<button @onclick="() => JSRuntime.InvokeVoidAsync("callMauiCamera")">打开相机</button>

4. 说说你之前方案的问题 #

• gRPC：这是用来做服务间数据通信的，没法直接渲染Blazor UI，你可能搞混了数据传输和UI托管的逻辑。
• SignalR：适合实时推送数据，但不能直接托管Blazor组件，它可以作为MAUI和Blazor之间的通信桥梁，但核心还是得用WebView加载Blazor的UI。
• EmbedIO：如果你之前是在MAUI里嵌EmbedIO，那其实是本地托管，不是真正的服务端托管——得把EmbedIO部署到独立的服务端机器，MAUI作为客户端访问它才行。

内容的提问来源于stack exchange，提问作者Dr.aka