Tengo 2 funciones asíncronas en Javascript. Uno llama a un controlador MVC para cargar una tabla de "ubicaciones", el otro elimina una ubicación individual. La idea es hacer clic en un botón para cargar las ubicaciones en una ventana emergente modal, luego cada fila tiene un botón de eliminación que elimina una ubicación individual, luego se llama a la misma función editPlacementHeader después de la función de eliminación para volver a abrir el modal y mostrar el mesa de nuevo.

El problema es que cuando hago clic en el botón para mostrar las ubicaciones, en la consola aparece el siguiente error:

SyntaxError no capturado: await solo es válido en funciones asíncronas, generadores asíncronos y módulos

Por lo que puedo decir, la función es asíncrona.

Si elimino todos los async y awaits del código JS, el modal se carga, se elimina un día pero el modal no se cierra y se vuelve a abrir, a menos que coloque un punto de interrupción en el código C# que carga los datos para "pausar", entonces sería trabajar.

Código JS -

 async function editPlacementHeader(id) { let e = $.Event(); e.preventDefault(); $("#EditPlacementHeaderPopup").modal("hide"); $("#EditPlacementPopup").modal("hide"); await $.ajax({ url: '/WeeklyPlacement/EditPlacementHeader?bookingId=' + id, type: 'POST', dataType: 'html', contentType: "application/json; charset=utf-8", success: function(response) { $("#dvEditPlacementHeaderPartial").html(response); $("#EditPlacementHeaderPopup").modal("show"); } }); }; async function deleteDay(id, bookingId) { let e = $.Event(); e.preventDefault(); $.ajax({ url: '/WeeklyPlacement/DeletePlacementDay?id=' + id, type: 'POST', dataType: 'html', contentType: "application/json; charset=utf-8", success: function(response) { $("#EditPlacementHeaderPopup").modal("hide"); $("#EditPlacementPopup").modal("hide"); toastNotifySuccess("Day deleted successfully", 1000); await editPlacementHeader(bookingId); } }); };

HTML para abrir la ubicación -

@mon.Nombre