flurium/htmx-prototype

Prototype of using HTMX with Asp.Net Core instead of JavaScript UI framework

htmx-prototype

Prototype of using HTMX with Asp.Net Core instead of JavaScript UI framework

Requirements

You need to implement certain behaviours (functionality) to see HTMX in usage:

• infinite scroll with loading of new items
• sending and validation forms, including images
• autosave on typing with debounce
• pasing new html into existing page
• using boost

Implementation

We don't need authorization for now, let's not complicate.

Home page should contain form to add new item and list of all items. List sholud be lazily loaded using infinite scroll. Form should have image field and several validations. When product is successfully added into database htmx should add item for this html at the top of current list (without refreshing whole page and without loading all products from start).

Product Edit page should save changes on typing but with debounce (waiting untill stops typing).

As well there should be product details page.

Tech Stack

• Asp.Net Core
• Pico CSS
• HTMX

Remove jQuery and Bootstrap and any other unnesessary libraries. Download htmx and pico css minified files and serve as static ones, don't forget version.

htmx-prototype's Issues

Delete MUST NOT reload all items

Fix delete of item. Item itself should disappear.
All other items should not be effected!
No reloading of all items. Just remove this one.

Form image field

Image field should be not a link, but FILE.

<input type="file" />

Use hx-boost

To make pages load more smoothly, add hx-boost attribute to body.
Read more about what it does in docs, simple thing.

Form validation

Required fields should be required! I want to see also validation for image file size (no more than 5MB).
If more then html should show error. This validation should happen on backend.

Sort items

Sort items by name or by creation date/time

Clear form after submission

After I click a button Add you need to clear form

Fix routing

When I click on Privacy in navbar I get super strange route:

Fix it