Food Ordering System Part 21 | How to Implement Order Cancellation Logic in ASP.NET Core MVC

on

 


In Part 21, we are implementing a vital business rule: Order Cancellation. This backend logic ensures that while users have the flexibility to change their minds, they can't cancel an order that is already being prepared or out for delivery.

Step-by-Step Code Explanation

  1. [HttpPost] Attribute: This ensures the method only responds to POST requests (usually from a button click or form submission), which is a security best practice for data-changing operations.

  2. Identity Verification: We fetch the UserId from the session. If the user isn't logged in, they are redirected to the Login page.

  3. Ownership Check: _context.Orders.FirstOrDefault(o => o.Id == orderId && o.UserId == userId) ensures the order actually exists and—more importantly—belongs to the person trying to cancel it.

  4. Business Logic Validation:

    • This is the "Safety Lock." The code checks if the status is anything other than "Pending" or "Confirmed."

    • If the kitchen has already started "Preparing" the food, we stop the cancellation and use TempData["Error"] to send a warning message back to the user.

  5. Status Update & Persistence: If the order passes the check, we set order.Status to "Cancelled" and call _context.SaveChanges() to commit that change to the database.

  6. User Feedback: We store a success message in TempData and redirect the user back to their order list to see the updated status.


ORDERCONTROLLER.CS (PART 21) 
[HttpPost]
public IActionResult CancelMyOrder(int orderId)
{
    var userId = HttpContext.Session.GetInt32("UserId");
    if (userId == null) return RedirectToAction("Login", "Account");

    var order = _context.Orders.FirstOrDefault(o => o.Id == orderId && o.UserId == userId);

    if (order == null) return NotFound();

    // Only allow cancellation if status is Pending or Confirmed
    if (order.Status != "Pending" && order.Status != "Confirmed")
    {
        TempData["Error"] = "Order cannot be cancelled at this stage!";
        return RedirectToAction("TrackOrder", new { id = orderId });
    }

    order.Status = "Cancelled";
    _context.SaveChanges();

    TempData["Success"] = "Order cancelled successfully!";
    return RedirectToAction("MyOrders");
}

In the final step of Part 21, we are adding the Cancel Order button to our frontend. This snippet is designed to be "smart"—it only appears when the order status allows it, ensuring your users have a clean and error-free experience in both the My Orders list and the Track Order dashboard.

Step-by-Step Code Explanation

  1. Conditional Rendering (@if): This is the most important part of the UI logic. By checking order.Status == "Pending" || order.Status == "Confirmed", the button automatically disappears once the restaurant starts preparing the food. This prevents users from trying to cancel an order that is already in the kitchen.

  2. POST Form Submission: We wrap the button in a <form> with method="post". This is a security requirement because cancelling an order changes data on the server, and GET requests should never be used for such actions.

  3. JavaScript Confirmation: The onsubmit="return confirm(...)" attribute adds a simple but effective native browser popup. It asks, "Are you sure?" before the form sends, preventing accidental cancellations.

  4. Hidden Input: Since the user doesn't need to type their Order ID, we use <input type="hidden"> to silently pass the @order.Id to our CancelMyOrder controller action.

  5. Styling:

    • btn-outline-danger: Uses a red outline style to signal a "destructive" or "warning" action.

    • w-100: Ensures the button stretches to fill its container, making it easy to tap on mobile devices.

    • bi-x-circle: Adds a clear "X" icon to represent cancellation visually.


MYORDERS / TRACKORDER (BUTTON UI) 
@if (order.Status == "Pending" || order.Status == "Confirmed")
{
    <form asp-action="CancelMyOrder" method="post" onsubmit="return confirm('Are you sure you want to cancel this order?');">
        <input type="hidden" name="orderId" value="@order.Id" />
        <button type="submit" class="btn btn-outline-danger w-100">
            <i class="bi bi-x-circle"></i> Cancel Order
        </button>
    </form>
}

Comments

Post a Comment