HTMX for ASP.NET Core Developers

In this video, JetBrains developer advocate Khalid Abuhakmeh introduces you to HTMX. HTMX is a JavaScript library designed to bring the fun back into building robust client-side applications. HTMX relies on server-rendered HTML to create client-side experiences with an approachable declarative set of attributes that support all of the HTTP methods typically unavailable as part of traditional HTML forms.

We’ll walk through 15 steps of using HTMX. From installing the library into an existing ASP.NET Core application to 13 examples of using HTMX to provide UI experiences from the simple to the extremely complex. Finally, we’ll look at a “real world” sample of HTMX in use in a shopping cart site.

0:00 HTMX for ASP.NET Core developers
0:03 Installation
2:01 Hello World
6:02 State Management
9:31 Cascading Selects
16:34 Typeahead Search
22:22 Infinite Scrolling
26:02 Modal dialogs
33:32 Server-side Tabs
38:21 Keyboard Shortcuts
40:04 Server-side Form Validation
45:22 Long Polling
49:09 Server-sent Events
55:17 HTMX NuGet Packages for ASP.NET Core
1:01:44 Out of Band Swaps
1:05:21 The JetSwag Store Demo

Other links:

#htmx #csharp #dotnet

[guyincognito]

Wow, this was a great tutorial! Makes me rethink a lot of what I'm doing with client-side frameworks like React, Angular and Blazor. Sometimes all you need is Razor Pages and a little HTMX!

[bobiyo]

This is actually a game changer for .net developers considering Blazor or other front end frameworks like Angular for richer interactivity, a TOTAL game changer. Although I am just discovering HTMX I am now struggling to justify why the need to even go the Blazor route at all especially if you already have solid and sound .net core skills, this will save a ton of time. EXCELLENT video well done.

[nark]

Great stuff! Glad you ended up using Partial views in the end, instead of writing the content string directly in the code-behind file 😃

[i_Amazin_]

In the "State Management" section, you'll notice that he needs to double click the increment button for it to go to 1. This is because count++ doesn't increment the count until AFTER execution. I think if you go ++count, then you'll get the incremented value on first click.

[HamadaSys]

♥♥♥♥♥
great tutorial and wonderfull video

[SajadJalilian]

I'm really a fan of htmx just like you. I believe any pragmatic developer really appreciate the approach htmx is bringing to mainstream.
PS I do hate JS monopoly on frontend.

[CodingHaribo]

I think I'm really gelling wiht this HTMX and SSR approach. I just wish there was a way to write HTML more fluently/idiomatically in the C# code. Anyone shout out if you know something?

[shasanji]

Global cart not get update when you updating from the _product.chtml. what change should i do

[Muescha]

Ist there only the quality of 360p available? The text is hard to read

[Christobanistan]

Can you PLEASE do these videos in Dark Mode? I am nearly blind due to Diabetes, and light backgrounds are impossible to see for me and millions of programmers like me.

[SpaceGuideHub]

Вы берете большие деньги за ваш редактор Intelejji IDIA, не давая обычным пользователям купить недорогую платную версию. Пускай и подпиской на год. Например, чтоб пользоваться плагином ktor, нужно купить професиональную версию и платить большие деньги каждый год. Я хотел изучить ktor, но в нем черт ногу сломает. Теперь учу пайтон чтоб его использовать на сервере...