MVC5中如何顺序执行C#代码并在程序运行时分步向视图输出数据

实现原理 #

ASP.NET MVC默认的服务端渲染逻辑是：控制器的所有业务逻辑执行完成后才会开始渲染视图，视图渲染完毕后才会将完整的HTML响应返回给浏览器，因此你原来的写法不可能实现分步渲染输出，必须采用前端异步请求+服务端接口拆分的方案实现需求。

第一步：调整控制器代码 #

将原有逻辑拆分为两个接口：第一个接口仅返回初始页面，输出查询开始时间，不执行耗时查询；第二个接口负责执行存储过程查询，返回JSON格式的结果和查询结束时间。

// 初始页面加载接口
public IActionResult GetQuery()
{
    ViewData["Timefrom"] = DateTime.Now;
    return View();
}

// 异步查询执行接口
public IActionResult ExecuteQuery()
{
    // 已修复你原有代码中FromSqlRaw缺少闭合括号的语法错误
    var query = _context.Order.FromSqlRaw("EXECUTE [dbo].[GetStatusReport]").ToList();
    return Json(new {
        EndTime = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"),
        Result = query
    });
}

第二步：调整视图代码 #

删除原有视图的强类型Model绑定，页面首次加载时直接渲染开始时间和加载提示，页面加载完成后自动发起异步请求调用查询接口，请求返回后隐藏加载提示、渲染查询结果、显示结束时间。

@{
  ViewData["Title"] = "Home Page";
  var startTime = ViewData["Timefrom"] as DateTime? ?? DateTime.Now;
}

<!-- 页面加载时直接显示开始时间 -->
<div>Start Time: @startTime.ToString("yyyy-MM-dd HH:mm:ss")</div>

<!-- 默认显示的加载提示 -->
<div id="loadingTip">*查询正在执行，请稍候...</div>

<!-- 查询结果表格，默认隐藏 -->
<table style="display:none;" id="resultTable">
  <thead>
    <tr>
      <th width="30%">订单ID</th>
      <th width="30%">名称</th>
      <th width="30%">位置</th>
    </tr>
  </thead>
  <tbody id="resultBody">
  </tbody>
</table>

<!-- 结束时间容器，默认隐藏 -->
<div id="endTimeContainer" style="display:none;">End Time: <span id="endTime"></span></div>

<script>
// 若你的项目未使用jQuery，可替换为原生fetch API实现异步请求
$(function(){
    $.ajax({
        url: '@Url.Action("ExecuteQuery")',
        type: 'GET',
        success: function(res){
            // 隐藏加载提示
            $('#loadingTip').hide();
            // 拼接结果表格HTML
            let html = '';
            res.Result.forEach(item => {
                html += `<tr>
                    <td width="30%">${item.orderId}</td>
                    <td width="30%">${item.name}</td>
                    <td width="30%">${item.location}</td>
                </tr>`;
            });
            $('#resultBody').html(html);
            // 显示表格和结束时间
            $('#resultTable').show();
            $('#endTime').text(res.EndTime);
            $('#endTimeContainer').show();
        },
        error: () => {
            $('#loadingTip').text('查询执行失败，请刷新重试');
        }
    });
});
</script>

补充说明 #

• 如果你的项目还没有引入jQuery，可使用项目本地的jQuery资源，或者改用原生fetch API实现异步请求
• .NET Core默认的System.Text.Json序列化会将属性名转为驼峰格式，如果前端取不到对应字段，可以在浏览器控制台打印返回结果确认实际字段名
• 若查询返回的数据量较大，建议增加分页逻辑优化加载体验

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