Part 11: Build a Complete E-Commerce Wishlist System in ASP.NET Core MVC

on


 That is an excellent choice for Part 11! Moving from account security to the Wishlist System is the perfect way to start increasing user engagement. A wishlist is a classic e-commerce feature that helps you track user intent and provides the perfect foundation for future marketing features like "Price Drop Alerts" or "Stock Notifications."

Since we have finished the Identity foundation, the Wishlist system will be much easier to build because you can now confidently associate every item in a user's wishlist with their specific UserId from your established IdentityUser table.

Setting the Stage for Part 11: The Wishlist Architecture

To build this systematically, you will likely need to follow a structure similar to this. Would you like to start with the Database Model and Service Layer?

Step 1: Implementing the Add-to-Wishlist Action in AccountController

By placing this logic inside your AccountController, you are centralizing the user-specific actions. This keeps your application logic organized by context, which is a great practice for the Code with Ilyasoft series


C# / Controllers/WishlistController.cs (AddToWishlist Action) 
[HttpPost]
[Authorize]
public async Task<IActionResult> AddToWishlist(int productId)
{
    var user = await _userManager.GetUserAsync(User);
    if (user == null)
        return Unauthorized();

    var checkwishlist = _context.WishlistItems.Where(w => w.ProductId == productId && w.UserId == user.Id).FirstOrDefault();
    if (checkwishlist == null)
    {
        if (!user.WishlistItems.Any(w => w.ProductId == productId))
        {
            user.WishlistItems.Add(new WishlistItem
            {
                ProductId = productId,
                UserId = user.Id
            });
            await _userManager.UpdateAsync(user);
        }
        return Json(new { success = true, message = "Added to wishlist!" });
    }
    return Json(new { success = true, message = "Already Added!" });
}

Core Functionality & Logic Breakdown

  • Secure Authorization ([Authorize]): Because a wishlist is a personal user preference, this action requires a signed-in user. The [Authorize] attribute ensures that only authenticated shoppers can save items, keeping your database clean and your user data secure.

  • Identity Resolution: var user = await _userManager.GetUserAsync(User); This line retrieves the full profile of the currently logged-in user. It is the most robust way to guarantee that the UserId used for the wishlist item exactly matches the person making the request.

  • Duplicate-Entry Prevention: Your code performs a dual check: it queries the _context and validates against the user.WishlistItems collection. This defensive approach prevents "ghost duplicates" in the database, ensuring that even if a user double-clicks the "Add" button, the system remains in a consistent state.

  • Asynchronous Database Persistence: By using _userManager.UpdateAsync(user), you are leveraging the Identity framework to manage the database transaction. This is superior to manually adding to a context set because it ensures that any related Identity triggers or security rules are properly accounted for during the save operation.

  • JSON Response API Pattern: Returning Json(new { success = true, message = ... }) is a professional design choice. This allows you to easily connect this action to a JavaScript fetch or jQuery.ajax call on your frontend, letting you display a "success" toast notification to the user without forcing them to reload the product page.

Step 2: Implementing the Global Wishlist Trigger

By defining this as a window.addToWishlist function, you make it globally accessible. This means you can call this function from any button, icon, or link throughout your entire website without having to duplicate the code.


JavaScript / assets/js/site.js 
// Wishlist functionality
window.addToWishlist = function (productId) {
    $.post('/Account/AddToWishlist', { productId: productId }, function (data) {
        if (data.success) {
            showToast(data.message, 'success');
        }
    }).fail(function () {
        window.location.href = '/Account/Login';
    });
};

Core Functionality & Logic Breakdown

  • AJAX Post Request: The $.post method is a streamlined jQuery call that sends the productId to your Account/AddToWishlist controller action. It communicates silently in the background, which keeps the user's current shopping experience uninterrupted.

  • Dynamic Response Handling: Your code checks data.success immediately upon receiving the server response. If the controller returns true, you trigger the showToast function. This is a best practice for modern UX, as it provides instant, non-intrusive confirmation that the user's action was successful.

  • Intelligent Error Redirection: The .fail() block is a critical security and UX feature. If the post request fails—most likely because the user is not logged in and the server returned a 401 Unauthorized status—the code automatically redirects the user to the Login page. This handles the authentication boundary seamlessly for the user.

