ASP.NET Core Examples with Datastar

What is Datastar?

Datastar is a lightweight hypermedia framework that brings reactive functionality to server-rendered applications. It combines the best of both worlds:

• The simplicity and reliability of server-side rendering
• The dynamic, reactive user experience in the style of a Single Page Application (SPA) but with very little to no JavaScript

Project Status

These ASP.NET Core Examples with Datastar are currently in development. The project is open source and contributions are welcome.

• working ASP.NET Core Web App (Model-View-Controller)
• not working ASP.NET Core Web App (Razor Pages) > can't get Active Search or Progress Bar to work with Datastar
• working ASP.NET Core Minimal API
• not setup yet FastEndpoints is alternative to Minimal APIs & MVC

Datastar Benefits

Say Goodbye to Full Page Refreshes

The dreaded full page refresh is a thing of the past with Datastar - enjoy smooth, partial updates that keep your users in flow

Build Like a Pro, Code Like a Beginner

Create sophisticated, reactive web applications without wrestling with complex state management of some JavaScript frameworks

Your Server, Your Rules

Keep all your business logic where it belongs - on the server. No more duplicating validation rules or business logic in JavaScript

Instant Feedback

Create responsive interfaces that feel like native apps - type in a search box and watch results filter instantly, all without complex client-side code

Learn Once, Build Anything

If you can build a traditional web page, you can build reactive applications. No need to learn Redux, React, or complex state management patterns

Focus on Features, Not Plumbing • Spend your time building features

Spend your time building features users love instead of managing state, writing JavaScript, or debugging client-server communication

Real-Time Magic

Update multiple parts of your page instantly - imagine a chat application where messages, user lists, and notifications all update in real-time without writing a single line of JavaScript

Why use Datastar?

• Minimal JavaScript • Just include a single 13.3 KiB file - smaller than Alpine.js and HTMX combined
• HATEOAS Compliant • The only JavaScript you need is the library itself - no additional client-side code required
• Server Technology Agnostic • Write your backend in any language
• Real-time Updates • Utilizes server-sent events for fast, responsive experiences

Datastar Examples

PORTED HTMX EXAMPLES

✓ ACTIVE SEARCH

This example actively searches a notes database as the user enters text

✗ ANIMATIONS

Use CSS transitions to add smooth animations and transitions to your web page

✗ BULK UPDATE

This example shows how to implement a common pattern where rows are selected and then bulk updated.

✗ CLICK TO EDIT

The click to edit pattern provides a way to offer inline editing of all or part of a record without a page refresh

✓ CLICK TO LOAD

This example shows how to implement click-to-load the next page in a table of data

✓ DELETE ROW

This example shows how to implement a delete button that removes a table row upon completion

✗ DIALOGS BROWSER

Dialogs can be triggered with the standard browser prompt and confirm within an expression

✗ EDIT ROW

This example shows how to implement editable rows

✗ FILE UPLOAD

In this example we show how to create a file upload form that will be submitted via fetch

✓ INDICATOR

Show a loading indicator

✗ INFINITE SCROLL

The infinite scroll pattern provides a way to load content dynamically on user scrolling action

✗ INLINE VALIDATION

This example shows how to do inline field validation

✓ LAZY LOAD

This example shows how to lazily load an element on a page. We start with an initial state showing a spinner and the loading text

✗ LAZY TABS

Shows how easy it is to implement tabs using Datastar

✓ PROGRESS BAR

This example shows how to implement an updating progress graphic

✗ SORTABLE

In the original example you had to hook into HTMX's events. With Datastar, you can easily listen for custom events using data-on-*, and update signals to effect change

✗ VALUE SELECT

In this example we show how to make the values in one select depend on the value selected in another select.