.NET MVC Bootstrap Modal not showing up

Question

The action below, manages order quotes. And I have an if statement inside. If product quantity in order is bigger than product in the stock, i want to show an error message with TempData and Bootstrap Modal. But when i try to see if it works, even though TempData is not null, modal is not showing. And I use the same technic for different areas of the same project. But this one's the only one which is not working. Related action:

public async Task<IActionResult> ManageOrderQuote(int orderId, string status, string statusDescription)
{
    var order = await orderQuote.GetByIdAsync(orderId);
    var orderDetails = await orderQuoteDetail.GetAllByIdAsync(orderId);
    foreach (var detail in orderDetails)
    {
        var productId = detail.ProductId;
        var productToUpdate = await product.GetByIdAsync(productId);
        productToUpdate.UnitsOnOrder += detail.Quantity;
        productToUpdate.UnitsInStock -= detail.Quantity;
        if (productToUpdate.UnitsInStock < 0)
        {
            TempData["ErrorMessage"] = "The " + productToUpdate.ProductName + " product doesn't have enough stock.";
            return RedirectToAction("PendingOrders");
        }
        await product.UpdateAsync(productToUpdate);
    }
    order.Status = status;
    order.StatusDescription = statusDescription;
    await orderQuote.UpdateAsync(order);

    return RedirectToAction("PendingOrders");
}

JS code and the modal:

@if (TempData["ErrorMessage"] != null)
{
    <script>
        $(document).ready(function () {
            $('#errorModal').modal('show');
        });
    </script>
}

<!-- Error Modal -->
<div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-light">
                <h5 class="modal-title" id="errorModalLabel">Error</h5>
            </div>
            <div class="modal-body">
                <p class="text-danger">@TempData["ErrorMessage"]</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

This is the AJAX call:

 $('#statusForm').submit(function (e) {
     e.preventDefault();
     var orderId = $('#orderId').val();
     var status = $('#status').val();
     var statusDescription = $('#statusDescription').val();
     $.ajax({
         url: '/Sales/ManageOrderQuote',
         type: 'POST',
         data: {
             orderId: orderId,
             status: status,
             statusDescription: statusDescription
         },
         success: function (response) {
             $('#statusModal').modal('hide');
             $('.modal-backdrop').remove();
             window.location.reload();
         },
         error: function () {
             alert('An error occurred while changing order status.');
         }
     });
 });

PendingOrders.cs:

public async Task<IActionResult> PendingOrders()
{
    var orders = await orderQuote.GetAllPendingOrders();

    var orderList = new List<OrderVM>();
    foreach (var order in orders)
    {
        var orderVM = new OrderVM()
        {
            OrderQuoteId = order.OrderQuoteId,
            CustomerName = order.Customer?.ContactFirstName + " " + order.Customer?.ContactLastName,
            OrderDate = order.OrderDate,
            Status = order.Status,
            StatusDescription = order.StatusDescription
        };
        orderList.Add(orderVM);
    }
    return View(orderList);
}

Answer 1

We can try to

1.Add <div id="divToUpdated"></div> in the page with the AJAX call to display modal.

2.Then modify the ajax success like :

 success: function (response) {
     $('#statusModal').modal('hide');
     $('.modal-backdrop').remove();
     // window.location.reload();
     $("#divToUpdated").html(response);
 },

Note It will show the PendingOrders page and modal.

Or With the 1,2 , we can use a PartialView to show the modal, put JS code and the modal in a PartialView named _modalPartialView, then we call the PartialView like:

if (productToUpdate.UnitsInStock < 0)
        {
            TempData["ErrorMessage"] = "The " + productToUpdate.ProductName + " product doesn't have enough stock.";
           return PartialView("_modalPartialView");
        }

result: