.NET 8 Blazor Server移动端全局变量isMobile加载位置问询

核心思路 #

通过确保JS方法在组件渲染前完成执行，并将结果同步到已注册的AppState作用域服务中，同时通过状态通知机制让所有子组件能感知到isMobile的变化，解决子组件提前渲染导致值无效的问题。

步骤实现 #

1. 完善AppState类（支持状态通知） #

让AppState实现INotifyPropertyChanged，确保属性变更时组件能自动更新：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class AppState : INotifyPropertyChanged
{
    private bool _isMobile;
    public bool IsMobile
    {
        get => _isMobile;
        set
        {
            if (_isMobile != value)
            {
                _isMobile = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    private void OnPropertyChanged([CallerMemberName] string? propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

保持原有Scoped注册：

// Program.cs
builder.Services.AddScoped<AppState>();

2. 控制渲染时机，确保isMobile初始化完成 #

方案一：主布局页拦截渲染

在MainLayout.razor中等待JS获取设备类型后，再渲染子组件：

@inject IJSRuntime JSRuntime
@inject AppState AppState

@if (_isInitialized)
{
    <div class="main">
        <div class="content px-4">
            @Body
        </div>
    </div>
}
else
{
    <div class="loading">正在检测设备...</div>
}

@code {
    private bool _isInitialized;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 调用JS方法获取移动端标识
            AppState.IsMobile = await JSRuntime.InvokeAsync<bool>("isMobileDevice");
            _isInitialized = true;
            StateHasChanged(); // 触发重新渲染，显示主内容
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

方案二：Routes.razor传递级联值

在路由根组件中初始化isMobile，并通过级联值全局传递：

@inject IJSRuntime JSRuntime
@inject AppState AppState

<CascadingValue Value="AppState">
    @if (_isInitialized)
    {
        <Router AppAssembly="@typeof(Program).Assembly">
            <Found Context="routeData">
                <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
                <FocusOnNavigate RouteData="@routeData" Selector="h1" />
            </Found>
            <NotFound>
                <LayoutView Layout="@typeof(MainLayout)">
                    <p role="alert">抱歉，该地址不存在</p>
                </LayoutView>
            </NotFound>
        </Router>
    }
    else
    {
        <div>初始化中...</div>
    }
</CascadingValue>

@code {
    private bool _isInitialized;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            AppState.IsMobile = await JSRuntime.InvokeAsync<bool>("isMobileDevice");
            _isInitialized = true;
            StateHasChanged();
        }
    }
}

子组件接收级联值使用：

[CascadingParameter]
public AppState? AppState { get; set; }

@if (AppState?.IsMobile == true)
{
    <p>移动端视图</p>
}
else
{
    <p>桌面端视图</p>
}

3. 正确放置JS方法 #

将判断移动端的JS方法放在_Host.cshtml中，确保Blazor框架加载前已定义：

<!-- _Host.cshtml -->
<script>
    window.isMobileDevice = function() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    };
</script>
<script src="_framework/blazor.server.js"></script>

问题说明 #

• Program.cs加载异常原因：服务注册阶段无JS运行时环境，无法直接调用JS方法。
• 布局页直接渲染无效原因：子组件会在布局的OnAfterRenderAsync执行前完成第一次渲染，因此需要通过初始化状态拦截渲染，等待isMobile值获取完成。

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