Back to "HTMX με ASP.NET Core Μερικά: Η Αναγέννηση Server-Side"

This is a viewer only at the moment see the article on how this works.

To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save icon lets you save the markdown file to disk

This is a preview from the server running through my markdig pipeline

ASP.NET Core HTMX HTMX.NET Web Development

HTMX με ASP.NET Core Μερικά: Η Αναγέννηση Server-Side

Friday, 28 November 2025

Εισαγωγή

Αν έχετε χτίσει παραδοσιακές εφαρμογές ASP.NET Core MVC, γνωρίζετε το πρόβλημα: ότι φοβάται "κλικ φλας" όταν οι χρήστες πλοηγούνται μεταξύ των σελίδων. Πλήρης σελίδα reloads, το πρόγραμμα περιήγησης χρώμιο τρεμοπαίζοντας, το περιεχόμενο που πηδά γύρω από τη νέα σελίδα κάνει. Αισθάνομαι μοντέρνο.

Η τεχνική της επιστροφής μερικών τμημάτων HTML από το διακομιστή και της ανταλλαγής τους στο DOM λύνει αυτό - και δεν είναι νέο. Χρησιμοποιώ αυτό το μοτίβο από τις ημέρες jQuery, και ακόμη και πριν από αυτό με τη βανίλια JavaScript και XMLHttpRequestΑυτό που άλλαξε είναι το πώς... κομψό Έχει γίνει με HTMX.

HTMX μας δίνει ένα δηλωτικό τρόπο για να κάνουμε ό, τι έχουμε κάνει πάντα: επιστροφή διακομιστή-διαχωρισμένο HTML και να το ανταλλάξετε στη σελίδα. Όχι άλλο γράψιμο έθιμο JavaScript για κάθε αλληλεπίδραση. Όχι πλέον επιλογή μεταξύ "κατάλληλη" ανάπτυξη server-side και ομαλή εμπειρία χρήστη. Με HTMX, παίρνουμε και τα δύο.

Άρθρο Σύντροφος: Για μια βαθιά κατάδυση σε εκδηλώσεις HTMX, κύκλο ζωής, και προσαρμοσμένες επεκτάσεις, δείτε το συνοδευτικό άρθρο μου: Μια Whistle-stop περιοδεία των επεκτάσεων HTMX και χρησιμοποιώντας HTMX με ASP.NET Core.

Σε αυτό το άρθρο, θα σας δείξω πώς HTMX ενσωματώνει όμορφα με ASP.NET Core partials, πώς το εξαιρετικό HTMX.NET βιβλιοθήκη κάνει ακόμα καλύτερα, και πώς μου ως επί το πλείστον διαυγής. pagingtag helper NuGet πακέτο χρησιμοποιεί HTMX παρέχει ισχυρή επικόλληση με minimal διαμόρφωση.

Η προσέγγιση είναι επίσης-αναγνωστική πλαίσιο - Django πρόσθεσε θραύσματα προτύπων στην έκδοση 6.0, Rails έχει Turbo Frames, και το ευρύτερο web οικοσύστημα αγκαλιάζει HTML-over-the-wire μοτίβα.

Τι είναι το HTMX;

HTML είναι μια βιβλιοθήκη που σας επιτρέπει να έχετε πρόσβαση σε σύγχρονα χαρακτηριστικά του προγράμματος περιήγησης απευθείας από την HTML, αντί να γράφετε JavaScript. Επεκτείνει HTML με χαρακτηριστικά που σας επιτρέπουν να κάνετε αιτήσεις AJAX, περιεχόμενο ανταλλαγής, και να δημιουργήσετε πλούσιες αλληλεπιδράσεις - όλα χωρίς να αφήσετε το σήμα σας.

Τα βασικά χαρακτηριστικά που θα χρησιμοποιήσετε πιο συχνά:

  • hx-get, hx-post, hx-put, hx-delete - Κάνε αιτήματα HTTP
  • hx-target - Καθορίστε πού να θέσετε την απάντηση
  • hx-swap - Έλεγχος της ανταλλαγής περιεχομένου (innerHTML, outterHTML κ.λπ.)
  • hx-trigger - Ορίστε τι ενεργοποιεί το αίτημα (κλικ, αλλαγή, φορτίο κ.λπ.)
  • hx-push-url - Ενημέρωση του URL του προγράμματος περιήγησης χωρίς πλήρη επαναφόρτωση σελίδας

Εδώ είναι η ομορφιά του: ακόμα γράφεις κώδικα server-side, επιστρέφοντας server-reded HTML. Δεν JSON APIs, κανένα πρότυπο client-side, καμία κατασκευή αγωγών.

Ένα Μοτίβο Τόσο Παλαιό όσο ο ίδιος ο Αζαξ

Πριν από την HTMX, επιτύχαμε το ίδιο αποτέλεσμα με σημαντικά περισσότερες τελετές.

// jQuery circa 2010
$('#load-more').click(function() {
    $.ajax({
        url: '/posts/page/' + currentPage,
        success: function(html) {
            $('#posts-container').append(html);
            currentPage++;
        }
    });
});

Και ακόμη νωρίτερα, με τη βανίλια JavaScript:

// Vanilla JS circa 2005
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById('content').innerHTML = xhr.responseText;
    }
};
xhr.open('GET', '/partial-content', true);
xhr.send();

Το μοτίβο server-side ήταν πανομοιότυπο - return HTML θραύσματα, ανταλλάξτε τα με το DOM. HTMX απλά μετακινεί αυτή τη λογική από JavaScript σε χαρακτηριστικά HTML, καθιστώντας το δηλωτικό, ανακάλυψη, και πολύ λιγότερο επιρρεπή σε λάθη. Η καινοτομία δεν είναι η τεχνική, είναι η διεπαφή.

ASP.NET προγραμματιστές το κάνουν αυτό για χρόνια. ΕνημέρωσηPanels στο WebForms (2005), PartialView() στο MVC από την πρώτη ημέρα, Html.RenderAction() Αυτό που μας έλειπε ήταν ένας κομψός, τυποποιημένος τρόπος να το συνδέσουμε στην πλευρά του πελάτη. HTMX γεμίζει τέλεια αυτό το κενό.

Οι όροι όπως "SSR" (Server-Side Rendering), "hybrid rendering" και "islands architecture" περιγράφουν ουσιαστικά τι έχουν πάντα κάνει τα πλαίσια server-side, αλλά με φρέσκα μάτια. Είναι επιβεβαίωση ότι ο διακομιστής-διαχωρισμένος κλίμακες προσέγγισης, εκτελεί, και -με τα σωστά εργαλεία - παρέχει εξαιρετική εμπειρία χρήστη.

Ρύθμιση HTMX στο πυρήνα ASP.NET

Πρώτα, συμπεριλάβετε HTMX στη διάταξη σας. Μπορείτε να χρησιμοποιήσετε ένα CDN ή να το εξυπηρετήσετε τοπικά:

<script src="https://unpkg.com/[email protected]"></script>

Αυτό είναι, όχι βήμα κατασκευής, όχι εγκατάσταση, όχι ρύθμιση webpack, απλά βάλτε ένα script tag και είστε μακριά στους αγώνες.

Alpine.js: Το στοιχείο πελάτη-πέλαγος

Για την αντιδραστική δραστηριότητα του πελάτη (εμφάνιση/κρύψιμο στοιχείων, ενοχλητικά κράτη, τοπικό κράτος UI), Alpine.js Συμπληρώνει τέλεια HTMX. Σε μόλις 15KB gziped, παρέχει Vue/React-like δηλωτική αντιδραστικό χωρίς το φούσκωμα.

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

Να πώς δουλεύουν μαζί.

<div x-data="{ open: false }">
    <button x-on:click="open = !open">Toggle</button>
    <div x-show="open" x-transition>
        <button hx-get="/api/data" hx-target="#results">Load Data</button>
    </div>
</div>

Σε όλο αυτό το άρθρο, θα δείτε αυτό το μοτίβο - Alpine για την δραστηριότητα των πελατών, HTMX για τις αλληλεπιδράσεις των διακομιστών.

Η Βιβλιοθήκη HTMX.NET

Khalid Abuhakmeh's HTMX.NET βιβλιοθήκη παρέχει πρώτης κατηγορίας ASP.NET Core ενσωμάτωση. Διατίθεται ως Htmx και Htmx.TagHelpers NuGet πακέτα, αισθάνεται εγγενής στο .NET και κάνει τη συνεργασία με HTMX μια απόλυτη ευχαρίστηση. GitHubCity name (optional, probably does not need a translation).

Εγκατάσταση