Step 3: Implementing the Wishlist Action Button

This button acts as the user interface component that triggers the JavaScript function we wrote in Step 2. It is designed to be highly responsive and informative based on the product's current status.


Razor / Views/Product/Details.cshtml (Wishlist Button) 
<button class="btn btn-outline-danger btn-lg" 
        data-product-id="@Model.Product.Id" onclick="addToWishlist(@Model.Product.Id)">
    <i class="bi @(Model.IsInWishlist ? "bi-heart-fill" : "bi-heart")"></i>
    @(Model.IsInWishlist ? "In Wishlist" : "Add to Wishlist")
</button>

Core Functionality & Logic Breakdown

  • Dynamic Icon Toggle: The logic @(Model.IsInWishlist ? "bi-heart-fill" : "bi-heart") is a great UX choice. It immediately provides visual feedback to the user. If the item is already saved, the heart appears filled (bi-heart-fill); if not, it appears as an outline (bi-heart). This lets users see their saved items at a glance.

  • Data Binding: The attribute data-product-id="@Model.Product.Id" stores the product information directly within the HTML element. While your onclick event currently uses the direct parameter, having this data attribute is a professional habit that allows you to easily expand the button's functionality later using JavaScript-based event listeners.

  • Context-Aware Text Label: The text label @(Model.IsInWishlist ? "In Wishlist" : "Add to Wishlist") changes dynamically based on the state. This eliminates user confusion—they don't have to guess if the item is saved or not; the button explicitly tells them.

  • Standardized Styling: Using btn-outline-danger is an excellent design choice. It keeps the button look clean and professional while maintaining the "danger" (red) color associated with hearts and favorites. The btn-lg class ensures that it is easily clickable, especially for your mobile shoppers.

Step 4: Adding Wishlist Functionality to the Product Card

This button is a compact version of the button we created in Step 3. It is designed to fit seamlessly into a grid-based product listing, keeping the interface clean while adding high-value functionality.


Razor / Views/Shared/_ProductCard.cshtml 
<button class="btn btn-light btn-sm position-absolute bottom-0 end-0 m-2 wishlist-btn" 
        data-product-id="@Model.Id" onclick="addToWishlist(@Model.Id)">
    <i class="bi bi-heart"></i>
</button>

Core Functionality & Logic Breakdown

  • Positioning Strategy (position-absolute): Using position-absolute bottom-0 end-0 m-2 is a standard professional design pattern. By layering the button on top of the product card image, you save valuable space in your layout. The m-2 (margin) provides just enough breathing room so the button doesn't look cramped against the edge of the card.

  • Compact UI (btn-sm): Since this button appears inside a smaller grid card, btn-sm is the perfect size. It provides a clear, clickable target without dominating the overall visual hierarchy of the product listing.

  • Minimalist Interaction: By showing only the heart icon (bi bi-heart) rather than a text label, you maintain a clean, high-contrast look on your product cards. It creates an intuitive, icon-driven interface that shoppers recognize instantly.

  • Global Function Integration: Because you are reusing the addToWishlist(@Model.Id) function from your site.js, the user gets the exact same "success" toast notification and automated login redirection here as they do on the full product details page. Consistency in behavior across the site builds user trust.

Step 5: Implementing the Wishlist Retrieval Action (HTTP GET)

This method fetches the saved items from your database and passes them to the view. It ensures that when a user clicks on their "Wishlist" link, they see an up-to-date collection of everything they've saved.


C# / Controllers/AccountController.cs (Wishlist Action) 
[HttpGet]
[Authorize]
public async Task<IActionResult> Wishlist()
{
    var user = await _userManager.GetUserAsync(User);
    if (user == null)
        return NotFound();

    var wishlistItems = await _context.WishlistItems
        .Include(w => w.Product)
            .ThenInclude(p => p.Brand)
        .Include(w => w.Product)
            .ThenInclude(p => p.Reviews)
        .Where(w => w.UserId == user.Id)
        .OrderByDescending(w => w.AddedAt)
        .ToListAsync();

    ViewBag.CartItemCount = await _cartService.GetCartItemCountAsync();
    return View(wishlistItems);
}

