Модальное окно загрузки .NET MVC не отображается

Действие ниже управляет котировками ордеров. И у меня есть оператор if внутри. Если количество продукта в заказе превышает количество товара на складе, я хочу показать сообщение об ошибке с помощью TempData и Bootstrap Modal. Но когда я пытаюсь проверить, работает ли это, хотя TempData не имеет значения null, модальное окно не отображается. И я использую одну и ту же технику для разных областей одного и того же проекта. Но это единственный, который не работает. Сопутствующее действие:

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-код и модальное окно:

@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>

Это вызов AJAX:

 $('#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);
}