.NET Core 3.1使用NToastNotify返回NoContent后Toast通知无法即时显示

问题根因 #

NToastNotify 默认通过 TempData 存储通知消息，仅在页面刷新/重定向时，服务端渲染页面才会读取 TempData 中的通知内容并渲染触发弹窗。你当前修改为返回 NoContent() 后页面没有刷新，通知会一直暂存在 TempData 中，直到下次页面刷新才会集中读取弹出。

解决方案 #

方案一：使用 NToastNotify 原生AJAX支持（推荐） #

1. 开启AJAX通知配置

在服务端注册NToastNotify的位置（Startup.cs/Program.cs）开启AJAX toast支持：

services.AddNToastNotify(config => 
{
    config.EnableAjaxToasts = true; // 启用后通知会自动写入响应头
    // 其余原有配置保持不变
});

2. 修改表单提交为AJAX请求

替换原JS中的默认表单提交逻辑为AJAX提交，成功后读取响应头中的通知直接触发：

function submitDefectsRobots(button) {
    const $form = $('#formDefectsRobots');
    if ($form.valid()) {
        Swal.fire({
            title: "确认插入缺陷？",
            text: "该操作将新增一条缺陷记录",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            animation: false,
            focusCancel: true
        }).then((willSubmit) => {
            if (willSubmit.value) {
                $.ajax({
                    url: $form.attr('action'),
                    type: $form.attr('method'),
                    data: $form.serialize(),
                    success: function (res, status, xhr) {
                        // 直接调用NToastNotify内置方法解析响应头触发弹窗
                        window.toastNotify.parseHeaders(xhr);
                        // 重置表单方便连续录入
                        $form[0].reset();
                        hideOverlay();
                    },
                    error: function () {
                        toastr.error('提交失败，请稍后重试');
                        hideOverlay();
                    }
                });
            }
        })
    }
}

3. 阻止表单默认提交行为

你表单上的onsubmit="onSubmit(this)"对应的方法需要添加阻止默认提交的逻辑，避免页面跳转：

function onSubmit(form) {
    // 原有逻辑保留，最后加一行
    return false;
}

4. 实现关闭模态框后刷新页面

给模态框添加关闭事件监听，关闭时自动刷新列表页：

$('#modalDefectsRobots').on('hidden.bs.modal', function () {
    location.reload();
})

方案二：自定义返回消息前端触发 #

如果你不想修改NToastNotify配置，可以直接在接口返回通知内容，前端手动触发弹窗：

1. 修改控制器返回值

[HttpPost]
public async Task<IActionResult> InsertLabelDefectRobotsT(DefectModalViewModel model)
{
    // ... 原有业务逻辑不变
    var msg = $"{model.Quantity} 个缺陷件已添加";
    _toastNotification.AddSuccessToastMessage(msg);
    return Json(new { success = true, message = msg });
}

2. AJAX成功回调中手动触发弹窗

success: function (res) {
    if (res.success) {
        // NToastNotify底层基于toastr，直接调用即可
        toastr.success(res.message);
        $form[0].reset();
    }
    hideOverlay();
}

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