Razor Pages页面加载时AJAX显示Spinner异常：重复请求问题求助

1. 确认后端处理器返回类型正确 #

确保CustomerList处理器仅返回部分视图，而非完整页面。如果返回完整页面，会包含原页面的脚本逻辑，导致AJAX替换内容后再次触发加载，形成循环。

正确的后端代码示例：

public IActionResult OnGetCustomerList()
{
    var customers = _customerService.GetCustomers();
    // 仅返回部分视图，而非整个Page
    return Partial("_CustomerPartial", customers);
}

2. 避免加载逻辑重复执行 #

检查ListViewLoading.cshtml中的脚本，确保初始加载的AJAX逻辑只执行一次，且不要将这段脚本放在会被AJAX替换的区域（比如partial视图内）。

示例脚本：

<div id="customerContainer">
    <img src="loader.gif" alt="Loading..." />
</div>

<script>
// 绑定页面初始加载事件，确保只执行一次
document.addEventListener('DOMContentLoaded', function() {
    fetch('/ListViewLoading?handler=CustomerList')
        .then(response => response.text())
        .then(html => {
            document.getElementById('customerContainer').innerHTML = html;
        })
        .catch(error => {
            console.error('加载失败:', error);
            document.getElementById('customerContainer').innerHTML = '加载数据失败';
        });
});
</script>

如果_CustomerPartial.cshtml中也包含这段脚本，每次AJAX替换内容后都会重新触发请求，必须移除partial内的重复脚本。

3. 清理partial视图的冗余内容 #

_CustomerPartial.cshtml只能包含列表的纯HTML内容，不能包含布局引用、页面脚本或完整页面结构，否则会导致页面逻辑重复执行。

正确的partial示例：

@model IEnumerable<Customer>

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
        </tr>
    </thead>
    <tbody>
        @foreach(var customer in Model)
        {
            <tr>
                <td>@customer.Id</td>
                <td>@customer.Name</td>
            </tr>
        }
    </tbody>
</table>

4. 验证请求与返回内容 #

打开浏览器开发者工具的Network标签，检查AJAX请求：

• 确认请求URL正确（如/ListViewLoading?handler=CustomerList）
• 检查返回内容是否是预期的partial视图HTML，而非完整页面代码
• 查看请求状态码是否为200

5. 添加防重复请求标志 #

可以通过标志位防止请求在完成前被重复触发：

let isLoading = false;
document.addEventListener('DOMContentLoaded', function() {
    if (!isLoading) {
        isLoading = true;
        fetch('/ListViewLoading?handler=CustomerList')
            .then(response => response.text())
            .then(html => {
                document.getElementById('customerContainer').innerHTML = html;
                isLoading = false;
            })
            .catch(error => {
                console.error('加载失败:', error);
                document.getElementById('customerContainer').innerHTML = '加载数据失败';
                isLoading = false;
            });
    }
});

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