dotnet add package Htmx
dotnet add package Htmx.TagHelpers

Σε σας _ViewImports.cshtml:

@addTagHelper *, Htmx.TagHelpers

Η μέθοδος επέκτασης IsHtmx()

Το πιο χρήσιμο χαρακτηριστικό είναι η Request.IsHtmx() μέθοδος επέκτασης, η οποία σας λέει αν το αίτημα προήλθε από HTMX. Αυτό σας επιτρέπει να επιστρέψετε είτε μια πλήρη εικόνα είτε απλά ένα μερικό:

[HttpGet]
public async Task<IActionResult> Index(int page = 1, int pageSize = 20)
{
    var posts = await blogViewService.GetPagedPosts(page, pageSize);

    if (Request.IsHtmx())
        return PartialView("_BlogSummaryList", posts);

    return View("Index", posts);
}

Αυτό το μοτίβο είναι απολύτως λαμπρό. Μια ενέργεια ενός ελεγκτή εξυπηρετεί και τα δύο:

  • Πλήρες φορτίο σελίδας (όταν οι χρήστες πλοηγούνται απευθείας ή ανανεώνουν)
  • Μερικές ενημερώσεις (όταν η HTMX υποβάλλει την αίτηση)

Δεν υπάρχουν ξεχωριστά τελικά σημεία API, καμία διπλή λογική, καμία JSON serialization από πάνω.

