Getting Started
3 snippetsRazor syntax basics
Basic Razor Page
@page
@model IndexModel
<h1>Welcome to Razor Pages</h1>
<p>Current time: @DateTime.Now</p>Code Block
@{
var message = "Hello, World!";
var count = 5;
}
<p>@message</p>
<p>Count: @count</p>Comments
@* Single line comment *@
@*
Multi-line
comment
*@Razor Syntax
4 snippetsExpressions and code blocks
Implicit Expression
<p>Hello, @Model.Name!</p>
<p>Price: @Model.Price</p>Explicit Expression
<p>Total: @(Model.Price * Model.Quantity)</p>
<p>Email: @(user.Email ?? "Not provided")</p>Multi-Statement Block
@{
var total = 0;
foreach (var item in Model.Items)
{
total += item.Price;
}
}
<p>Total: @total</p>Mixing HTML and Code
@foreach (var item in Model.Items)
{
<div class="item">
<h3>@item.Name</h3>
<p>Price: $@item.Price</p>
</div>
}Control Flow
6 snippetsConditionals and loops
If Statement
@if (Model.IsLoggedIn)
{
<p>Welcome back, @Model.Username!</p>
}
else
{
<a href="/login">Please log in</a>
}If-Else If-Else
@if (Model.Role == "Admin")
{
<p>Admin Dashboard</p>
}
else if (Model.Role == "User")
{
<p>User Dashboard</p>
}
else
{
<p>Guest Access</p>
}Switch Statement
@switch (Model.Status)
{
case "Active":
<span class="badge badge-success">Active</span>
break;
case "Pending":
<span class="badge badge-warning">Pending</span>
break;
case "Inactive":
<span class="badge badge-danger">Inactive</span>
break;
default:
<span class="badge badge-secondary">Unknown</span>
break;
}For Loop
@for (int i = 0; i < 5; i++)
{
<p>Item @i</p>
}Foreach Loop
<ul>
@foreach (var product in Model.Products)
{
<li>@product.Name - $@product.Price</li>
}
</ul>While Loop
@{
var i = 0;
}
@while (i < 5)
{
<p>Number: @i</p>
i++;
}Tired of looking up syntax?
DocuWriter.ai generates documentation and explains code using AI.
Model Binding
3 snippetsWorking with page models
Page Model
@page
@model ProductModel
<h1>@Model.Product.Name</h1>
<p>@Model.Product.Description</p>
<p>Price: $@Model.Product.Price</p>Form Binding
@page
@model CreateProductModel
<form method="post">
<input asp-for="Product.Name" />
<input asp-for="Product.Price" type="number" />
<button type="submit">Create</button>
</form>ViewData
@{
ViewData["Title"] = "Home Page";
ViewData["Message"] = "Welcome!";
}
<h1>@ViewData["Title"]</h1>
<p>@ViewData["Message"]</p>Tag Helpers
4 snippetsServer-side HTML generation
Form Tag Helper
<form asp-page="/Products/Create" method="post">
<input asp-for="Product.Name" />
<span asp-validation-for="Product.Name" class="text-danger"></span>
<input asp-for="Product.Price" />
<span asp-validation-for="Product.Price" class="text-danger"></span>
<button type="submit">Submit</button>
</form>Anchor Tag Helper
<a asp-page="/Products/Details" asp-route-id="@product.Id">
View Details
</a>
<a asp-page="/Products/Edit" asp-route-id="@product.Id">
Edit
</a>Environment Tag Helper
<environment include="Development">
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/css/site.min.css" />
</environment>Cache Tag Helper
<cache expires-after="@TimeSpan.FromMinutes(30)">
@await Component.InvokeAsync("RecentPosts")
</cache>Partial Views
2 snippetsReusable view components
Render Partial
@await Html.PartialAsync("_ProductCard", product)
@* Or using tag helper *@
<partial name="_ProductCard" model="product" />Partial Definition
@* _ProductCard.cshtml *@
@model Product
<div class="card">
<h3>@Model.Name</h3>
<p>@Model.Description</p>
<p class="price">$@Model.Price</p>
</div>Sections & Layouts
2 snippetsPage structure
Layout Page
@* _Layout.cshtml *@
<!DOCTYPE html>
<html>
<head>
<title>@ViewData["Title"]</title>
@await RenderSectionAsync("Styles", required: false)
</head>
<body>
<header>...</header>
@RenderBody()
<footer>...</footer>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>Using Layout
@{
Layout = "_Layout";
ViewData["Title"] = "Home Page";
}
@section Styles {
<link rel="stylesheet" href="~/css/home.css" />
}
<h1>Welcome to Home Page</h1>
<p>Content here...</p>
@section Scripts {
<script src="~/js/home.js"></script>
}HTML Helpers
3 snippetsGenerating HTML
Display Helpers
@Html.DisplayFor(m => m.Product.Name)
@Html.DisplayFor(m => m.Product.Price)
@Html.DisplayNameFor(m => m.Product.Name)
@Html.DisplayTextFor(m => m.Product.Description)Input Helpers
@Html.TextBoxFor(m => m.Product.Name, new { @class = "form-control" })
@Html.TextAreaFor(m => m.Product.Description, new { rows = 5 })
@Html.CheckBoxFor(m => m.Product.IsActive)
@Html.DropDownListFor(m => m.CategoryId, Model.Categories)Validation Helpers
@Html.ValidationSummary()
@Html.ValidationMessageFor(m => m.Product.Name)
@Html.ValidationMessageFor(m => m.Product.Price)