I'm refactoring the graphic part of a NET Core project through a more correct use of html/css/DataTables and so on. I'm also substituting the browser alert and confirm dialogs with Sweetalert2 (great library), and this is a very simple task. But I've encountered a case where I cannot substitute directly a confirm (actually a double confirm, tends to prevent idiot response from users) because its true/false results is used to consent/prevent posting a form. This form simply redirect the user to the previous page, but is made through the tag helper asp-page-handler, calling the corresponding method of a controller. This is the content of the form block:
<form id="cmd-form" method="POST">
@Html.HiddenFor(m => m.CodiceAzienda)
@Html.HiddenFor(m => m.CodiceFiliale)
@Html.HiddenFor(m => m.Codice_Cliente)
<div class="panels-frame" style="display:grid;grid-template-columns:repeat(8,1fr);">
<button type="submit" id="btn-back" class="btn-glow btn-glow-secondary cmd-buttons" style="grid-column:1/2;" asp-page-handler="Ritorna" asp-route-CodiceCliente="@Model.Codice_Cliente" onclick="return verificaIncassiNonRegistrati(event);">
<i class="fad fa-arrow-left-long fa-lg" style="color:darkgray;"></i>
Ritorna
</button>
<button type="button" id="btn-print" class="btn-glow btn-glow-info cmd-buttons" style="grid-column:4/5;" onclick="return stampa();"><i class="fad fa-print fa-lg" style="color:cornflowerblue;margin-right:.5rem;"></i>Stampa</button>
</div>
</form>
The original function verificaIncassiNonRegistrati contains two consecutive confirm dialogs (warning the user to not commit stupid things...), resulting in a false (so preventing posting the form) or a true (calling the controller method and redirecting the user) response. This is the controller method:
public async Task<IActionResult> OnPostRitorna()
{
return RedirectToPage($"/Home/Win_ListaClienti", "Codice", new { Codice = Codice_Cliente });
}
The first try was to call event.preventDefault(), in order to stop the propagation and handle all the necessary operations through sweetalert2 callbacks, and calling $('#cmd-form').submit() to use the (I though) submit operation, but the controller is never called. This is the second try:
function verificaIncassiNonRegistrati(e)
{
if (!$("#inc-alert-div").is(':visible'))
return true;
e.preventDefault();
stdAlert
(
'ATTENZIONE', 'Sono presenti incassi non registrati. Si desidera uscire senza eseguire la registrazione ?',
'SI', 'danger',
'NO', 'info',
function (response)
{
if (!response)
return false;
$.ajax
(
{
url: '/Win_DettaglioCliente?handler=Ritorna',
method: 'POST',
headers: { 'RequestVerificationToken': $('input[name="__RequestVerificationToken"]').val() },
data: { CodiceCliente: $('#Codice_Cliente').val() },
success: function (data)
{
}
}
);
}
)
}
I've leaved only a confirmation for the sake of simplicity. Now the controller method is fired, the parameter Codice_Cliente is present and valid, but it does not redirect to the page contained in RedirectToPage; the only result is the entire page inside the parameter data of the success function. Third try: await the promise returned by sweetalert2. This is the helper function I've modified in order to have the promise (there's much more code, but it's only for formatting purposes; the parameters are still present in the calling function):
function stdAlertSync(title, message)
{
return Swal
(
{
title: title,
text: message,
}
);
}
And this is the javascript function (only one confirmation for simplicity):
async function doubleConfirm()
{
// event.preventDefault();
var r = await stdAlertSync
(
'ATTENZIONE', 'Sono presenti incassi non registrati. Si desidera uscire senza eseguire la registrazione ?',
'SI', 'danger',
'NO', 'info'
);
return r.isConfirmed;
}
but despite the await, the function returns immediately to the caller. If I comment the e.preventDefault() function, the form is posted immediately, if I leave it commented nothing happens. Surely I'm missing something obvious, but I've not been able to find a solution. In the meanwhile I'll leave the ugly confirm browser dialog to continue the work, but I've to definitely found another solution, because this could not be the only post confirmed or dismissed with a browser confirm. Thanks.