如何在执行OnGet方法前先渲染Razor页面？

当前Razor页面的OnGet方法会在页面渲染前执行，后台耗时操作完成后才会返回页面内容，导致用户看不到加载状态。要实现先渲染加载UI再执行后台操作，需要通过前端异步请求分离页面渲染和后台处理流程，具体步骤如下：

1. 修改Razor页面，添加异步请求逻辑 #

调整页面代码，让OnGet仅返回加载UI，页面渲染完成后通过JavaScript发起异步请求调用后台的耗时操作，操作完成后再跳转：

@page

@inject IStringLocalizer<Startup> localizer

<div class="login-page">
    <div class="login-box">
        <div class="card">
            <div class="card-body login-card-body">
                <div class="help-block text-center">
                    <div class="spinner-border" role="status" />
                </div>
                <p class="login-box-msg">@localizer["PleaseWait"]</p>
            </div>
        </div>
    </div>
</div>

<script>
    // 页面加载完成后触发后台处理
    window.addEventListener('load', async () => {
        try {
            // 调用后台的Process处理端点
            const response = await fetch('?handler=Process');
            if (response.ok) {
                // 处理完成后跳转至Dashboard
                window.location.href = '/Dashboard';
            } else {
                // 错误提示，可根据需求自定义
                alert('处理失败，请稍后重试');
            }
        } catch (err) {
            alert('请求异常，请检查网络后重试');
        }
    });
</script>

2. 调整后台代码，分离页面渲染与耗时操作 #

将原来的耗时操作移至新的OnGetProcess处理器方法，原OnGet仅负责返回加载页面：

public IActionResult OnGet()
{
    // 直接返回加载页面，不执行耗时操作
    return Page();
}

public async Task<IActionResult> OnGetProcess()
{
    // 执行原来的耗时操作（确保用async/await实现异步）
    // Do some stuff that takes a few seconds...

    // 返回成功状态，通知前端跳转
    return new OkResult();
}

核心原理 #

• 原OnGet方法不再执行耗时操作，仅快速返回加载页面，用户能立即看到加载状态。
• 页面渲染完成后，前端通过fetch异步调用后台的Process处理器，此时后台执行耗时操作，前端保持加载UI展示。
• 后台操作完成后返回成功状态，前端收到响应后自动跳转到目标页面。

注意事项 #

• 确保耗时操作使用async/await实现异步，避免阻塞服务器线程。
• 若需要传递参数，可在fetch请求中添加查询参数或使用POST方式提交数据。
• 可根据业务需求优化错误处理逻辑，比如替换alert为页面内的错误提示组件。

内容的提问来源于stack exchange，提问作者Ivan-Mark Debono