ASP.NET Core Complete Tutorial (ShopNest)
Lesson 7 of 75 9% of course

Views and Razor Syntax in ASP.NET Core

1 · 5 min · 5/24/2026

Learn Views and Razor Syntax in ASP.NET Core in our free ASP.NET Core Complete Tutorial (ShopNest) series. Step-by-step explanations, examples, and interview tips on Toolliyo Academy.

Sign in to track progress and bookmarks.

Views and Razor Syntax — ShopNest Restaurant Menu
Article 7 of 75 · Module 1: Foundations · ShopNest Restaurant Menu App
Target keyword: razor views asp.net core · Read time: ~27 min · .NET: 8 / 9 · Project: ShopNest Restaurant Menu App

Introduction

Views turn C# data into HTML the browser understands. In ASP.NET Core MVC, views are Razor files (.cshtml) — HTML with embedded C# using the @ symbol. Controllers from Article 5 choose what to show; views define how it looks.

This lesson builds the ShopNest Restaurant Menu — categories, dishes, prices, dietary tags — using Razor expressions, loops, conditionals, layouts, and every way to pass data from controller to view.

After this article you will

  • Write Razor syntax: expressions, code blocks, @if, @foreach
  • Pass data via strongly-typed models, ViewBag, ViewData, TempData
  • Understand _Layout, _ViewStart, _ViewImports
  • Render a full restaurant menu from a collection

Prerequisites

Razor syntax essentials

Level 1 — Analogy

Razor is a merge template — like a restaurant menu Word doc with mail-merge fields. Static text stays HTML; @item.Name inserts live data from the kitchen (controller).

Level 2 — Technical

@* Comment — not sent to browser *@
@model IEnumerable<MenuItem>

<h1>ShopNest Bistro — Today's Menu</h1>
@foreach (var item in Model)
{
    <div class="menu-row">
        <h3>@item.Name</h3>
        <p>@item.Description</p>
        <span class="price">₹@item.Price.ToString("N0")</span>
        @if (item.IsVeg)
        {
            <span class="badge bg-success">Veg</span>
        }
    </div>
}

Implicit vs explicit expressions: @DateTime.Now.Year works; complex expressions need parentheses: @(user.IsAdmin ? "Admin" : "Guest").

Code blocks: @{ var total = Model.Count(); } runs C# without outputting text.

Passing data to views

MechanismType-safe?Best for
@model MenuPageViewModelYesPrimary pattern — always prefer this
ViewBag.Title = "Menu"No (dynamic)Page title, minor extras
ViewData["Title"]No (object dictionary)Same as ViewBag, string keys
TempData["Message"]NoFlash message after redirect (PRG)
// MenuController.cs
public IActionResult Index()
{
    var vm = new MenuPageViewModel
    {
        RestaurantName = "ShopNest Bistro",
        Items = _menuService.GetTodayMenu()
    };
    ViewBag.LastUpdated = DateTime.Now;
    return View(vm);
}

Layout, _ViewStart, _ViewImports

@* Views/Shared/_Layout.cshtml *@
<!DOCTYPE html>
<html>
<head><title>@ViewData["Title"] - ShopNest</title></head>
<body>
    <header>... nav ...</header>
    <main>@RenderBody()</main>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>
  • _ViewStart.cshtml — sets Layout = "_Layout" for all views in folder
  • _ViewImports.cshtml — common @using, @addTagHelper
  • @section Scripts { } — page-specific JS at bottom of layout

HTML Helpers vs Tag Helpers (preview)

Legacy: @Html.ActionLink("Menu", "Index", "Menu"). Modern (preferred): <a asp-controller="Menu" asp-action="Index">Menu</a>. Full Tag Helper guide in Article 11.

Hands-on — Restaurant menu

  1. Create MenuItem model: Name, Description, Price, Category, IsVeg.
  2. MenuController.Index returns list grouped by category.
  3. View uses @foreach with Bootstrap cards.
  4. Add filter tabs (All / Veg / Non-Veg) with @if.
@model MenuPageViewModel
@{
    ViewData["Title"] = Model.RestaurantName;
    var grouped = Model.Items.GroupBy(i => i.Category);
}
@foreach (var group in grouped)
{
    <h2 class="mt-4">@group.Key</h2>
    <div class="row">
    @foreach (var item in group)
    {
        <div class="col-md-4 mb-3">
            <div class="card">
                <div class="card-body">
                    <h5>@item.Name</h5>
                    <p>₹@item.Price</p>
                </div>
            </div>
        </div>
    }
    </div>
}

Interview questions

Q1: What is Razor?
A: Syntax for embedding C# in HTML views; compiled to C# classes at runtime/build.

Q2: ViewBag vs ViewData vs TempData?
A: ViewBag/ViewData for same-request data; TempData survives one redirect via session cookie.

Q3: What is @RenderBody()?
A: Placeholder in layout where individual view content is injected.

Q4: Strongly-typed view benefit?
A: Compile-time checking and IntelliSense via @model directive.

Summary

  • Razor mixes HTML and C# with @ syntax
  • Prefer strongly-typed @model over ViewBag
  • Layouts and sections keep ShopNest UI consistent
  • Restaurant menu demo shows loops, conditionals, grouping

