🛒 Supermarket MVC Web App Tutorial – ASP.NET Core CRUD with MySQL

Focus: Learn ASP.NET Core MVC with MySQL integration step by step

---

❓ What is MVC?

MVC = Model, View, Controller. It helps separate concerns in your application:

1️⃣ Model (Data Part)

• Represents database tables
• Contains properties (columns)
• Handles database logic
• No UI code

2️⃣ View (UI Part)

• What the user sees
• HTML + Razor (.cshtml)
• Displays data on screen
• No database logic

3️⃣ Controller (Brain / Logic Part)

• Handles requests from user
• Gets data from Model and sends to View
• Handles button clicks (Create, Edit, Delete)

📂 Entities

• Customer
• Item
• Order
• OrderItem (Many-to-Many)

---

1️⃣ Create Project (Visual Studio IDE)

1. Open Visual Studio
2. Create New Project → Select ASP.NET Core Web App (Model-View-Controller)
3. Name: SupermarketMVC
4. Framework: .NET 6 or 7
5. Authentication: None → ✔ Create

2️⃣ Install Required NuGet Packages

Install-Package Microsoft.EntityFrameworkCore
Install-Package Microsoft.EntityFrameworkCore.Tools
Install-Package Pomelo.EntityFrameworkCore.MySql

3️⃣ MySQL Connection (appsettings.json)

"ConnectionStrings": {
  "DefaultConnection": "server=localhost;database=supermarketdb;user=root;password=;"
}

4️⃣ Create DbContext

📁 Data/ApplicationDbContext.cs

using Microsoft.EntityFrameworkCore;
using SupermarketMVC.Models;

public class ApplicationDbContext : DbContext
{
    public ApplicationDbContext(DbContextOptions options)
        : base(options) { }

    public DbSet Customers { get; set; }
    public DbSet Items { get; set; }
    public DbSet Orders { get; set; }
    public DbSet OrderItems { get; set; }
}

5️⃣ Register DbContext (Program.cs)

builder.Services.AddDbContext(options =>
    options.UseMySql(
        builder.Configuration.GetConnectionString("DefaultConnection"),
        new MySqlServerVersion(new Version(8, 0, 36))
    ));

---

🧩 Models

📁 Models/Customer.cs

public class Customer
{
    public int CustomerId { get; set; }
    public string? Name { get; set; }
    public string? Phone { get; set; }
    public ICollection? Orders { get; set; }
}

📁 Models/Item.cs

public class Item
{
    public int ItemId { get; set; }
    public string? ItemName { get; set; }
    public decimal Price { get; set; }
    public ICollection OrderItems { get; set; }
}

📁 Models/Order.cs

public class Order
{
    public int OrderId { get; set; }
    public DateTime OrderDate { get; set; }
    public int CustomerId { get; set; }
    public Customer? Customer { get; set; }
    public ICollection? OrderItems { get; set; }
}

📁 Models/OrderItem.cs

public class OrderItem
{
    public int OrderItemId { get; set; }
    public int OrderId { get; set; }
    public Order? Order { get; set; }
    public int ItemId { get; set; }
    public Item? Item { get; set; }
    public int Quantity { get; set; }
}

---

6️⃣ Create Database (Migration)

Copy paste these in Terminal.

Add-Migration InitialCreate
Update-Database
✔ MySQL database will be created automatically

---

🎮 Controllers (CRUD)

👤 CustomerController

Handles all customer operations (Create, Read, Update, Delete)

using Microsoft.AspNetCore.Mvc;
using supermarketMVC.Data;
using supermarketMVC.Models;

namespace supermarketMVC.Controllers
public class CustomerController : Controller
{
    private readonly ApplicationDbContext _context;

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

    public IActionResult Index()
    {
        return View(_context.Customers.ToList());
    }

    public IActionResult Create()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Create(Customer customer)
    {
        _context.Customers.Add(customer);
        _context.SaveChanges();
        return RedirectToAction("Index");
    }

    public IActionResult Edit(int id)
    {
        return View(_context.Customers.Find(id));
    }

    [HttpPost]
    public IActionResult Edit(Customer customer)
    {
        _context.Customers.Update(customer);
        _context.SaveChanges();
        return RedirectToAction("Index");
    }

    public IActionResult Delete(int id)
    {
        var customer = _context.Customers.Find(id);
        _context.Customers.Remove(customer);
        _context.SaveChanges();
        return RedirectToAction("Index");
    }
}

📦 ItemController & OrderController

Similar CRUD structure as CustomerController. Use _context.Items and _context.Orders.

🧾 OrderItemController

Handles adding items to orders and linking relationships.

---

👁️ Views (Razor Pages)

👁️ VIEWS

📁 Views/Customer/Create.cshtml

Example: Views/Customer/Index.cshtml

<form method="post">
<input name="Name" placeholder="Name" />
<input name="Phone" placeholder="Phone" />
<button type="submit">Save</button>
</form>

📁 Views/Customer/Index.cshtml

@model List<Customer>

<a href="/Customer/Create">Add Customer</a>

<table>
@foreach (var c in Model)
{
<tr>
    <td>@c.Name</td>
    <td>@c.Phone</td>
    <td>
        <a href="/Customer/Edit/@c.CustomerId">Edit</a>
        <a href="/Customer/Delete/@c.CustomerId">Delete</a>
    </td>
</tr>
}
</table>

---

✅ Special: Transaction Example (EF Core)

Place multiple order items in one transaction safely

uusing Microsoft.AspNetCore.Mvc;

using Microsoft.EntityFrameworkCore;
using supermarketMVC.Data;
using supermarketMVC.Models;

namespace supermarketMVC.Controllers
{
public class OrderController : Controller
{
private readonly ApplicationDbContext _context;

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

[HttpPost]
public IActionResult PlaceOrder(int customerId, List<OrderItem> orderItems)
{
using var transaction = _context.Database.BeginTransaction();

try
{
// 1️⃣ Create Order
var order = new Order
{
CustomerId = customerId,
OrderDate = DateTime.Now
};

_context.Orders.Add(order);
_context.SaveChanges();

// 2️⃣ Add Order Items + Update Stock
foreach (var oi in orderItems)
{
var item = _context.Items.Find(oi.ItemId);

if (item == null || item.Stock < oi.Quantity)
throw new Exception("Insufficient stock");

item.Stock -= oi.Quantity;

oi.OrderId = order.OrderId;
_context.OrderItems.Add(oi);
}

_context.SaveChanges();

// 3️⃣ Commit
transaction.Commit();

return RedirectToAction("Index");
}
catch (Exception ex)
{
// ❌ Rollback if ANY error
transaction.Rollback();
return BadRequest(ex.Message);
}
}
}
}

---

📌 Folder Structure & Setup

• Models → Customer, Item, Order, OrderItem
• Controllers → CustomerController, ItemController, OrderController, OrderItemController
• Views → Razor pages for CRUD operations

📥 GitHub Setup

git clone https://github.com/sherulfernando2000/superMarketMVC-.NET.git
cd supermarket-mvc
dotnet restore
Add-Migration InitialCreate
Update-Database
dotnet run

🎯 Your MVC Supermarket App is ready!

Learn how to build a full CRUD Supermarket Web App using ASP.NET Core MVC and MySQL with C#. Includes models, views, controllers, and transaction handling.