如何在Asp.Net Core C#中加载数据库查询视图时显示加载图标？

核心思路 #

要实现加载状态，关键是用异步请求替代同步表单提交，这样页面不会刷新，就能在请求过程中显示加载图标，请求完成后再更新页面内容。

步骤1：修改控制器为异步API接口 #

先把原来的同步方法拆成两个：一个返回初始页面，一个作为异步接口处理数据请求：

// 返回初始视图
public IActionResult Index()
{
    return View();
}

// 异步处理数据请求，返回JSON格式数据
public async Task<IActionResult> FetchData(string clientName, string tableName, string date)
{
    // 参数校验
    if (string.IsNullOrEmpty(clientName) || string.IsNullOrEmpty(tableName) || string.IsNullOrEmpty(date))
    {
        return BadRequest("所有输入项不能为空");
    }

    // 临时用Task.Run包装同步方法（建议后续把服务层的FetchData改成真正的异步方法）
    var theData = await Task.Run(() => 
        _fieldDataService.FetchData(tempAcr, tempID, tableName, date, numRows)
    );

    return Json(theData);
}

步骤2：修改视图页面 #

2.1 表单结构 #

把默认表单提交改成按钮触发JS事件，避免页面刷新：

<form id="dataForm">
    <input type="text" name="clientName" placeholder="客户名称" required>
    <input type="text" name="tableName" placeholder="表名" required>
    <input type="date" name="date" required>
    <button type="button" id="submitBtn">获取数据</button>
</form>

2.2 加载图标与数据展示区 #

添加初始隐藏的加载图标（纯CSS实现，无需外部资源）和数据容器：

<!-- 加载图标 -->
<div id="loadingSpinner" style="display:none;">
    <div style="border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:20px auto;"></div>
    <p>加载中...</p>
</div>

<!-- 数据展示容器 -->
<div id="dataContainer"></div>

<!-- 加载动画样式 -->
<style>
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

2.3 JQuery异步请求逻辑 #

先下载JQuery文件放到项目的wwwroot/js目录，再引入并编写AJAX逻辑：

<script src="~/js/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#submitBtn').click(function() {
            // 获取表单参数
            var formParams = $('#dataForm').serialize();
            
            // 显示加载图标，隐藏数据区
            $('#loadingSpinner').show();
            $('#dataContainer').hide();

            // 发送异步请求
            $.ajax({
                url: '@Url.Action("FetchData")',
                type: 'GET',
                data: formParams,
                success: function(data) {
                    // 请求成功：隐藏加载图标，渲染数据
                    $('#loadingSpinner').hide();
                    $('#dataContainer').show();
                    
                    // 示例：根据数据结构生成表格（需替换成你的实际字段）
                    var tableHtml = '<table border="1"><tr><th>字段1</th><th>字段2</th></tr>';
                    $.each(data, function(index, item) {
                        tableHtml += `<tr><td>${item.Field1}</td><td>${item.Field2}</td></tr>`;
                    });
                    tableHtml += '</table>';
                    $('#dataContainer').html(tableHtml);
                },
                error: function() {
                    // 请求失败：隐藏加载图标，提示错误
                    $('#loadingSpinner').hide();
                    $('#dataContainer').show().html('<p>数据获取失败，请重试</p>');
                }
            });
        });
    });
</script>

关键注意事项 #

• 如果服务层的FetchData原本就是异步方法，直接用await _fieldDataService.FetchData(...)即可，不用Task.Run包装。
• 可以在前端先做输入校验（比如检查空值），减少无效的后端请求。
• 加载图标的样式可以根据项目UI风格自定义，不用局限于示例样式。

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