Food Ordering System Part 9 | How to Configure a Shared Layout & Navbar in ASP.NET Core MVC

on


Stop repeating code and start building a professional structure! In Part 9 of our Online Food Ordering System series, we dive deep into Shared Layout Settings in ASP.NET Core MVC. Learn how to customize the _Layout.cshtml file to create a consistent Navigation Bar (Navbar), a professional Footer, and manage your CSS/JS dependencies. We’ll show you how to use @RenderBody(), integrate Bootstrap icons, and ensure your Food Menu and Cart links are accessible from every page. Perfect for developers looking to master MVC UI architecture and clean coding practices!

This code is the Master Layout (_Layout.cshtml) of your application. It acts as a template that holds your site's Navigation Bar, Styles, and Footer in one place so you don't have to rewrite them for every page.

Step-by-Step Code Explanation

  1. Head Section & CDN Links:

    • Bootstrap 5.3: We use the latest CSS framework for a responsive, mobile-friendly design.

    • Bootstrap Icons: Adds the shop and cart icons to your Navbar.

  2. Custom CSS (The Design):

    • .hero-section: Uses a beautiful linear gradient (Purple/Blue) to give your website a premium, modern look.

    • .food-card:hover: Adds a "Smooth Hover Effect." When a user hovers over a pizza or burger, the card lifts slightly, making the site feel interactive.

    • .cart-badge: Positions the "red dot" correctly over the shopping cart icon so users can easily see how many items they've added.

  3. The Sticky Navbar:

    • Uses sticky-top so the menu stays at the top of the screen even when the user scrolls down.

    • Links to / (Home) and /Menu ensure easy navigation.

  4. @RenderBody(): This is the most important part of an MVC layout. It is a placeholder where all your individual views (Home, Menu, Cart) are injected.

  5. The Footer: A clean, dark-themed section that provides copyright info, making your site look like a legitimate business.

VIEWS/SHARED/_LAYOUT.CSHTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Food Ordering System</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
        }

        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 100px 0;
        }

        .food-card {
            transition: transform 0.3s;
        }

            .food-card:hover {
                transform: translateY(-5px);
            }

        .cart-badge {
            position: relative;
            top: -10px;
            left: -5px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
        <div class="container">
            <a class="navbar-brand" href="/"><i class="bi bi-shop"></i> Food Order</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="bi bi-cart3"></i> Cart
                            <span class="badge bg-danger cart-badge" id="cartCount">0</span>
                        </a>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="#">Login</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <main role="main">
        @RenderBody()
    </main>

    <footer class="bg-dark text-white text-center py-4 mt-5">
        <div class="container">
            <p>&copy; 2026 Food Ordering System. All rights reserved.</p>
        </div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Comments

Post a Comment