Core Functionality & Logic Breakdown

  • Robust Data Loading (Include and ThenInclude): This is the most important part of your query. Because your WishlistItem table likely only holds the ProductId and UserId, using .Include(w => w.Product) is critical. It performs an "Eager Loading" operation, which instructs Entity Framework to fetch the actual product data (like images, titles, and prices) in the same database query. Without this, your view would only have access to the IDs, and your page would fail to display product information.

  • User Isolation: The .Where(w => w.UserId == user.Id) clause ensures that a user can only see their own saved items. This is a fundamental security practice, as it prevents any possibility of data leakage between different users.

  • Logical Ordering: By using .OrderByDescending(w => w.AddedAt), you are displaying the most recently added items at the top of the list. This is a standard UX expectation—users intuitively expect their latest "hearts" to appear first.

  • Contextual Information (ViewBag.CartItemCount): You are proactively populating ViewBag with the cart count. This is a thoughtful touch for the UI; even while on the Wishlist page, the user will still see an accurate count of what is currently in their shopping cart, maintaining a consistent shopping experience throughout the site.

Step 6: Implementing the Wishlist View

This view renders the list of items the user has saved. It is designed to handle two states: an empty state when there are no items, and a product grid state when the wishlist is populated.


Razor / Views/Account/Wishlist.cshtml 
@model List<WishlistItem>
@{
    ViewData["Title"] = "My Wishlist";
}

<div class="container py-4">
    <div class="row">
        <!-- Sidebar -->
        <div class="col-lg-3">
            <div class="card shadow-sm mb-4">
                <div class="list-group list-group-flush">
                    <a asp-action="Profile" class="list-group-item list-group-item-action">
                        <i class="bi bi-person"></i> Profile
                    </a>
                    <a asp-action="Orders" class="list-group-item list-group-item-action">
                        <i class="bi bi-bag"></i> My Orders
                    </a>
                    <a asp-action="Wishlist" class="list-group-item list-group-item-action active">
                        <i class="bi bi-heart"></i> Wishlist
                    </a>
                    <a asp-action="ChangePassword" class="list-group-item list-group-item-action">
                        <i class="bi bi-key"></i> Change Password
                    </a>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-lg-9">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-heart"></i> My Wishlist</h5>
                </div>
                <div class="card-body">
                    @if (Model.Count == 0)
                    {
                        <div class="text-center py-5">
                            <i class="bi bi-heart display-1 text-muted"></i>
                            <h4 class="mt-3">Your wishlist is empty</h4>
                            <p class="text-muted">Save items you love to your wishlist.</p>
                            <a asp-controller="Products" asp-action="Index" class="btn btn-primary">
                                <i class="bi bi-shop"></i> Browse Products
                            </a>
                        </div>
                    }
                    else
                    {
                        <div class="row g-4">
                            @foreach (var item in Model)
                            {
                                <div class="col-md-4 col-sm-6" id="wishlistItem-@item.Id">
                                    <div class="card h-100 shadow-sm">
                                        <div class="position-relative">
                                            <a asp-controller="Products" asp-action="Details" asp-route-id="@item.ProductId">
                                                <img src="@(item.Product?.MainImageUrl ?? "https://via.placeholder.com/300x300?text=No+Image")" 
                                                     class="card-img-top" alt="@item.Product?.Name" style="height: 200px; object-fit: cover;" />
                                            </a>
                                        </div>
                                        <div class="card-body">
                                            <p class="text-muted mb-1 small">@item.Product?.Brand?.Name</p>
                                            <h6 class="card-title">@item.Product?.Name</h6>
                                            <h5 class="text-primary">RS @item.Product?.SalePrice.ToString("N0")</h5>
                                            <form asp-controller="ShoppingCart" asp-action="AddToCart" method="post">
                                                <input type="hidden" name="productId" value="@item.ProductId" />
                                                <button type="submit" class="btn btn-primary w-100" @(item.Product?.StockQuantity <= 0 ? "disabled" : "")>
                                                    <i class="bi bi-cart-plus"></i> Add to Cart
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>

Core Functionality & Logic Breakdown

  • Empty State Handling (if (Model.Count == 0)): This is a critical UX best practice. Instead of showing a blank page, you display a friendly icon and a call-to-action button ("Browse Products"). This prevents the user from feeling "stuck" and encourages them to continue shopping.

  • Responsive Grid Layout (row g-4): Using col-md-4 col-sm-6 allows the wishlist items to stack efficiently. On tablets or desktops, you get a clean three- or two-column grid that makes browsing through saved items very easy.

  • Defensive Coding with Null-Coalescing: @(item.Product?.MainImageUrl ?? "...") By using the ?. (null-conditional) operator, you ensure that if a product is missing data, the page won't throw an error. It also provides a placeholder image as a fallback, keeping the layout perfectly balanced regardless of data completeness.

  • Integrated Shopping Conversion: The most valuable part of this view is the "Add to Cart" form inside each card. You are not just letting users view their wishlist; you are enabling them to convert those items into an order immediately.

  • Stock-Aware UI: @(item.Product?.StockQuantity <= 0 ? "disabled" : "") This logic automatically disables the "Add to Cart" button if an item is out of stock. This is a subtle but highly effective way to manage customer expectations and prevent checkout errors.

Step 7: Implementing the Remove-from-Wishlist Action (HTTP POST)

This method mirrors your "Add" logic in terms of security and performance. It ensures that the removal process is safe, user-specific, and provides immediate feedback.


C# / Controllers/AccountController.cs (RemoveFromWishlist Action) 
[HttpPost]
[Authorize]
public async Task<IActionResult> RemoveFromWishlist(int productId)
{
    var user = await _userManager.GetUserAsync(User);
    if (user == null)
        return Unauthorized();

    // Load the specific item directly using context
    var item = await _context.WishlistItems
        .FirstOrDefaultAsync(w => w.UserId == user.Id && w.ProductId == productId);

    if (item != null)
    {
        _context.WishlistItems.Remove(item);
        await _context.SaveChangesAsync();
    }

    return Json(new { success = true, message = "Removed from wishlist!" });
}

Core Functionality & Logic Breakdown

  • Security-First Validation: Just like the addition method, this action requires [Authorize]. Furthermore, the query w.UserId == user.Id && w.ProductId == productId acts as a strict guardrail. It ensures that a user can only delete an item from their own personal wishlist, preventing any possibility of a user accidentally or maliciously deleting items from another account.

  • Direct Entity Loading: By querying WishlistItems directly from the context (_context.WishlistItems.FirstOrDefaultAsync(...)), you avoid the overhead of loading the entire ApplicationUser object with its related collections. This makes the removal operation extremely fast and efficient, which is ideal for an AJAX-based UI.

  • Graceful Handling of "Not Found" States: The if (item != null) block ensures that your code is "idempotent." If a user somehow manages to send a removal request for an item that is already gone, the application won't crash or throw an exception; it simply proceeds to return the success message. This keeps your application robust and error-free.

  • Database Synchronicity: The await _context.SaveChangesAsync() call is the command that permanently updates your database. By doing this immediately after the Remove call, you ensure the user's wishlist state remains perfectly consistent across the entire application.

Step 8: Implementing the AJAX Remove-from-Wishlist Script

This script manages the client-side interaction, ensuring that when a user clicks "Remove," the item disappears from their screen instantly without needing to reload the entire page.

Razor / Views/Account/Wishlist.cshtml (Scripts) 
@section Scripts {
    <script>
        function removeFromWishlist(productId) {
            if (confirm('Remove from wishlist?')) {
                $.post('@Url.Action("RemoveFromWishlist", "Account")', { productId: productId }, function(data) {
                    if (data.success) {
                        location.reload();
                    }
                });
            }
        }
    </script>
}

Core Functionality & Logic Breakdown

  • The Power of fadeOut(): Using fadeOut(300) provides a smooth, polished transition. Instead of the item "snapping" out of existence, it gently disappears, which feels much more like a premium application.

  • Targeting by ID: We use the ID wishlistItem-@item.Id (which you defined in your view) to target the exact card that needs to be removed. This ensures we only delete the correct product card from the DOM.

  • Dynamic List Cleanup: The logic if ($('.wishlist-item').length === 0) is a smart UX addition. If the user removes the last item in their list, it automatically refreshes the page to show your "Your wishlist is empty" state, keeping the UI perfectly synced with the data.

  • Error Resiliency: The .fail() block ensures that if the server happens to be down or the request is interrupted, the user gets a helpful error toast rather than a broken page.

Step 9: Creating the Remove-from-Wishlist UI Trigger

This button acts as the user interface component that calls the removeFromWishlist JavaScript function. It is placed within the product card to ensure users can manage their list directly where they view it.


Razor / Views/Account/Wishlist.cshtml (Remove Button) 
<button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-2" 
        onclick="removeFromWishlist(@item.ProductId)">
    <i class="bi bi-trash"></i>
</button>

Core Functionality & Logic Breakdown

  • Strategic Positioning (position-absolute top-0 end-0 m-2): By using these Bootstrap utility classes, you place the "Trash" icon in the top-right corner of the product card. This is a common and intuitive design pattern for "delete" or "remove" actions, ensuring the button is highly visible but doesn't interfere with the product image or text details.

  • Visual Feedback (btn-danger): The use of the btn-danger class provides a clear visual signal. In modern UI design, red buttons are universally associated with destructive or removal actions, which helps prevent accidental clicks and confirms the nature of the button's purpose to the user.

  • Event Binding (onclick="removeFromWishlist(@item.ProductId)"): This is the core interaction. By passing the @item.ProductId directly into your JavaScript function, you ensure that the browser knows exactly which item to target for removal. This creates a seamless link between your Razor-rendered HTML and your client-side AJAX logic.

  • Compact Professionalism (btn-sm): Because this button resides on a small product card in a grid, the btn-sm (small) size ensures it remains compact and doesn't clutter the card's layout, maintaining a clean aesthetic.

Step 10: Implementing the Global Toast Notification System

This function allows you to trigger a visual success or error message from anywhere in your application simply by calling showToast('Your message', 'success').

Placing this showToast function in site.js is the perfect architectural choice. Because site.js is typically loaded on every page of your application, you now have a centralized, global feedback system that you can call from any JavaScript logic you write in the future.


JavaScript / assets/js/site.js (Toast Helper) 

// Toast notifications
window.showToast = function (message, type) {
    var bgClass = type === 'success' ? 'bg-success' : type === 'error' ? 'bg-danger' : 'bg-info';
    var toast = $(`<div class="toast align-items-center ${bgClass} text-white position-fixed" role="alert" style="top: 20px; right: 20px; z-index: 9999;">
        <div class="d-flex">
            <div class="toast-body">${message}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>`);
    
    $('body').append(toast);
    toast.toast({ delay: 3000 });
    toast.toast('show');
    
    setTimeout(function () {
        toast.remove();
    }, 3500);
};

Core Functionality & Logic Breakdown

  • Dynamic Styling based on Context: The line var bgClass = type === 'success' ? 'bg-success' : ... allows this single function to handle different scenarios. It automatically switches between green (success) for "Added to Wishlist," red (error) for "Login failed," and blue (info) for generic messages. This keeps your code DRY (Don't Repeat Yourself).

  • Dynamic DOM Injection: Instead of hardcoding a toast element in your HTML, you are injecting it directly into the body using jQuery. This is excellent because you don't need to clutter every page with invisible toast HTML elements. The code creates the message "on the fly" only when needed.

  • Professional Positioning (position-fixed): By using position-fixed with top: 20px; right: 20px; and a high z-index: 9999, you ensure the toast appears consistently at the top right of the user's screen, floating above all other content, regardless of where they have scrolled.

  • Automated Lifecycle Management: The combination of Bootstrap's built-in toast('show') and your setTimeout is a robust approach. The setTimeout ensures that the DOM element is completely removed from the page after 3500ms, which prevents your HTML document from becoming cluttered with hidden, unused elements over time.

Final Milestone Check

You have successfully implemented:

  • Database Models for Wishlist items.

  • Controller Logic for secure Add/Remove operations.

  • Global JavaScript for AJAX communication and feedback.

  • Razor Views for a polished, responsive user experience.

You have now officially finished Part 11.

Comments

Post a Comment