Tutorials ASP.NET Core Tutorial
Models and ViewModels — Complete Guide
Models and ViewModels — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of ASP.NET Core Tutorial on Toolliyo Academy.
On this page
ASP.NET Core Tutorial (ShopNest) · Lesson 13 of 100
Models and ViewModels
Beginner → Intermediate → Advanced → Professional
Beginner · 1 — Foundations · ~12 min read · Module 2: MVC Fundamentals
Introduction
This lesson is part of the beginner section. We explain Models and ViewModels slowly, with examples you can copy and run. If something is unclear, read it twice — that is how everyone learns. A model represents data — often a C# class matching a database table or form. A ViewModel is a class shaped for one screen, combining fields the view needs without exposing the whole entity. Passing EF entities directly to views can over-post fields a hacker can abuse. ViewModels keep forms safe and simple.
Models and ViewModels appears in almost every web app you will build. Once it clicks, EF Core and Web API become much easier.
When will you use this?
You use this in every web page and form you build from your first app to production.
- Product pages, login forms, and admin dashboards all use controllers, views, and models.
- When a user submits an order form, model binding maps form fields to a C# class.
Real-world: HDFC-style net banking API
The Banking team building HDFC-style net banking API uses Models and ViewModels to separate database Product from ProductEditViewModel shown on the form. account holders never see the C# code — they just get a fast, reliable transfer endpoints and account balance.
Production-style code
// Entity
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = "";
public decimal CostPrice { get; set; } // admin only
public decimal SalePrice { get; set; }
}
// ViewModel for storefront
public class ProductCardVm
{
public string Name { get; set; } = "";
public decimal SalePrice { get; set; }
}What happens in production: In HDFC-style net banking API, getting Models and ViewModels right means account holders trust the transfer endpoints and account balance every day.
Lesson example (start here)
Copy this smaller example first. Once it works, compare it with the real-world code above.
// Entity
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = "";
public decimal CostPrice { get; set; } // admin only
public decimal SalePrice { get; set; }
}
// ViewModel for storefront
public class ProductCardVm
{
public string Name { get; set; } = "";
public decimal SalePrice { get; set; }
}Line-by-line walkthrough
| Code | What it means |
|---|---|
// Entity | Comment — notes for humans; the compiler ignores it. |
public class Product | Part of the Models and ViewModels example — read it together with the lines before and after. |
{ | Part of the Models and ViewModels example — read it together with the lines before and after. |
public int Id { get; set; } | Part of the Models and ViewModels example — read it together with the lines before and after. |
public string Name { get; set; } = ""; | Part of the Models and ViewModels example — read it together with the lines before and after. |
public decimal CostPrice { get; set; } // admin only | Part of the Models and ViewModels example — read it together with the lines before and after. |
public decimal SalePrice { get; set; } | Part of the Models and ViewModels example — read it together with the lines before and after. |
} | Closes a block started by { above. |
// ViewModel for storefront | Comment — notes for humans; the compiler ignores it. |
public class ProductCardVm | Part of the Models and ViewModels example — read it together with the lines before and after. |
{ | Part of the Models and ViewModels example — read it together with the lines before and after. |
public string Name { get; set; } = ""; | Part of the Models and ViewModels example — read it together with the lines before and after. |
public decimal SalePrice { get; set; } | Part of the Models and ViewModels example — read it together with the lines before and after. |
} | Closes a block started by { above. |
How it works (big picture)
- The view only gets Name and SalePrice — not CostPrice.
- Map from Product to ProductCardVm in the controller or a service.
Do this on your computer
- Create a Product class and a ProductEditVm with only form fields.
- Build a create form bound to ProductEditVm.
- Map to Product before saving to the database.
- Read the real-world section and name which part of the app uses this topic.
- Run the example locally with dotnet run and confirm the same behavior.
- Change one value in the example (route, text, or connection string) and predict what will happen before you save.
Experiments — try changing this
- Change a string or route in the example and save — watch the browser or Swagger response update.
- Break the code on purpose (remove a semicolon), read the error message, then fix it.
Remember
Model = domain/data shape. ViewModel = what one view needs. Do not expose internal fields to the browser.
Common questions
ViewModel vs DTO?
Similar idea — DTO often used for API responses; ViewModel for MVC views.
How long should I spend on Models and ViewModels?
Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new concept; setup lessons may take one afternoon.
What if I get stuck on Models and ViewModels?
Re-read the line-by-line walkthrough, check the terminal for red errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.
Where is Models and ViewModels used in real jobs?
See the real-world section above — the same pattern appears in LMS, banking, e-commerce, and SaaS backends. Interviewers ask you to explain it using one concrete example.