Razor Pages for Front-End Devs: Modern Workflows in Visual Studio

2026-02-02 dotnet 3 min read

Modernizing the Razor Workflow

Coming from a world of Vite and Svelte, Visual Studio can feel heavy. But for a UI-first developer, Razor Pages is actually a 'Super-HTML' environment. By layering modern front-end tools like Gulp and SCSS over the robust .NET 8 framework, you get the best of both worlds.

1. The Pro UI Editor Setup

First, we make Visual Studio 2022 behave like a modern code editor. Consistency in indentation and formatting is the foundation of a clean codebase.

Formatting: Use Ctrl + K, Ctrl + D to format the entire document instantly.
Auto-Format: Enable 'Format on Save' under Tools → Options → Text Editor → HTML → Advanced.
Extension: Install Web Essentials 2022 for better syntax highlighting and alignment within .cshtml files.

2. Integrating SCSS & Live Reload

Don't settle for standard CSS. We can use Gulp to proxy our .NET server, giving us SCSS compilation and BrowserSync auto-refresh.

javascript

// gulpfile.js snippet
function serve() {
  browserSync.init({
    proxy: "https://localhost:7048", // Matches your VS IIS Express URL
    notify: false
  });
  gulp.watch("wwwroot/scss/**/*.scss", styles);
  gulp.watch("Pages/**/*.cshtml").on('change', browserSync.reload);
}

The Directory Secret: For the best experience, move your package.json and node_modules to the project root, keeping your source assets in wwwroot/scss.

Rendering diagram...

3. Razor Fundamentals

Understanding the core directives is key to moving data from C# to the screen.

@page: This makes the file a reachable URL. Without it, the file is just a snippet.
@model: Connects your UI to a C# PageModel. This is your 'code-behind' where logic lives.
@RenderBody(): Found in _Layout.cshtml, this is the slot where your specific page content is injected.

6. The UI Architecture Trinity

As a front-end developer, you need to know which 'component' type to reach for. Here is the breakdown of Partials, View Components, and Tag Helpers.

A. Partials (The 'Snippets')

When to use: For static or simple UI chunks that rely on the parent page's data (e.g., a site footer or a simple contact form).

html


<div class="card">
    <h3>@Model.Name</h3>
</div>


<partial name="_UserCard" model="Model.CurrentUser" />

B. View Components (The 'Widgets')

When to use: When a UI piece needs its own data logic independent of the page it sits on (e.g., a dynamic Sidebar that pulls from a database, or a complex Shopping Cart summary). Usually we are 'returning' something at his point.

csharp

// The 'Code-Behind' for a View Component
public class PriorityListViewComponent : ViewComponent {
    public async Task<IViewComponentResult> InvokeAsync(int maxItems) {
        var items = await _service.GetItemsAsync(maxItems);
        return View(items);
    }
}

C. Tag Helpers (The 'Attributes')

When to use: To extend existing HTML elements with server-side logic (e.g., adding validation to an input or conditionally hiding a button).

html


<button asp-if="@Model.IsAdmin" class="btn-delete">Delete Post</button>

Decision Matrix

Feature	Partial	View Component	Tag Helper
Own Logic?	No	Yes (Independent)	No (Attribute based)
Complexity	Low	High	Medium
Best For	DRY HTML	Mini-Apps/Widgets	HTML Augmentation

html

<form method="post">
    <label>User Email</label>
    <input type="email" asp-for="UserEmail" />
    <button type="submit">Register</button>
</form>

Cheat Sheet: Visual Studio & Razor Shortcuts

Action	Shortcut
Format Document	`Ctrl + K, Ctrl + D`
Format Selection	`Ctrl + K, Ctrl + F`
Run Project (Debug)	`F5`
Open Terminal	Ctrl + `
Build Solution	`Ctrl + Shift + B`

*Pro Tip: Always run 'npx gulp' AFTER launching your project with F5 to ensure the proxy connects correctly!*

You're reading the first article in this series.

End of this category