Getting Started with htmx and ASP.NET Core Razor Pages

Learn htmx fundamentals with ASP.NET Core Razor Pages. Build interactive web apps using server-rendered HTML fragments-no JavaScript frameworks needed.
Duration: 1 Day
Hours: 4 Hours
Training: Live Training
Training Level: All Level
Live Session
Single Attendee
$149.00 $249.00
Live Session
Recorded
Single Attendee
$199.00 $332.00
6 month Access for Recorded
Live+Recorded
Single Attendee
$249.00 $416.00
6 month Access for Recorded

About the Course:

This 4-hour beginner workshop introduces .NET developers to htmx and the hypermedia-driven approach to building interactive web applications. You'll learn why htmx is gaining popularity as a simpler alternative to JavaScript SPA frameworks, and how it leverages the web's original architecture, HTML as the API contract, to create dynamic user experiences.

Through hands-on labs, you'll build a task management application from scratch, learning the "Fragment-First" architecture pattern that makes htmx applications maintainable. You'll master the core htmx attributes (hx-get, hx-post, hx-target, hx-swap, hx-trigger) and implement real-time form validation with server-side logic. By the end, you'll have a solid foundation for building htmx applications and be ready to tackle advanced patterns.

This workshop is the recommended starting point before attending the Expert Workshop.

Course Objectives

  • Understand the hypermedia architecture and "HTML over the wire" philosophy
  • Learn the Fragment-First design pattern for maintainable htmx applications
  • Master core htmx attributes: hx-get, hx-post, hx-target, hx-swap, hx-trigger, and hx-indicator
  • Create Razor Pages handlers that return partial view fragments
  • Implement partial page updates without full page reloads
  • Build real-time form validation with server-side logic and immediate UI feedback
  • Troubleshoot common htmx integration issues
  • Establish conventions for handler naming and fragment organization

Who is the Target Audience?

  • ASP.NET Core developers new to htmx
  • Developers curious about alternatives to JavaScript SPA frameworks
  • Teams evaluating htmx for server-rendered applications
  • Developers comfortable with Razor Pages who want to add interactivity
  • Anyone seeking a gentler learning curve for modern web interactivity
  • Backend developers (non-.NET) exploring simpler front-end approaches (e.g., Node, Java, Python developers tired of heavy SPA frameworks)
  • Full-stack developers looking to reduce frontend complexity and JavaScript dependency
  • Frontend developers interested in server-driven UI and HTML-first architectures
  • Software architects evaluating modern alternatives to SPA-heavy stacks
  • Engineering managers and tech leads exploring simpler, more maintainable web architectures for their teams
  • Startup founders or indie developers who want to build interactive apps quickly without large frontend overhead
  • Legacy system developers modernizing MVC or server-rendered applications
  • Developers interested in progressive enhancement and performance-first web development
  • Devs burned out by React/Angular/Vue complexity and looking for lightweight alternatives
  • QA engineers or SDETs wanting to better understand server-driven UI interactions and testing implications
  • Bootcamp graduates or junior developers seeking a simpler path to building dynamic web apps
  • Product engineers working on internal tools or dashboards where simplicity and speed matter more than SPA complexity

Basic Knowledge:

  • Basic proficiency in C# programming
  • Familiarity with ASP.NET Core and Razor Pages basics
  • Understanding of HTML and basic HTTP concepts (GET, POST)
  • Development environment: Visual Studio 2022, VS Code, or JetBrains Rider
  • .NET 8 SDK or later installed

Curriculum
Total Duration: 4 Hours
Foundations: 

  • Hypermedia + htmx Mental Model
    • What hypermedia means in web apps (HTML as the contract, links/forms as state transitions); why htmx exists (progressive enhancement, less JavaScript); core htmx vocabulary (hx-get, hx-post, hx-target, hx-swap, hx-trigger, hx-indicator); how Razor Pages handlers and partials fit the htmx model; live instructor demo

Lab 1: 

  • Baseline Razor Pages App + Fragment-First Architecture
    • Open and run starter project; establish sample domain (Tasks) with list and create form; identify fragment boundaries (list region, form region, message region); create partials (_TaskList, _TaskForm, _Messages); add stable target element IDs (#task-list, #task-form, #messages)

Lab 2: 

  • Partial Updates with hx-get + hx-post
    • Convert Create form to hx-post returning updated list fragment; use hx-target and hx-swap="outerHTML" for targeted updates; add Refresh List button using hx-get; introduce hx-vals for passing parameters; add loading indicator with hx-indicator; basic error fragment response

Checkpoint: 

  • Troubleshooting + Pattern Review
    • Verify dev loop (run, debug, inspect network requests); common gotchas (wrong hx-target, missing IDs, incorrect handler names); establish return partial vs return page conventions; the IsHtmx() and Fragment() helper methods

Lab 3: 

  • Real-Time Validation and Form UX
    • Add data annotations and server validation; implement validate-as-you-type with hx-trigger="keyup changed delay:500ms"; create dedicated field validation fragment; full form submit with retargeting for validation errors; ensure antiforgery token flows correctly; success message and form reset pattern

Wrap-Up: 

  • Conventions + Next Steps
    • Fragment inventory documentation; handler naming conventions (OnGetList, OnPostCreate); response rules summary; introduction to advanced patterns (preview of Expert Workshop); Q&A