804 messaggi dal 08 aprile 2009
ho una pagina di gallery e una di dettaglio.
Quando l'utente seleziona il bottone di back del browser come faccio a non far ricaricare la pagina solo in questa situazione?
18 messaggi dal 23 marzo 2021
Ciao!
Potresti usare javascript per disabilitare il pulsante back del browser:

  history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };


se ti serve solo in quella specifica pagina, puoi metterlo in un file js e caricarlo solo nella pagina in cui ti serve.. o se usi componenti blazor, mettere lo script all'interno di una funzione e richiamarlo con IJSRuntime nella pagina interessata
804 messaggi dal 08 aprile 2009
Si potrei anche bloccare il back.
Però a me serve di non far ricaricare la pagina.
Ho una pagina con una galleria dove i dati vengono caricare a blocchi tramite chiamate ajax.
Selezionando un item ti fa vedere il dettaglio.
Quando l'utente torna sulla pagina precedente devo far vedere i dati caricati fino a quel momento senza rifare la chiamata al server.

Anche su questo forum funziona così e quindi mi chiedevo che tecnica c'è dietro.
Al momento sul back viene richiamata l'action del controller e volevo evitare appunto questo.
18 messaggi dal 23 marzo 2021
Intendi quindi che l'ideale sarebbe che il client abbia una cache dei dati e che non faccia una chiamata al server se la cache è ancora valida?

Si potrebbe salvare i dati nel local storage del browser al momento della chiamata ajax, impostando un "termine di scadenza".
Nelle chiamate successive, si controlla se il termine di scadenza : se non è stato raggiunto, la chiamata ajax non chiama più il server ma utilizza i dati in locale.. raggiunta la data di scadenza ritorna a chiedere i dati al server.
804 messaggi dal 08 aprile 2009
Bravissimo.
Hai centranto in pieno.
Anche perchè a blocchi di caricamento della galleria l'utente potrebbe essere arrivato anche a 2000 risultati e non voglio andarli a recuperli dal server consumando trasporto di informazioni.


Hai dei riferimenti a documentazione che posso seguire?
Non ho mai affrontato questi discorsi su un portale web.
18 messaggi dal 23 marzo 2021
Cosa utilizzi come framework per il client?

ho trovato link seguente per un implementazione manuale:
https://www.sohamkamani.com/blog/javascript-localstorage-with-ttl-expiry/

altrimenti su github un plugin che estende le chiamata ajax per integrare direttamente li la cache (durante la chiamata)
https://github.com/SaneMethod/jquery-ajax-localstorage-cache

fammi sapere se ti è utile!
18 messaggi dal 23 marzo 2021
Ho realizzato un piccolo progetto di prova:

un file js fa la chiamata ajax soltanto se non trova nulla nella cache e la cache si invalida dopo tot secondi (10 nell'esempio sotto).
Nella prova fatta, l'endpoint viene chiamato correttamente solo dopo 10 secondi dalla prima chiamata, tutte le chiamate precedenti prendono i dati dalla cache.
Per comodità do alla chiave il valore del nome dell'endpoint API

file js:
//eseguo al click del pulsante
$('#callAjaxButton').click(() => {
  
    var myData = getWithExpiry("api/test");  
    if (myData == null) {
        $.ajax({
            url: 'api/test',          
            success: function (result) {
                myData = result;
                setWithExpiry("api/test",myData,10000)           
                $('#dataLabel').append(myData);
            }
        });

    } else {
        console.log(myData);
//aggiungo i dati alla view
        $('#dataLabel').append(myData.name);
        $('#dataLabel').append(myData.city);
    }
  

});


//metodo per impostare il valore del dato nella cache
function setWithExpiry(key, value, ttl) {
    const now = new Date()

    // `item` is an object which contains the original value
    // as well as the time when it's supposed to expire
    const item = {
        value: value,
        expiry: now.getTime() + ttl
    };
    console.log(item);
    localStorage.setItem(key, JSON.stringify(item))
}

//metodo per recuperareil valore del dato dalla cache
function getWithExpiry(key) {
    const itemStr = localStorage.getItem(key)
    console.log(itemStr);
    // if the item doesn't exist, return null
    if (!itemStr) {
        return null
    }
    const item = JSON.parse(itemStr);
    const now = new Date();
    // compare the expiry time of the item with the current time
    if (now.getTime() > item.expiry) {
        // If the item is expired, delete the item from storage
        // and return null
        localStorage.removeItem(key)
        return null
    }
    return item.value
}


html:

<button id="callAjaxButton" class="btn btn-primary">call ajax</button>
<label id="dataLabel"></label>




controller:
 [Route("api/[controller]")]
    [ApiController]
    public class TestController : ControllerBase
    {

        public TestController()
        {

        }

        [HttpGet]
        public Task<TestModel> Get()
        {
            return Task.FromResult(new TestModel() { Name = "Prova", City = "Roma" });
        }
    }


fammi sapere!
804 messaggi dal 08 aprile 2009
ho fatto alcune prove ed effettivamente così andrebbe anche bene.
Però...dalla lista io passo al dettaglio e da lì si va in modifica.
Quindi se un dato è modificato il localstorage non comprende i dati modificati.
I dati che visualizzo in lista non sono molti:
- immagine (link)
- Titolo
- Autore
- Secolo o Anno

Quindi pensavo di salvare i dati nella Session che posso gestire lato server. Ma non so se è la strada giusta.
Mi rimane sempre questo pallino che anche qui sul forum quando si torna indietro nel browser i dati non vengono richiamati da una chiamata al server.

Per la session sto vedendo che differenze ci sono anche con i TempData.

https://docs.microsoft.com/it-it/aspnet/core/fundamentals/app-state?view=aspnetcore-5.0

Magari parlando con qualcuno mi viene in mente qualcosa...

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.