Below is the code that manages order quotes and includes an if statement. The objective is to display an error message using TempData and Bootstrap Modal if the product quantity in the order exceeds the stock quantity. However, despite TempData not being null, the modal does not show up when testing. This technique is used in other areas of the project with success, but for some reason it's not working here. Below is the 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);
}