Μια κοινή παρανόηση: Πολλοί προγραμματιστές ASP.NET πιστεύουν ότι χρειάζεστε το _ Πρόθεμα (όπως _BlogSummaryList.cshtml- Για να πάρεις μερική απόδοση. PartialView() μέθοδος η ίδια λέει ASP.NET Core για να παραλείψετε τη διάταξη - λέει "ξέχασε τη διάταξη, απλά καθιστούν αυτό το κομμάτι" . Μπορείτε να χρησιμοποιήσετε return PartialView("SearchResults", model) με ένα αρχείο τακτικής προβολής και λειτουργεί τέλεια. Η σύμβαση έμφασης προέρχεται από ASP.NET Web Pages (WebMatrix) όπου εμπόδισε αρχεία από το να εξυπηρετούνται απευθείας μέσω URL - αλλά MVC πάντα προστατεύει όλες τις απόψεις από την άμεση πρόσβαση ούτως ή άλλως. προς το σκοπό αυτό ως επιμέρους.

HTMX.NET Βοηθοί ετικετών

HTMX.NET παρέχει βοηθούς ετικετών που κάνουν τη συνεργασία με τους ελεγκτές καθαρότερο. Αντί να γράψετε συμβολοσειρές διαδρομής, μπορείτε να χρησιμοποιήσετε έντονα δακτυλογραφημένες αναφορές:

<button
    hx-controller="Comment"
    hx-action="GetCommentForm"
    hx-post
    hx-target="#commentform">
    Reply
</button>

Αυτό δημιουργεί τη σωστή διαδρομή χρησιμοποιώντας το σύστημα δρομολόγησης ASP.NET Core. Αν μετονομάσετε το χειριστήριο ή τη δράση σας, το IDE σας θα το πιάσει. Πολύ καλύτερα από μαγικές χορδές!

Εδώ είναι ένα πραγματικό παράδειγμα από το σύστημα σχολίων αυτού του blog:

<button
    class="btn btn-outline btn-sm mb-4"
    hx-action="Comment"
    hx-controller="Comment"
    hx-post
    hx-vals
    x-on:click.prevent="window.mostlylucid.comments.setValues($event)"
    hx-on="htmx:afterSwap: window.scrollTo({top: 0, behavior: 'smooth'})"
    hx-swap="outerHTML"
    hx-target="#commentform">
    Comment
</button>

Προσέξτε πώς HTMX παίζει όμορφα με Alpine.js (x-on:click.prevent) για αυτά τα περιστασιακά κομμάτια της διαδραστικότητας του πελάτη-πλευρού.

Άλλοι βοηθοί HTMX.NET

Η βιβλιοθήκη παρέχει επίσης:

  • Request.IsHtmxNonBoosted() - Ελέγξτε αν είναι μια αίτηση HTMX αλλά δεν ενισχύεται
  • Request.IsHtmxRefresh() - Έλεγξε αν είναι αίτημα αποκατάστασης ιστορικού.
  • Βοηθοί απόκρισης για κεφαλίδες HTMX (παγίδες, ανακατευθύνσεις κ.λπ.)

Real-World Παράδειγμα: Αναζήτηση με Μερικές

Εδώ είναι το χειριστήριο αναζήτησης από αυτό το blog, που δείχνει το μοτίβο επιστροφής τριών επιπέδων:

[HttpGet]
[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request", "pagerequest" })]
public async Task<IActionResult> Search(
    string? query,
    int page = 1,
    int pageSize = 10,
    [FromHeader] bool pagerequest = false)
{
    var searchModel = await BuildSearchModel(query, page, pageSize);

    if (pagerequest && Request.IsHtmx())
        return PartialView("_SearchResultsPartial", searchModel.SearchResults);

    if (Request.IsHtmx())
        return PartialView("SearchResults", searchModel);

    return View("SearchResults", searchModel);
}

Τρία μονοπάτια επιστροφής για τρία σενάρια:

  1. Αίτημα παπαγαλισμού - ελάχιστο μερικό (μόνο η λίστα αποτελεσμάτων)
  2. Αλλαγές φίλτρου - μερική τομή (αποτελέσματα με φίλτρα)
  3. Άμεση πλοήγηση - πλήρης σελίδα (layout + τα πάντα)

Η μερική άποψη (_SearchResultsPartial.cshtml) χρησιμοποιεί το paging tag helper:

@model Mostlylucid.Models.Blog.PostListViewModel
<div class="pt-2" id="content">
    @if (Model.Data?.Any() is true)
    {
        <div class="inline-flex w-full items-center justify-center pb-4">
            @if (Model.TotalItems > Model.PageSize)
            {
                <pager
                    x-ref="pager"
                    link-url="@Model.LinkUrl"
                    hx-boost="true"
                    hx-target="#content"
                    hx-swap="show:none"
                    page="@Model.Page"
                    page-size="@Model.PageSize"
                    total-items="@Model.TotalItems"
                    hx-headers='{"pagerequest": "true"}'>
                </pager>
            }
        </div>
        @foreach (var post in Model.Data)
        {
            <partial name="_ListPost" model="post"/>
        }
    }
</div>

Σπάζοντας τον βοηθό ετικέτας βομβητή:

  • hx-boost="true" - Αναχαιτίζει συνδέσεις, μετατρέπεται σε AJAX
  • hx-target="#content" - Πού να κάνετε την ένεση της ανταπόκρισης
  • hx-headers='{"pagerequest": "true"}' - Προσαρμοσμένη κεφαλίδα λέει στο χειριστήριο ότι είναι pagination
  • Έλεγχος του ελεγκτή Request.IsHtmx() && pagerequest να επιστρέψει μόνο το ελάχιστο μερικό

Το πιο διαυγή.pagingtag helper πακέτο

Έγραψα. ως επί το πλείστον διαυγής. pagingtag helper είναι HTMX-πρώτη, αλλά λειτουργεί χωρίς JavaScript πάρα πολύ.

Εγκατάσταση

dotnet add package mostlylucid.pagingtaghelper

Προσθήκη στην _ViewImports.cshtml:

@addTagHelper *, mostlylucid.pagingtaghelper

Βασικά χαρακτηριστικά

Εφαρμογή IPagingModel<T> Και τελείωσες:

public class BasePagingModel<T> : IPagingModel<T> where T : class
{
    public int Page { get; set; }
    public int TotalItems { get; set; }
    public int PageSize { get; set; }
    public string LinkUrl { get; set; }
    public List<T> Data { get; set; }
}

Τι παθαίνεις:

  • Απαιτούμενη διάταξη μηδέν
  • Πολλαπλά πλαίσια UI (TailwindCSS + DaisyUI, Bootstrap 5, προσαρμοσμένες απόψεις)
  • Υποστήριξη σκοτεινής λειτουργίας
  • 8 γλώσσες ενσωματωμένη
  • Άγνωστες κεφαλίδες, επιλογέαι μεγέθους σελίδας
  • Προοδευτική ενίσχυση (λειτουργεί χωρίς JavaScript)
  • Υποστήριξη σημάδι συνέχειας για τις βάσεις δεδομένων NoSQL

Ο βοηθός ετικετών δημιουργεί συνδέσμους που διατηρούν συμβολοσειρές ερωτημάτων, επικεφαλίδες υποστήριξης, και ενσωματώνονται απρόσκοπτα με HTMX (δείτε το παραπάνω παράδειγμα).

Διάγραμμα ροής HTMX

Εδώ είναι πώς όλο το σύστημα ταιριάζει μεταξύ τους:

graph TB
    A[Browser] -->|"Initial page load"| B[Controller Action]
    B -->|"Request.IsHtmx() = false"| C[Return Full View]
    C --> D[Render Layout + Partial]

    A -->|"User clicks pagination/filter"| E[HTMX Request]
    E -->|"hx-get with headers"| F[Same Controller Action]
    F -->|"Request.IsHtmx() = true"| G{Check Headers}
    G -->|"pagerequest header"| H[Return Minimal Partial]
    G -->|"No special header"| I[Return Section Partial]

    H --> J[Swap Content in Target]
    I --> J

    J -->|"User clicks another link"| E

    style B stroke:#333,stroke-width:2px
    style F stroke:#333,stroke-width:2px
    style C stroke:#0066cc,stroke-width:2px
    style H stroke:#00cc66,stroke-width:2px
    style I stroke:#00cc66,stroke-width:2px

Συγκρίνοντας με άλλα πλαίσια

Django Template Fragments

Django πρόσθεσε σωστή μερική απόδοση πρότυπο στην έκδοση 6.0 (Δεκέμβριος 2024) με θραύσματα πρότυπο. Πριν από αυτό, Django προγραμματιστές χρησιμοποιούσαν συνήθως ετικέτες ένταξης ή πακέτα τρίτων όπως django-render-μπλοκ. ASP.NET Core has had PartialView() από την έκδοση 1.0 το 2016 - διαφορετικά πλαίσια, διαφορετικά χρονοδιαγράμματα, αλλά ο ίδιος προορισμός: θραύσματα HTML για HTML.

Rails Turbo Frames

Ruby on Rails έχει Turbo Frames (μέρος του Hotwire), το οποίο είναι παρόμοιο με το πνεύμα:

<%= turbo_frame_tag "posts" do %>
  <%= render @posts %>
<% end %>

Η διαφορά είναι ότι το Turbo απαιτεί συγκεκριμένους δείκτες πλαισίου τόσο σε αίτημα όσο και σε απάντηση. HTMX είναι πιο ευέλικτη - οποιοδήποτε τελικό σημείο μπορεί να επιστρέψει οποιοδήποτε HTML, και εσείς αποφασίζετε πού πηγαίνει με hx-target.

Phoenix LiveView

Το Elixir's Phoenix LiveView ακολουθεί μια διαφορετική προσέγγιση με επίμονες συνδέσεις WebSocket και κατάσταση server-side:

def handle_event("load_more", _params, socket) do
  {:noreply, assign(socket, posts: load_more_posts())}
end

LiveView είναι λαμπρό για εφαρμογές σε πραγματικό χρόνο, αλλά απαιτεί WebSocket υποδομή και μνήμη διακομιστή για συνδέσεις. HTMX χρησιμοποιεί απλό παλιό HTTP - απάτριδες, κρυφό, κλιμακωτή. Για ένα blog, αυτό είναι τέλειο.

Εκτιμήσεις Απόδοσης

Αποθήκευση εξόδου: Η OutputCache το χαρακτηριστικό ποικίλλει ανάλογα με το hx-request κεφαλίδα, αφαίρεση ολόκληρων σελίδων και μερικών χωριστά:

[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request", "pagerequest" })]

Αποδοτικότητα δικτύου: Το Server-reded HTML είναι συχνά μικρότερο από τα πρότυπα JSON + client-side, απαιτεί λιγότερες στρογγυλές εκδρομές, και caches σωστά.

Μέγεθος bundleName: HTMX (14KB) + optional Alpine.js (15KB) + paging tag helper (0KB, server-side) = under 30KB total. Compare that to a practical React app (200KB+).

Προχωρημένα μοτίβα

Αισιόδοξες ενημερώσεις UI - Συνδυάστε HTMX και Alpine για άμεση ανατροφοδότηση:

<div x-data="{ count: @Model.CommentCount }">
    <button hx-post="/comment/like" x-on:click="count++" hx-on::after-request="count = $event.detail.xhr.response">
        Likes: <span x-text="count"></span>
    </button>
</div>

Το μέτρημα ενημερώνει αμέσως (αισιόδοξο), στη συνέχεια συγχρονίζεται με την απάντηση του διακομιστή.

Άρθρο 4 παράγραφος 1 στοιχείο α) σημείο ii) και άρθρο 4 παράγραφος 1 στοιχείο β) του ΚΚΑ - Ενημέρωση πολλαπλών τμημάτων σελίδων από μία απάντηση:

<div id="main-content"><!-- Main response --></div>
<div id="notification-count" hx-swap-oob="true"><span>5 new</span></div>

Ιδανικό για σήματα ειδοποίησης, αριθμό καλαθιού, κλπ. Καλύπτω αυτό το μοτίβο σε βάθος σε Εμφάνιση τοστ και ανταλλαγή με HTMX.

Πελάτης-Side πρότυπα με WebAPI - Μερικές φορές θέλετε μια ενδιάμεση εμπειρία: server-reded HTML για τα περισσότερα πράγματα, αλλά JSON από ένα WebAPI για συγκεκριμένο δυναμικό περιεχόμενο. HTMX του extension client-side-templates distribution Σας επιτρέπει να κάνετε ακριβώς αυτό:

<script src="https://unpkg.com/[email protected]/client-side-templates.js"></script>
<script src="https://unpkg.com/mustache@latest"></script>

<div hx-ext="client-side-templates">
    <template id="post-template" type="text/mustache">
        {{#posts}}
        <div class="post">
            <h3>{{title}}</h3>
            <p>{{excerpt}}</p>
        </div>
        {{/posts}}
    </template>

    <button hx-get="/api/posts"
            hx-target="#post-list"
            mustache-template="post-template">
        Load Posts
    </button>
    <div id="post-list"></div>
</div>

Αυτή η προσέγγιση λειτουργεί με Mustache, χειρολαβές, ή Nunjucks πρότυπα. WebAPI σας επιστρέφει JSON, αλλά HTMX χειρίζεται την απόδοση πλευρά του πελάτη. Είναι ιδιαίτερα χρήσιμο όταν έχετε ένα υπάρχον API ή πρέπει να μοιραστούν τα δεδομένα με mobile εφαρμογές. το συνοδευτικό άρθρο.

Gotas & Συμβουλές

Εργαλείο αποσφαλμάτωσης: Εγκαταστήστε το Επέκταση αποσφαλματωτή HTMX - δείχνει κάθε αίτημα, απάντηση και ανταλλαγή σε πραγματικό χρόνο.

CSRF Tokens

ASP.NET Core's antiforgory points need special handling with AJAX. HTMX.NET παρέχει διάφορες καθαρές επιλογές. HtmxAntiforgeryScriptEndpoint:

// In Program.cs
app.MapHtmxAntiforgeryScript();
<!-- In your layout head -->
<script src="@HtmxAntiforgeryScriptEndpoints.Path" defer></script>

Ή χρησιμοποιήστε τον βοηθό ετικετών: <meta name="htmx-config" includeAspNetAntiforgeryToken="true" />- Βλέπεις; Το άρθρο του Khalid για την HTMX Anti-Forgery Tokens για πλήρεις λεπτομέρειες.

Alpine.js @ Shorthand in Razor

Alpine's @click στενές συγκρούσεις με Razor's @ σύνταξη. Χρησιμοποιήστε τη ρητή μορφή αντί:

<button x-on:click="doSomething()">Click me</button>  <!-- Instead of @click -->
<div x-bind:class="isOpen ? 'block' : 'hidden'"></div>  <!-- Instead of :class -->

Ή να δραπετεύσω με @@click, αλλά η ρητή σύνταξη είναι σαφέστερη.

Διαχείριση Ιστορίας

Έλεγχος καταχωρήσεων ιστορικού: Από προεπιλογή, HTMX σπρώχνει κάθε αίτημα στην ιστορία. Για pagination/filters όπου δεν θέλετε ρύπανση της ιστορίας:

<paging model="@Model" hx-push-url="false">  <!-- Don't add history entries -->

Ή χρήση hx-replace-url="true" για την ενημέρωση του URL χωρίς προσθήκη καταχωρήσεων.

Το Φάντασμα Μερικό πρόβλημα: Browser back/forward δείχνει μόνο ένα μερικό θραύσμα χωρίς διάταξη. hx-history-elt στον περιέκτη περιεχομένου σας:

<div class="container mx-auto" id="contentcontainer" hx-history-elt>
    @RenderBody()
</div>

Αυτό λέει HTMX ποιο στοιχείο σε στιγμιότυπο, διατηρώντας τη γύρω διάταξη κατά την αποκατάσταση της ιστορίας.

Caching CDN (Cloudflare κ.λπ.)

Σύμπτωμα: HTMX λειτουργεί τοπικά αλλά σπάει πίσω από ένα CDN - λάθος περιεχόμενο παίρνει cached.

Αιτία ρίζας: Τα CDN αγνοούν το HX-Request κεφαλίδα. Ο διακομιστής σας επιστρέφει διαφορετικό περιεχόμενο με βάση αυτή την κεφαλίδα, αλλά το CDN τα αποθηκεύει πανομοιότυπα.

ASP.NET Core fix: Χρήση VaryByHeaderNames:

[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request" })]

Διόρθωση CDN: Ρύθμιση κανόνων κρυφής μνήμης για να συμπεριληφθεί HX-Request στο κλειδί cache. Για Cloudflare: Dashboard → Caching → Cache κανόνες → Custom cache κλειδί → Headers → Συμπεριλάβετε HX-Request.

The hx-boost Debate

hx-boost μετατρέπει τους φυσιολογικούς συνδέσμους σε AJAX αιτήματα. HTMX quirks σελίδα σημειώνει ότι ορισμένα μέλη της κεντρικής ομάδας συστήνουν την αποφυγή της (discards <head> περιεχόμενο, επηρεάζει την τοποθεσία της συμπεριφοράς), ενώ άλλοι το βρίσκουν πρόστιμο για τις γρήγορες νίκες.

<div hx-boost="true" hx-target="#contentcontainer">
    <a asp-action="Show" asp-route-slug="@post.Slug">Read More</a>
</div>

Αυτό το blog το χρησιμοποιεί εκτενώς. Κατά την στόχευση συγκεκριμένων εμπορευματοκιβωτίων, ρητή hx-get είναι πιο ξεκάθαρο, αλλά hx-boost Λειτουργεί αν είστε συνεπής. Απενεργοποιήστε επιλεκτικά με hx-boost="false" σε παιδικά στοιχεία.

Συμπέρασμα

HTMX με ASP.NET Core partials αντιπροσωπεύει μια επιστροφή στο server-side απλότητα χωρίς θυσία σύγχρονη UX. Μπορείτε να πάρετε:

  • Δυναμικές, παρόμοιες με SPA αλληλεπιδράσεις
  • Απόδοση πλευρά του εξυπηρετητή (μεγάλο για SEO)
  • Κατάλληλη αποθήκευση HTTP
  • Minimal JavaScript
  • Προοδευτική ενίσχυση
  • Type-safe routing with HTMX.NET
  • Zero-config pagination με ως επί το πλείστον διαυγή.pagingtaghelper

Η προσέγγιση του διακομιστή έχει σταθεί στη δοκιμή του χρόνου, και με HTMX, έχει τελικά το κομψό εργαλείο πλευρά του πελάτη που αξίζει. Μπορείτε να οικοδομήσετε στιβαρές, performant web εφαρμογές χρησιμοποιώντας πρότυπα που έχουν λειτουργήσει για δεκαετίες - έχουν μόλις περιμένει για το σωστό εργαλείο για να τους κάνει να λάμψουν και πάλι.

Σχετικά άρθρα σε αυτό το blog

Άρθρο Σύντροφος

Το άρθρο αυτό αποτελεί μέρος μιας σειράς δύο μερών για HTMX με ASP.NET Core:

  1. Αυτό το άρθρο - Εστιάζει στην ενσωμάτωση ASP.NET πυρήνα, μερικές απόψεις, HTMX.NET, και pagination
  2. Μια Whistle-stop περιοδεία των επεκτάσεων HTMX - Βαθιά κατάδυση σε εκδηλώσεις HTMX, κύκλου ζωής, αρχιτεκτονική επέκτασης, και προσαρμοσμένες επεκτάσεις

Περισσότερα άρθρα HTMX

Περαιτέρω Ανάγνωση

Επίσημη τεκμηρίωση:

Βιβλιοθήκες & Εργαλεία:

Κοινοτικοί πόροι:

logo

© 2026 Scott Galloway — Unlicense — All content and source code on this site is free to use, copy, modify, and sell.