ASP.NET MVC异步操作时如何先显示等待页，完成后跳转至完成页？

开发者阿泽

2026-7-2

解决方案

你的核心问题是HTTP请求是单次响应模式，原代码里Index方法返回Waiting视图后，后续代码根本不会执行。要实现「先显示等待状态→执行异步任务→展示完成页面」的流程，需要结合前端异步请求来实现，具体步骤如下：

1. 调整后端控制器代码

修改BeginTask为可被前端调用的异步接口，保留各视图方法：

public class Test : Controller
{
    public IActionResult Index()
    {
        // 直接返回等待视图
        return View("Waiting");
    }

    public IActionResult Waiting()
    {
        return View();
    }

    // 修改为异步Action，返回任务完成状态
    public async Task<IActionResult> BeginTask()
    {
        await Task.Delay(5000);
        return Json(new { success = true });
    }

    public IActionResult Completed()
    {
        return View();
    }
}

2. 编写Waiting视图的前端逻辑

在Waiting.cshtml中添加JavaScript，页面加载后自动调用后端异步接口，完成后跳转至完成页面：

@{
    ViewData["Title"] = "等待中";
}

<h1>任务处理中，请稍候...</h1>

<script>
    window.onload = async function() {
        try {
            // 调用后端异步任务接口
            const response = await fetch('/Test/BeginTask');
            const result = await response.json();
            
            if (result.success) {
                // 任务完成后跳转到完成页面
                window.location.href = '/Test/Completed';
            }
        } catch (error) {
            console.error('任务执行失败:', error);
            alert('任务处理出错，请重试');
        }
    };
</script>