# Htmx με Asp.Net Core

<datetime class="hidden">2024-08-01T03:42</datetime>

<!--category-- ASP.NET, HTMX -->
## Εισαγωγή

Χρησιμοποιώντας HTMX με ASP.NET Core είναι ένας πολύ καλός τρόπος για να δημιουργήσετε δυναμικές εφαρμογές ιστού με ελάχιστη JavaScript.HTMX σας επιτρέπει να ενημερώνετε τμήματα της σελίδας σας χωρίς πλήρη επανεγκατάσταση σελίδωνM SK2, καθιστώντας την εφαρμογή σας πιο ανταποκρινόμενη και διαδραστική

Το ' γνωρίζει αυτό που χρησιμοποιούσα για να καλέσω ' γνωρίζω υβριδικά γνωρίζουμε το ' γνωρίζετε σχεδιασμό ιστού όπου παραγγείλετε την σελίδα πλήρως χρησιμοποιώντας τον διακομιστή γνωρίζοντας τον κωδικό γνωρίζοντάς του και στη συνέχεια χρησιμοποιείτε το HTMX για να ενημερώσετε μερικά τμήματα της σελίδας δυναμικά γνωρίστε το

Σε αυτό το άρθρο θα σας δείξει πώς να ξεκινήσετε με HTMX σε μια εφαρμογή ASP, .NET Core app.

[TOC]

## Προϋποθέσεις

HTMX -Htmx είναι ένα πακέτο JavaScript ο πιο ελκυστικός τρόπος για να το συμπεριλάβετε στο έργο σας είναι να χρησιμοποιήσετε ένα CDN. [ΕΔΩ](https://htmx.org/docs/#installing) )

```html
<script src="https://unpkg.com/htmx.org@2.0.1" integrity="sha384-QWGpdj554B4ETpJJC9z+ZHJcA/i59TyjxEPXiiUgN2WmTyV5OEZWCD6gQhgkdpB/" crossorigin="anonymous"></script>
```

Φυσικά, μπορείτε επίσης να κατεβάσετε ένα αντίγραφο και να το συμπεριλάβετε ' χειροκίνητα ΜSK1 ΜSK2 χρησιμοποιεί LibMan ή npm ).

## ASP. διατηρεί bit

Σας συνιστώ επίσης να εγκαταστήσετε το Htmx Tag Helper από [ΕΔΩ](https://github.com/khalidabuhakmeh/Htmx.Net)

Και οι δύο είναι από το υπέροχο [Χαλίτ Αμπουχάκμεθ
](https://mastodon.social/@khalidabuhakmeh@mastodon.social)

```shell
dotnet add package Htmx.TagHelpers
```

Και το πακέτο Htmx Nuget από [ΕΔΩ](https://www.nuget.org/packages/Htmx/)

```shell
 dotnet add package Htmx
```

Η ετικέτα βοηθός σας επιτρέπει να κάνετε αυτό:

```razor
    <a hx-controller="Blog" hx-action="Show" hx-push-url="true" hx-get hx-target="#contentcontainer" hx-route-slug="@Model.Slug"
        class="block font-body text-lg font-semibold text-primary transition-colors hover:text-green dark:text-white dark:hover:text-secondary">@Model.Title</a>
```

### Εναλλακτική προσέγγιση.

**ΣΗΜΕΙΩΣΗ: Αυτή η προσέγγιση έχει ένα σημαντικό μειονέκτημα; δεν σημαίνει ότι' παράγει ένα href για το σύνδεσμο αναρτήσεωνM SK3 Αυτό είναι πρόβλημα SEO και προσβασιμότηταςMK4 Επίσης σημαίνει ότι αυτές οι συνδέσεις θα αποτύχουν αν HTMX για κάποιο λόγο δεν κάνει' φορτίο MSKA6CDNs DO κατεβαίνειMKA7**

Μια εναλλακτική προσέγγιση είναι η χρήση του ` hx-boost="true"` χαρακτηριστικό και φυσιολογικό asp.net βοηθούς κεντρικών ετικετών. Δείτε [ΕΔΩ](https://htmx.org/docs/#hx-boost) για περισσότερες πληροφορίες σχετικά με το hx-boost ΜSK1 τα docs είναι κάπως σπασμένα ΜSK2
Αυτό θα παράγει ένα φυσιολογικό href αλλά θα διακόπτεται από την HTMX και το περιεχόμενο φορτισμένο δυναμικά.

Επομένως, ως εξής:

```razor
 <a asp-controller="Blog" asp-action="Show" hx-boost="true"  hx-target="#contentcontainer" asp-route-slug="@Model.Slug"
       class="block font-body text-lg font-semibold text-primary transition-colors hover:text-green dark:text-white dark:hover:text-secondary">@Model.Title</a>
```

### Μερικά

HTMX λειτουργεί καλά με μερική προβολή.Μπορείτε να χρησιμοποιήσετε το HTMx για να φορτώσετε μια μερική εμφάνιση σε ένα δοχείο στη σελίδα σας.Αυτό είναι ιδανικό για την φόρτωση των τμημάτων της σελίδας σας δυναμικά χωρίς πλήρη επανεγκατάσταση σελίδας

Σε αυτή την εφαρμογή έχουμε ένα δοχείο στο αρχείο Layout.cshtml το οποίο θέλουμε να φορτώσουμε μια μερική προβολή σε.

```razor
    <div class="container mx-auto" id="contentcontainer">
   @RenderBody()

    </div>
```

Συνήθως παραδίδει το περιεχόμενο του διακομιστή αλλά χρησιμοποιώντας τον βοηθό ετικέτας HTMX για εσάς μπορείτε να δείτε ότι στοχεύουμε `hx-target="#contentcontainer"` που θα φορτώσει την μερική προβολή στο δοχείο.

Στο έργο μας έχουμε τη μερική εικόνα του BlogView που θέλουμε να φορτώσουμε στο δοχείο.

![img.png](project.png)

Στη συνέχεια, στο Blog Controller έχουμε

```csharp
    [Route("{slug}")]
    [OutputCache(Duration = 3600)]
    public IActionResult Show(string slug)
    {
       var post =  blogService.GetPost(slug);
       if(Request.IsHtmx())
       {
              return PartialView("_PostPartial", post);
       }
       return View("Post", post);
    }
```

Μπορείτε να δείτε εδώ έχουμε την Αίτηση HTMX.Αυτό θα επιστρέψει αληθινό εάν η αίτηση είναι μια Αίτησης HTMx.Αν είναι, θα επιστραπεί η μερική προβολήM SK4Αλλά αν δεν επιστρέψουμε την πλήρη προβολίαMK5

Χρησιμοποιώντας αυτό μπορούμε να διασφαλίσουμε ότι υποστηρίζουμε επίσης τις άμεσες ερωτήσεις με ελάχιστη πραγματική προσπάθεια.

Στην περίπτωση αυτή, η πλήρης άποψή μας αναφέρεται σε αυτό το μερικό:

```razor
@model Mostlylucid.Models.Blog.BlogPostViewModel

@{
ViewBag.Title = "title";
Layout = "_Layout";
}
<partial name="_PostPartial" model="Model"/>
```

Και έτσι τώρα έχουμε έναν πολύ απλό τρόπο για να φορτώσουμε μερικές προβολές στη σελίδα μας χρησιμοποιώντας HTMX.