Aspnet Views
title: ASP.NET Core Views — Complete Guide to Razor View Engine description: 'Learn ASP.NET Core Razor views: Razor syntax, @ directives, layout pages, partial views, View Components, Tag Helpers, form handling, and strongly-typed views.' date: 2026-06-28 lastmod: 2026-06-28 weight: 16 tags: [backend, aspnet]
ASP.NET Core Razor views generate HTML using C# expressions embedded in markup with @ syntax, supporting layouts, partials, Tag Helpers, and strongly-typed model binding.
## What You'll Learn
By the end of this tutorial, you'll write Razor syntax with C# expressions, create layouts and partial views, use Tag Helpers for forms and links, build View Components, and work with strongly-typed views.
## Real-World Use
An e-commerce site uses Razor layouts for consistent header/footer, partial views for product cards, and Tag Helpers for forms and validation. View Components render the shopping cart.
## Views Learning Path
```mermaid
flowchart LR
A[Controllers] --> B[Views]
B --> C[Models]
C --> D[Routing]
D --> E[Middleware]
B --> F{You Are Here}
style F fill:#f90,color:#fff
Strongly-Typed View
@model IEnumerable<Product>
@{
ViewData["Title"] = "Product Catalog";
}
<h1>@ViewData["Title"]</h1>
<div class="row">
@foreach (var product in Model)
{
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">@product.Name</h5>
<p class="card-text">@product.Price.ToString("C")</p>
<a asp-action="Details" asp-route-id="@product.Id"
class="btn btn-primary">View</a>
</div>
</div>
</div>
}
</div>
Layout Page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - MyApp</title>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar">@await Html.PartialAsync("_Navbar")</nav>
</header>
<main class="container">
@RenderBody()
</main>
<footer>
<p>© 2026 - MyApp</p>
</footer>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Tag Helpers
<!-- Form with Tag Helpers -->
<form asp-controller="Products" asp-action="Create" method="post">
<div class="form-group">
<label asp-for="Name"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Price"></label>
<input asp-for="Price" class="form-control" />
<span asp-validation-for="Price" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Create</button>
</form>
<!-- Link Tag Helper -->
<a asp-controller="Products" asp-action="Details" asp-route-id="5">View Product</a>
<!-- Image Tag Helper -->
<img asp-append-version="true" src="~/images/logo.png" alt="Logo" />
Partial Views
<!-- _ProductCard.cshtml -->
@model Product
<div class="card">
<img src="@Model.ImageUrl" class="card-img-top" alt="@Model.Name">
<div class="card-body">
<h5>@Model.Name</h5>
<p>@Model.Price.ToString("C")</p>
</div>
</div>
<!-- Usage in parent view -->
<partial name="_ProductCard" model="product" />
View Components
// Components/ShoppingCartViewComponent.cs
public class ShoppingCartViewComponent : ViewComponent
{
private readonly ICartService _cartService;
public ShoppingCartViewComponent(ICartService cartService)
{
_cartService = cartService;
}
public async Task<IViewComponentResult> InvokeAsync()
{
var items = await _cartService.GetCartItemsAsync();
return View(items);
}
}
<!-- Usage in layout or view -->
@await Component.InvokeAsync("ShoppingCart")
Common Mistakes
1. Putting Logic in Views
Views should only contain display logic (@if for visibility, @foreach for lists). Business logic belongs in controllers and services.
2. Not Using Strongly-Typed Views
Using ViewBag for everything loses IntelliSense and type safety. Define @model at the top of every view.
3. Ignoring HTML Encoding
Razor auto-encodes @Model.Name for XSS protection. Use @Html.Raw() only when you trust the source.
4. Not Using Tag Helpers
Manual HTML form elements are error-prone. Tag Helpers generate proper names, IDs, and validation attributes.
5. Complex Razor Expressions
Keep @{} code blocks simple. Complex C# logic in views is hard to test and maintain.
Practice Questions
1. What is Razor syntax?
Razor uses @ to transition from HTML to C#. @Model.Name renders the Name property, @foreach loops iterate collections.
2. How do layouts work in ASP.NET Core?
_Layout.cshtml defines the shared HTML structure. @RenderBody() inserts the specific page content. Sections provide named insertion points.
3. What is the purpose of partial views?
Partial views reuse UI fragments across multiple views. They render within a parent view.
4. How do Tag Helpers differ from HTML Helpers?
Tag Helpers look like HTML attributes (asp-controller, asp-action). HTML Helpers use C# methods (Html.ActionLink()). Tag Helpers are more intuitive for front-end developers.
5. Challenge: Create a layout with a navbar, footer, and a partial view for displaying alerts.
<!-- _Alert.cshtml -->
@model string
@if (!string.IsNullOrEmpty(Model))
{
<div class="alert alert-info">@Model</div>
}
FAQ
Mini Project: Product List View
Create a product listing view with layout, partial cards, and search form.
@model IEnumerable<Product>
@foreach (var product in Model)
{
<partial name="_ProductCard" model="product" />
}
<form asp-action="Search" method="get">
<input asp-for="SearchTerm" />
<button type="submit">Search</button>
</form>
What's Next
ASP.NET Core Models ASP.NET Core Routing
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro