Dark Mode in ASP.NET Core MVC Applications

Introduction

Dark Mode in ASP.NET Core MVC Applications is essential for ASP.NET Core MVC developers building ShopNest Enterprise MVC — Toolliyo's 100-article enterprise learning platform covering products, orders, cart, payments, dashboard, and audit logs. Whether you target campus drives at TCS, Infosys, or Wipro, or build admin portals at product companies, this lesson delivers production-grade MVC depth.

In Indian delivery projects, teams lose sprints when juniors skip dark mode fundamentals — fat controllers, missing anti-forgery tokens, or domain entities leaked to Razor views. This article prevents that class of failure on Admin Dashboard.

After this article you will

• Explain Dark Mode in plain English and in technical MVC terms
• Implement dark mode in ShopNest.Mvc (Admin Dashboard)
• Compare the wrong approach vs the production-ready enterprise approach
• Answer fresher and mid-level MVC interview questions confidently
• Connect this lesson to Article 91 and the 100-article MVC roadmap

Prerequisites

• Software: .NET 8 SDK, VS 2022 or VS Code, SQL Server Express / LocalDB
• Knowledge: C# basics
• Previous: Article 89 — Responsive UI Design in ASP.NET Core MVC
• Time: 24 min reading + 30–45 min hands-on

Concept deep-dive

Level 1 — Analogy

Dark Mode on ShopNest Enterprise MVC is like adding a new department to a growing retail platform — clear boundaries keep delivery teams productive.

Level 2 — Technical

Dark Mode integrates with the ASP.NET Core MVC pipeline: register services in Program.cs, handle requests in controllers, render HTML via Razor views. On ShopNest Enterprise MVC this powers Admin Dashboard without coupling UI to database internals.

Level 3 — Architecture

[Browser] → [HTTPS/Kestrel] → [Middleware Pipeline]
  → [Routing] → [Controller Action] → [Service Layer]
  → [EF Core / Identity] → [Razor View Engine] → [HTML Response]

Project structure

ShopNest.Mvc/
├── Controllers/       ← HTTP request handlers
├── Models/            ← Domain entities + ViewModels
├── Views/             ← Razor .cshtml templates
├── Services/          ← Business logic (DI)
├── Data/              ← DbContext, migrations
├── Areas/Admin/       ← Admin module (Article 9+)
├── wwwroot/           ← CSS, JS, Bootstrap
└── Program.cs         ← DI + middleware pipeline

Hands-on — ShopNest Enterprise MVC (Admin Dashboard)

Step 1 — The wrong way

// ❌ BAD — fat controller, no ViewModel, sync DB call
public IActionResult Index()
{
    var products = _context.Products.ToList(); // blocks thread
    ViewBag.Message = "Welcome"; // magic strings
    return View(products); // exposes domain entity
}

Step 2 — The right way

// ✅ CORRECT — Dark Mode on ShopNest (Admin Dashboard)
public async Task Index(CancellationToken ct)
{
    var model = await _productService.GetListingAsync(ct);
    return View(model); // strongly typed ViewModel
}

Step 3 — Apply Dark Mode

// Dark Mode in Views/Shared/_Layout.cshtml or wwwroot/js/site.js
// ShopNest admin dashboard integration

dotnet build
dotnet run --project ShopNest.Mvc
# Verify in browser at https://localhost:5xxx

UI & frontend

ShopNest admin uses Bootstrap 5 grid, form validation classes, responsive navbar, and DataTables for order grids. Keep CSS in wwwroot/css/site.css and JS in wwwroot/js/site.js.

Common errors & fixes

🔴 Mistake 1: Fat controllers with EF Core queries inline
✅ Fix: Move data access to services/repositories; keep controllers thin.

🔴 Mistake 2: Missing [ValidateAntiForgeryToken] on POST forms
✅ Fix: Add anti-forgery token to prevent CSRF attacks on checkout and admin forms.

🔴 Mistake 3: Returning domain entities directly to Razor views
✅ Fix: Use ViewModels — prevents over-posting and hides internal fields.

🔴 Mistake 4: Hard-coding connection strings in controllers
✅ Fix: Use appsettings.json + User Secrets locally; Azure Key Vault in production.

Best practices

• 🟢 Use async/await end-to-end for database and I/O calls
• 🟢 Register DbContext as Scoped; avoid capturing it in singletons
• 🟡 Use ViewModels — never pass EF entities directly to views
• 🟡 Add [ValidateAntiForgeryToken] on every POST action
• 🔴 Log structured data with Serilog — include OrderId, UserId, not passwords
• 🔴 Use HTTPS, secure cookies, and authorization policies in production

Interview questions

Fresher level

Q1: What is Dark Mode in ASP.NET Core MVC?
A: Dark Mode is a core MVC capability used in ShopNest Enterprise MVC for Admin Dashboard. Explain in one sentence, then describe controller/view/service placement.

Q2: How would you implement Dark Mode on a TCS-style delivery project?
A: Thin controllers, ViewModels, async EF Core, DI in Program.cs, Bootstrap 5 admin UI, and unit tests for services.

Q3: MVC vs Web API — when to use which?
A: MVC for server-rendered HTML (admin panels, SEO storefronts); Web API for JSON consumed by Angular/React/mobile.

Mid / senior level

Q4: Explain the MVC request lifecycle briefly.
A: Browser → Kestrel → Middleware → Routing → Controller action → Service/EF Core → Razor view → HTML response.

Q5: Common production mistake with this topic?
A: Skipping validation, exposing secrets in Git, or untested edge cases (null model, unauthorized user).

Q6: .NET 8/9 vs .NET Framework for MVC?
A: Core is cross-platform, faster, cloud-ready; Framework is maintenance mode on Windows/IIS.

Coding round

Write a LINQ query: top 3 customers by total order value on ShopNest orders.

var top = await _context.Orders
    .GroupBy(o => o.CustomerId)
    .Select(g => new { CustomerId = g.Key, Total = g.Sum(o => o.GrandTotal) })
    .OrderByDescending(x => x.Total).Take(3).ToListAsync();

Summary & next steps

• Article 90: Dark Mode in ASP.NET Core MVC Applications
• Module: Module 9: UI & Frontend · Level: INTERMEDIATE
• Applied to ShopNest Enterprise MVC — Admin Dashboard

Previous: Responsive UI Design in ASP.NET Core MVC
Next: Build a Student Management System with ASP.NET Core MVC

Practice: Add one small feature using today's pattern — commit with feat(mvc): article-90.

FAQ