What a Helper Is
A helper in ASP.NET Web Pages is a self-contained, reusable component that packages up a common task, such as rendering a data grid, sending an email, displaying a chart, or validating uploaded files, behind a simple method call you invoke from Razor markup. Microsoft ships a set of built-in helpers as part of the Microsoft.Web.Helpers and System.Web.Helpers namespaces, including WebGrid for tabular data display with sorting and paging, Chart for generating image-based graphs, WebMail for sending SMTP email, and WebImage for basic image manipulation like resizing and cropping, so a beginner can add sophisticated functionality without writing that logic from scratch.
Cricket analogy: A built-in helper is like a pre-approved bowling action a young fast bowler learns from a coaching manual at the MRF Pace Foundation, a proven technique you adopt directly instead of inventing your own delivery style from zero.
Using WebGrid and Chart
@{
var db = Database.Open("MySite");
var products = db.Query("SELECT Id, Name, Price FROM Products");
var grid = new WebGrid(products, rowsPerPage: 10);
}
<div id="productGrid">
@grid.GetHtml(
tableStyle: "table",
columns: grid.Columns(
grid.Column("Name"),
grid.Column("Price", format: (item) => item.Price.ToString("C"))
)
)
</div>
@{
var chart = new Chart(width: 400, height: 300)
.AddTitle("Monthly Sales")
.AddSeries(chartType: "column",
xValue: new[] { "Jan", "Feb", "Mar" },
yValues: new[] { "1200", "1450", "980" });
}
@chart.Write()WebGrid takes an IEnumerable data source, typically the result of a Database.Query call, and its GetHtml method produces a fully paged, sortable HTML table with a single line of Razor, letting you customize column headers, formatting, and even inject custom cell templates via lambda expressions. The Chart helper works similarly by building up a chart object with AddTitle and AddSeries calls and then either writing it directly into the page as an inline image with chart.Write() or saving it to a file, which is useful for dashboards showing sales or usage trends without pulling in a heavier third-party charting library.
Cricket analogy: WebGrid's paging is like a scoreboard operator displaying overs ten at a time rather than dumping all ninety overs of a Test day at once, giving the viewer a manageable, sortable slice of the full innings.
Built-in helpers like WebGrid, Chart, and WebMail live in the Microsoft.Web.Helpers and System.Web.Helpers assemblies, which WebMatrix references automatically for new sites. In some project templates you may need to add the corresponding NuGet package explicitly.
Writing a Custom @helper
When no built-in helper fits, Razor lets you define your own reusable markup snippet using the @helper syntax, which behaves like a small function that returns HTML rather than a value. A custom helper such as @helper RatingStars(int rating) can loop from 1 to 5 and output a filled or empty star span for each position, and once defined at the top of a page, or better, in a shared file under App_Code so it's available site-wide, you call it from anywhere in your markup with @RatingStars(4), keeping repeated markup patterns DRY across many pages.
Cricket analogy: A custom @helper is like a franchise designing its own signature victory lap format that isn't part of the official BCCI rulebook, a reusable ritual the team defines once and repeats after every win.
@helper RatingStars(int rating)
{
for (int i = 1; i <= 5; i++)
{
if (i <= rating)
{
<span class="star filled">★</span>
}
else
{
<span class="star empty">☆</span>
}
}
}
<p>Product rating: @RatingStars(4)</p>Helpers defined with @helper directly in a .cshtml page are only visible on that page. To reuse a helper across multiple pages, place it in a .cshtml file inside the App_Code folder instead.
- A helper packages reusable functionality, like grids, charts, or email, behind a simple method call from Razor.
- Built-in helpers include WebGrid for tabular data, Chart for graphs, WebMail for SMTP email, and WebImage for image manipulation.
- WebGrid.GetHtml() renders a sortable, paged table from an IEnumerable data source with minimal code.
- Chart builds a graph via AddTitle/AddSeries and outputs it inline with chart.Write().
- @helper defines a custom reusable markup-producing function directly in Razor syntax.
- Page-local @helper definitions are only visible on that page; App_Code makes a helper available site-wide.
- Custom helpers keep repeated markup patterns DRY across many pages in a Web Pages site.
Practice what you learned
1. What is the primary purpose of a helper in ASP.NET Web Pages?
2. Which built-in helper is used to render a sortable, paged HTML table from a data source?
3. What syntax is used to define a custom reusable Razor helper?
4. Where should a custom helper be placed to make it available across every page in the site?
5. Which built-in helper is used to generate image-based graphs like column or line charts?
Was this page helpful?
You May Also Like
Razor Syntax in Web Pages
A practical guide to the Razor markup syntax that lets you embed C# or VB.NET code inline with HTML using the @ symbol, including expressions, code blocks, loops, and conditionals.
WebMatrix and Project Structure
How Microsoft's free WebMatrix tool creates and organizes an ASP.NET Web Pages site, including the special App_Data, App_Start, and Account folders and the built-in development web server.
Layout Pages in Web Pages
How shared layout pages, the RenderBody and RenderSection methods, and reusable partial views let ASP.NET Web Pages sites keep a consistent header, footer, and navigation across many content pages.
What Is ASP.NET Web Pages?
An introduction to ASP.NET Web Pages, a lightweight framework that mixes server-side C# or VB.NET code directly into HTML using Razor syntax, aimed at simple, file-based site development.
Related Reading
Related Study Notes in Microsoft Technologies
Browse all study notesWindows 10 / UWP Development Study Notes
.NET · 30 topics
Microsoft TechnologiesWindows Batch Scripting Study Notes
Batch · 30 topics
Microsoft TechnologiesMFC (Microsoft Foundation Classes) Study Notes
C++ · 30 topics
Microsoft TechnologiesSilverlight Study Notes
.NET · 30 topics
Microsoft TechnologiesXAML Study Notes
.NET · 30 topics
Microsoft TechnologiesWPF (Windows Presentation Foundation) Study Notes
.NET · 30 topics