Food Ordering System Part 7 | How to Create a Professional Home Page in ASP.NET Core MVC

on


 Build a stunning, data-driven Home Page in ASP.NET Core MVC! In Part 7 of our Online Food Ordering System series, we show you how to fetch food items from SQL Server using Entity Framework Core and display them in a professional, responsive grid. Learn how to pass data from Controller to View, use ViewModels, and style your menu with Bootstrap. Transform your backend database into a modern web UI today. Perfect for C# developers and students!

This HomeController is the "Brain" of your project's main page. It acts as the middleman between your SQL Database and the User Interface.

Short Explanation of the Code:

  • Dependency Injection (_context): The constructor public HomeController(ApplicationDbContext context) pulls in your database settings. This allows the controller to talk to the tables we created in Part 4.

  • The Index() Action: This is the default method that runs when a user visits your website.

  • LINQ Query:

    • .Where(f => f.IsAvailable): It filters the food menu to only show items that are currently in stock.

    • .Take(6): This limits the display to 6 items, making it look like a clean "Featured Products" section rather than a cluttered list.

    • .ToList(): This executes the search and converts the data into a list that C# can easily pass to the front-end.

  • return View(featuredItems): This sends the list of 6 food items to your Index.cshtml file so the user can see the images and prices.

Controllers/HomeController.cs 
using Microsoft.AspNetCore.Mvc;
using FoodOrderingSystem.Models;
using System.Linq;

namespace FoodOrderingSystem.Controllers
{
    public class HomeController : Controller
    {
        private readonly ApplicationDbContext _context;

        public HomeController(ApplicationDbContext context)
        {
            _context = context;
        }

        public IActionResult Index()
        {
            var featuredItems = _context.FoodItems
                .Where(f => f.IsAvailable)
                .Take(6)
                .ToList();

            return View(featuredItems);
        }
    }
}

This Index.cshtml file is the View that turns your database data into a beautiful, interactive webpage. It uses Razor Syntax (mixing HTML with C#) to create a dynamic user experience.

Short Explanation of the Code:

  • @model List<FoodItem>: This tells the view to expect a list of food items sent from the HomeController. It allows the page to access properties like Name, Price, and ImageUrl.

  • Hero Section: This is your "Call to Action." It uses a large heading and an "Order Now" button to grab the user's attention immediately upon landing.

  • @foreach (var item in Model): This is the heart of the page. It loops through every food item in your database list and creates a visual "Card" for each one automatically.

  • Bootstrap Grid (col-md-4): This ensures your page is responsive. It displays 3 items per row on desktops and stacks them vertically on mobile phones.

  • object-fit: cover: This is a clever CSS trick that ensures your food images look perfect and don't look stretched, regardless of their original size.

  • Add to Cart Link: The button includes a query string (?foodItemId=@item.Id). This tells the server exactly which pizza or burger the user wants to buy when they click it.


Views/Home/Index.cshtml 
@model List<FoodItem>
@{
    ViewData["Title"] = "Home";
}

<!-- Hero Section -->
<div class="hero-section text-center">
    <div class="container">
        <h1 class="display-3 mb-4">Delicious Food Delivered To Your Door</h1>
        <p class="lead mb-4">Order your favorite meals online and enjoy quick delivery</p>
        <a href="/Menu" class="btn btn-light btn-lg">Order Now <i class="bi bi-arrow-right"></i></a>
    </div>
</div>

<!-- Featured Items Section -->
<div class="container my-5">
    <h2 class="text-center mb-4">Featured Items</h2>
    <div class="row">
        @foreach (var item in Model)
        {
            <div class="col-md-4 mb-4">
                <div class="card food-card h-100 shadow">
                    <img src="@item.ImageUrl" class="card-img-top" alt="@item.Name" style="height: 200px; object-fit: cover;">
                    <div class="card-body">
                        <h5 class="card-title">@item.Name</h1>
                        <p class="card-text text-muted">@item.Description</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="h5 mb-0 text-primary">$@item.Price</span>
                            <a href="/Order/AddToCart?foodItemId=@item.Id" class="btn btn-primary">
                                <i class="bi bi-cart-plus"></i> Add to Cart
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

Comments

Post a Comment