处理程序执行后未出现 Toast 通知

Question

我在 .NET Core 3.1 应用程序中使用 NToastNotify V6.1.3。

问题我有一个模式（在 ViewComponent 中），我在整个控制器的 handler/action 中插入数据。这将使用新的更新数据刷新页面，并向用户发出 toast 通知。现在我的要求发生了变化，我希望保持模式打开并允许用户在决定关闭模式之前输入多条记录，然后才刷新页面。为此，我将处理程序 return 从 return LocalRedirect("/Account/Production/Index"); 更改为 return NoContent();。

这在一定程度上有效...我遇到的问题是所有 toast 通知只会在用户最终执行刷新页面的操作时显示，而不是每次调用处理程序时都显示一次。

问题如何在我的处理程序成功后立即显示 toast 通知，而不需要刷新页面？

控制器处理程序

[HttpPost]
public async Task<IActionResult> InsertLabelDefectRobotsT(DefectModalViewModel model)
{
    ...

    _toastNotification.AddSuccessToastMessage(model.Quantity + " peca(s) com defeito adicionada(s).");

    return NoContent();                                 //NOW
    //return LocalRedirect("/Account/Production/Index");  BEFORE
}

ViewComponent

<div class="modal fade" id="modalDefectsRobots" tabindex="-1" role="dialog" aria-labelledby="modalDefectsRobots" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <h5 class="modal-title" id="modalDefectsRobots">
                    <i class="fas fa-thumbs-down mr-2"></i>Inserção de Defeitos
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <div id="modalDefectsLoader" class="text-center" style="display:none;">
                    <img src="~/images/svg/ajax-loader.svg" />
                </div>

                <alert type="Warning">
                    Todos os defeitos serão registados para a célula escolhida.
                </alert>

                <form id="formDefectsRobots" method="post" asp-action="InsertLabelDefectRobotsT" asp-controller="Labels" onsubmit="onSubmit(this)">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    ...
                    ...
                    ...
                    <div class="row mb-3">
                        <div class="col-md-12">
                            <button type="button" class="btn btn-dark" data-dismiss="modal"><i class="fas fa-arrow-left mr-2"></i>Cancelar</button>
                            <button type="button" class="btn btn-success" onclick="doSomething();submitDefectsRobots(this)"><i class="fas fa-play-circle mr-2"></i>Introduzir Defeito</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

提交时 JS 调用处理程序

function submitDefectsRobots(button) {

    $form = $('#formDefectsRobots');

    if ($form.valid()) {
        Swal.fire({
            title: "Inserir Defeito?",
            text: "Esta acção irá inserir um novo registo de defeito.",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Confirmar',
            animation: false,
            focusCancel: true
        }).then((willSubmit) => {
            if (willSubmit.value) {
                $form.submit();
                hideOverlay();
            }
        })
    }
}

Answer 1

我最终通过将 toast 调用从处理程序更改为 javascript 文件解决了这个问题：

function submitDefectsRobots(button) {

    $form = $('#formDefectsRobots');

    if ($form.valid()) {
        Swal.fire({
            title: "Inserir Defeito?",
            text: "Esta acção irá inserir um novo registo de defeito.",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            cancelButtonText: 'Cancelar',
            confirmButtonText: 'Confirmar',
            animation: false,
            focusCancel: true
        }).then((willSubmit) => {
            if (willSubmit.value) {
                $form.submit();
                hideOverlay();
                setTimeout(function () {
                    toastr.success("Defeitos Inseridos");
                    $('.defectsSelect').val('0');
                }, 1000);
            }
        })
    }
}

虽然这并不完美，因为无论响应如何，我都会在提交表单后调用它（我需要 AJAX 来等待响应），但这是目前的解决方法，因为我刷新了错误情况下的页面。

处理程序执行后未出现 Toast 通知

Toast Notifications not appearing after handler execution

asp.net-core

toast