MVC控制器中验证Excel内容后取消操作并显示提示框的实现问题

1. 完善后端Action逻辑 #

修改Upload方法，在验证失败或异常场景下返回带错误信息的JSON结果，替代原有的空处理：

public IActionResult Upload()
{
    string json = Request.Form["xlx_json"].ToString();
    var result = new { Success = false, Message = "操作失败，请重试" };

    try
    {
        List<WarehouseOrderModel> orders = JsonConvert.DeserializeObject<List<WarehouseOrderModel>>(json, new JsonSerializerSettings
        {
            NullValueHandling = NullValueHandling.Ignore,
            DefaultValueHandling = DefaultValueHandling.Ignore
        });

        string validationResults = RequestBodyValidator.Validate(orders);

        if (string.IsNullOrEmpty(validationResults))
        {
            // 若需保存验证通过的数据，可在此添加业务逻辑
            result = new { Success = true, Message = "验证通过" };
        }
        else
        {
            result = new { Success = false, Message = validationResults };
        }
    }
    catch (Exception ex)
    {
        // 建议添加日志记录，此处返回用户友好提示
        result = new { Success = false, Message = $"数据解析/验证失败：{ex.Message}" };
    }

    return Json(result);
}

2. 修改前端提交逻辑（关键） #

必须使用AJAX异步提交替代普通表单提交，这样才能在验证失败时停留在当前页面并显示提示框，而非强制跳转：

<!-- 示例表单结构 -->
<form id="excelUploadForm">
    <!-- 隐藏textarea存储Excel转换后的JSON -->
    <textarea name="xlx_json" id="xlx_json" style="display: none;"></textarea>
    <!-- Excel文件选择控件 -->
    <input type="file" id="excelFile" accept=".xlsx,.xls">
    <!-- 提交按钮 -->
    <button type="button" id="submitUpload">验证并上传</button>
</form>

<script>
// 绑定提交按钮点击事件
document.getElementById('submitUpload').addEventListener('click', function() {
    const jsonContent = document.getElementById('xlx_json').value;
    
    // 前置检查：确认JSON内容存在
    if (!jsonContent) {
        alert('请先选择Excel文件并完成转换');
        return;
    }

    // 发起异步请求
    fetch('/YourControllerName/Upload', { // 替换为你的实际控制器名称
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `xlx_json=${encodeURIComponent(jsonContent)}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.Success) {
            // 验证通过，跳转到目标页面
            window.location.href = '/WarehouseOrders/Index';
        } else {
            // 验证失败，显示错误提示
            alert(data.Message);
            // 可选：重置表单状态
            document.getElementById('excelFile').value = '';
            document.getElementById('xlx_json').value = '';
        }
    })
    .catch(error => {
        alert('请求提交失败：' + error.message);
    });
});
</script>

核心注意事项 #

• 禁用普通表单提交：普通表单提交会直接刷新页面，无法实现“验证失败时保留当前页并显示提示”的需求，AJAX异步请求是必要方案。
• 异常处理与友好提示：必须捕获反序列化、验证环节的异常，返回用户可理解的错误信息，避免暴露原始异常细节。
• JSON编码处理：提交JSON内容时用encodeURIComponent编码，防止特殊字符导致的请求参数解析错误。

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