Toast Notifications not appearing after handler execution - asp.net-core

Question

I'm using NToastNotify V6.1.3 in a .NET Core 3.1 application.
Problem
I had a modal (in a ViewComponent) where I inserted data throughout a controller's handler/action. This would refresh the page with the new updated data and give the user a toast notification. Now my requirements change and I wish to keep the modal open and allow the user to input multiple records before deciding to close up the modal and only then refresh the page. To do this I changed my handler return from return LocalRedirect("/Account/Production/Index"); to return NoContent();.
This works to a certain extent... The problem I have is that all the toast notifications will only show up when the user finally makes an action that refreshes the page, and not once every time the handler gets called.
Question
How to show the toast notifications as soon as my handler succeeds, and without the need to refresh the page?
Controller Handler
[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">×</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 Call Handler On Submit
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

I ended up solving this by changing the toast call from the handler to the javascript file:
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);
}
})
}
}
While this is not perfect since I'm calling it after the form submission regardless of the response (I would need AJAX for waiting for the response), it is a workaround for now since I refresh the page in an error case.