Razor Pages vs MVC — Choosing the Right Pattern

Razor Pages is an alternative ASP.NET Core page model that co-locates the page’s code and markup in a single unit — a .cshtml file with a PageModel class. Unlike MVC, where controllers and views are in separate files, a Razor Page handles its own GET and POST requests through OnGet and OnPost handlers. Razor Pages often simplifies CRUD-heavy pages: the overhead of a controller class, a service registration, and separate view files for a simple create form can feel disproportionate. Understanding both patterns and knowing when to choose each is essential for building production ASP.NET Core applications.

Razor Pages vs MVC — Side by Side #

// ── MVC approach — three files for a create post page ─────────────────────
// 1. Controllers/PostsController.cs
public class PostsController(IPostService service) : Controller
{
    [HttpGet]
    public IActionResult Create() => View(new CreatePostViewModel());

    [HttpPost, ValidateAntiForgeryToken]
    public async Task<IActionResult> Create(CreatePostViewModel model)
    {
        if (!ModelState.IsValid) return View(model);
        await service.CreateAsync(model.ToRequest());
        return RedirectToAction(nameof(Index));
    }
}

// 2. Views/Posts/Create.cshtml — separate view file
// 3. ViewModels/CreatePostViewModel.cs — separate ViewModel

// ── Razor Pages approach — one self-contained file ─────────────────────────
// Pages/Posts/Create.cshtml  (and Create.cshtml.cs PageModel)
// OR: fully inline with @functions or separate code-behind class

// Create.cshtml.cs — PageModel
public class CreateModel(IPostService service) : PageModel
{
    // [BindProperty] tells model binding to populate this on POST
    [BindProperty]
    public CreatePostViewModel Post { get; set; } = new();

    public void OnGet()
    {
        // Nothing needed — Post is initialised with defaults
    }

    public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid) return Page();  // re-display the page
        await service.CreateAsync(Post.ToRequest());
        TempData["Success"] = "Post created!";
        return RedirectToPage("Index");  // redirect to Index.cshtml page
    }
}

// Create.cshtml — the view (with @page directive for routing)
// @page
// @model CreateModel
//
// <h1>Create Post</h1>
// <form method="post">
//     <input asp-for="Post.Title" />
//     <button type="submit">Create</button>
// </form>

When to Choose Each Pattern #

Common Mistakes #

Mistake 1 — Using Razor Pages for complex multi-step workflows #

❌ Wrong — wizard-style multi-step form spread across many PageModel classes with complex state passing.

✅ Correct — use MVC controllers for complex workflows where a single controller orchestrates multiple views and state.

Mistake 2 — Missing @page directive (page not addressable as URL) #

❌ Wrong — Razor Page without @page is treated as a regular Razor view, not a page endpoint.

✅ Correct — every Razor Pages file must start with @page as the first directive.