Previous: Routing
Next: Layouts, Partial Views and View Components

FAQ

Can I use JavaScript frameworks instead of Razor?

Yes — SPA with React/Vue uses Razor minimally. Traditional ShopNest MVC pages still rely heavily on Razor for SEO-friendly server-rendered HTML.

Test your knowledge

Quizzes linked to this course—pass to earn certificates.

Browse all quizzes
ASP.NET Core Complete Tutorial (ShopNest)

On this page

Introduction After this article you will Prerequisites Razor syntax essentials Level 1 — Analogy Level 2 — Technical Passing data to views Layout, _ViewStart, _ViewImports HTML Helpers vs Tag Helpers (preview) Hands-on — Restaurant menu Interview questions Summary FAQ Can I use JavaScript frameworks instead of Razor?
Module 1: Foundations
What is ASP.NET Core? Complete Guide Setting Up ASP.NET Core Development Environment ASP.NET Core Project Structure Explained MVC Architecture in ASP.NET Core — Complete Guide Controllers and Actions in ASP.NET Core Routing in ASP.NET Core — Conventional and Attribute Routing Views and Razor Syntax in ASP.NET Core Layouts, Partial Views and View Components Models and ViewModels in ASP.NET Core Forms, Model Binding and Validation in ASP.NET Core Tag Helpers in ASP.NET Core — Complete Guide Static Files, Bundling and Minification in ASP.NET Core
Module 2: Entity Framework Core
Entity Framework Core — Introduction and Setup EF Core Code First — Models, Migrations, Database EF Core CRUD Operations — Create, Read, Update, Delete EF Core LINQ Queries — Beginner to Advanced EF Core Relationships — One-to-One, One-to-Many, Many-to-Many EF Core Fluent API — Advanced Configuration EF Core Repository Pattern and Unit of Work EF Core Performance Optimization Database First Approach with EF Core (Scaffold) EF Core with SQL Server — Advanced Features
Module 3: Dependency Injection & Middleware
Dependency Injection in ASP.NET Core — Complete Guide Middleware in ASP.NET Core — Complete Guide Configuration in ASP.NET Core — appsettings, Environment Variables, Secrets Filters in ASP.NET Core — Action, Authorization, Exception, Resource, Result Logging in ASP.NET Core — ILogger, Serilog, NLog Error Handling and Exception Management in ASP.NET Core
Module 4: Authentication & Security
ASP.NET Core Identity — Complete Setup Guide Authentication in ASP.NET Core — Cookie and JWT Authorization in ASP.NET Core — Roles, Policies, Claims JWT Authentication with Refresh Tokens — Complete Implementation OAuth2 and External Login (Google, Facebook, Microsoft) Data Protection and Encryption in ASP.NET Core HTTPS, SSL Certificates and Security Best Practices
Module 5: Web API
Building REST APIs with ASP.NET Core — Complete Guide API Versioning in ASP.NET Core Swagger / OpenAPI Documentation in ASP.NET Core Input Validation in Web APIs — FluentValidation and Data Annotations Pagination, Filtering and Sorting in ASP.NET Core APIs HTTP Client and Consuming External APIs in ASP.NET Core Minimal APIs in ASP.NET Core .NET 8 SignalR — Real-Time Web Applications
Module 6: Advanced Architecture
Clean Architecture in ASP.NET Core CQRS Pattern with MediatR in ASP.NET Core Repository Pattern — Deep Dive with Generic Repository Background Services and Hosted Services in ASP.NET Core Caching in ASP.NET Core — In-Memory, Distributed, Redis Health Checks in ASP.NET Core AutoMapper in ASP.NET Core Microservices with ASP.NET Core — Introduction Message Queues with RabbitMQ / Azure Service Bus in ASP.NET Core gRPC with ASP.NET Core
Module 7: Testing
Unit Testing ASP.NET Core with xUnit and Moq Integration Testing in ASP.NET Core Testing EF Core — In-Memory vs SQLite Performance Testing and Load Testing ASP.NET Core APIs Test-Driven Development (TDD) in ASP.NET Core
Module 8: Deployment & DevOps
Deploying ASP.NET Core to IIS on Windows Server Docker and Containerization for ASP.NET Core Deploying ASP.NET Core to Azure App Service CI/CD with GitHub Actions for ASP.NET Core Azure SQL Database with ASP.NET Core Environment Configuration and Secrets Management
Module 9: Real-World Projects
Build a Complete Blog Website with ASP.NET Core MVC Build an E-Commerce Product Catalog API (ASP.NET Core Web API) Build a Student Management System (Complete CRUD App) Build a Job Portal (Full Stack ASP.NET Core) Build a REST API with Clean Architecture — Complete Guide Build a Real-Time Chat App with SignalR and ASP.NET Core
Module 10: Advanced Topics
Blazor WebAssembly and Blazor Server — Complete Guide gRPC, GraphQL and Alternative API Styles in ASP.NET Core Rate Limiting and API Throttling in ASP.NET Core .NET 8 Output Caching in ASP.NET Core .NET 8 ASP.NET Core .NET 9 New Features — Complete Guide