Esitys

Donut hole Caching voi olla hyödyllinen tekniikka, jossa halutaan tallentaa tiettyjä sivun osia mutta ei kaikkia.. On kuitenkin hankalaa panna täytäntöön.

Ongelma

Yksi asia, joka minulla oli tämän sivuston kanssa, on se, että halusin käyttää Anti-väärennytystokkeita muillani muodollisilla lomakkeillani.This is a good security practice to prevent Cross-Site Request Forgery (sivupyynnön väärentäminen) – attacks.

Ratkaisu

Yhteinen tapa ratkaista tämä on 'donut hole, ' Caching where you cache the majority of the page but certain elements, mutta certain elements.\ There'\s a bunch of ways to achieve this in ASP.\NET Core using the partial view framework however it'\s complex to implement and often requires specific packages and config\M SK6\ I wanted a simpler solution

Koska olen jo käyttänyt erinomaista HTMX Tässä hankkeessa on ”'” erittäin yksinkertainen tapa saada dynaaminen 'nuthole' toiminnallisuus HTMX:n avulla dynamically loading Partials with . Olen jo kirjoittanut AntiForgeryRequest-tokenit Javascriptin avulla Jälleen kerran ongelmana oli kuitenkin se, että tämä tosiasiallisesti esitti sivun tallentamisen.

Nyt voin palauttaa tämän tehtävän käyttäessäni HTMX:tä dynaamisen osa-alueiden laadimiseen.

  <li class="group relative mb-1 hidden lg:block ml-2" id="typeaheadelement">
    <div  hx-trigger="load" hx-get="/typeahead" hx-target="#typeaheadelement" hx-swap="innerHTML"></div>
</li>

Kuolematon yksinkertainen, oikea? Kaikki tämä tarkoittaa sitä, että kutsutaan yhteen ainoaan koodireikkaan valvontakoneessa, joka palauttaa osittaisen näkymänM SK2 Tämä merkitsee, että Anti-tokena on luotu palvelimella ja sivu voidaan säilyttää tavanomaisena Cachessa . Osittainen näkymä laaditaan dynaamisin keinoin, joten token on edelleen ainutlaatuinen kullekin pyynnälleMSC5

PANEE MERKILLE: Teidän on varmistettava, että load event doesn't fire again on the back button. Saanen tämän tapahtumaan asettamalla typeahead to overwrite the target on the first load

Tämä merkitsee sitä, että heti, kun se käynnistetään, se poistaa alkuperäisen divin ja korvaa sen uudella sisällöllä jäljempänä olevan valvojan palauttamasta osasta.

Olemme asettaneet hx-target ulkoiseen osatekijään pääasiassa JS-virheen välttämiseksi; koska HTMX tarvitsee pätevän kohden pyynnön loppuun saattamisessa. Näin ollen ei voida ' poistaa sitä osatekijää, joka aktivoi HT MX-pyynnön

    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
    [HttpGet("typeahead")]
    public IActionResult TypeAhead()
    {
        return PartialView("_TypeAhead");
    }

Osallisessa on edelleen yksinkertainen muoto, johon kuuluu Anti-väärennytystokeni.

<div x-data="window.mostlylucid.typeahead()" class="relative" id="searchelement"  x-on:click.outside="results = []">
    @Html.AntiForgeryToken()
    <label class="input input-sm dark:bg-custom-dark-bg bg-white input-bordered flex items-center gap-2">
        <input
            type="text"
            x-model="query"
            x-on:input.debounce.300ms="search"
            x-on:keydown.down.prevent="moveDown"
            x-on:keydown.up.prevent="moveUp"
            x-on:keydown.enter.prevent="selectHighlighted"
            placeholder="Search..."
            class="border-0 grow  input-sm text-black dark:text-white bg-transparent w-full"/>
        <i class="bx bx-search"></i>
    </label>
    <!-- Dropdown -->
    <ul x-show="results.length > 0"
        class="absolute z-10 my-2 w-full bg-white dark:bg-custom-dark-bg border border-1 text-black dark:text-white border-b-neutral-600 dark:border-gray-300   rounded-lg shadow-lg">
        <template x-for="(result, index) in results" :key="result.slug">
            <li
                x-on:click="selectResult(result)"
                :class="{
                    'dark:bg-blue-dark bg-blue-light': index === highlightedIndex,
                    'dark:hover:bg-blue-dark hover:bg-blue-light': true
                }"
                class="cursor-pointer text-sm p-2 m-2"
                x-text="result.title"
            ></li>
        </template>
    </ul>
</div>

Tämän jälkeen se kapulaa kaiken otsakkeen hakukoodin, ja kun se on toimitettu, se vetää token ja lisää sen pyyntöön (todenmukaisesti kuten ennen

        let token = document.querySelector('#searchelement input[name="__RequestVerificationToken"]').value;
            console.log(token);
            fetch(`/api/search/${encodeURIComponent(this.query)}`, { // Fixed the backtick and closing bracket
                method: 'GET', // or 'POST' depending on your needs
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': token // Attach the AntiForgery token in the headers
                }
            })

Päätelmissä

Tämä on erittäin yksinkertainen tapa saada HTMX:n avulla ' \donut hole \ ' \ Caching \ It' \ se on erinomainen tapa saada etuja pitämisen varalta ilman ylimääräisen paketin monimutkaisuutta . \ toivon, että pidätte tätä hyödyllisenä \ . \ ilmoittakaa minulle, jos teillä on kysymyksiä jäljempänä esitetyissä huomautuksissa.