Le bouton Précédent du navigateur affiche l'état de page conservé envoyé par le serveur, mais aucune modification DOM effectuée avec JavaScript n'est conservée

Question

L'extrait de code (en C#) utilisé pour déclencher le code JavaScript de code-behind est:

int returnValue = SaveStudent("John", "XII"); // SaveStudent() is a C# function that saves the student details in DB and returns studentId. 
hdnStudentId = returnValue ; // hdnStudentId is a hidden-field control 
ScriptManager.RegisterStartupScript(this, this.GetType(), 
          "ShowStudent", "showStudentDetails();",true); 

la définition de "showStudentDetails()" méthode JavaScript est comme:

function showStudentDetails(){ 
    If($('[id*=hdnStudentId]').val() > 0){ 
     // show the popup 
    } 
} 

Voici la description du problème:

• Dans une page Web 'WebPage1.APSX', après avoir enregistré les données dans la base de données, j'affiche une fenêtre d'amorçage à l'aide de la classe ScriptManager (comme mentionné ci-dessus).

• Ici, je fixe la valeur d'une variable de champ caché à l'identifiant de ligne inséré dans DB (disons 12345).

• La classe ScriptManager enregistre avec succès le script dans DOM et affiche la fenêtre contextuelle.

• Ensuite, j'ai réinitialisé la variable Here hidden-field à -1. Dans la fenêtre contextuelle , j'ai un contrôle de bouton qui redirige vers une autre page 'WebPage1.APSX'.

  $ ('[id * = hdnStudentId]'). Val ('- 1');

• Maintenant, l'utilisateur clique sur 'bouton de retour du navigateur', il ne frappe pas le code côté serveur et rend l'interface utilisateur basée sur l'instance précédente de la page envoyée par le serveur.

• Comme il est par exemple de la page précédente envoyé par le serveur, champ caché variable devient réglée sur « 12345 » au lieu de -1 (ne sais pas pourquoi, nous avons déjà ne rétablissez la valeur à -1) et afficher la popup à nouveau.

Exigence: Lorsque l'utilisateur clique sur 'navigateur back-bouton', il faut se rappeler les données manipulées précédemment dans DOM ainsi (par exemple $ ('[id * = hdnStudentId]') val (. '-1');) afin que nous puissions éviter d'afficher la popup sur le clic arrière du navigateur.

Answer 1

Vous devez votre commande API historique du navigateur pour enregistrer votre état de page dans l'histoire où aucun serveur impliqué, voici mdn doc https://developer.mozilla.org/en-US/docs/Web/API/History_API

L'objet DOM window permet d'accéder à l'historique du navigateur par l'objet history . Il expose des méthodes et des propriétés utiles qui permettent vous déplacer en arrière à travers l'histoire de l'utilisateur, ainsi que - commençant par HTML5 - manipuler le contenu de la pile de l'histoire

et aussi un exemple de navigation Ajax https://developer.mozilla.org/en-US/docs/Web/API/History_API/Example. J'espère que cela pourra aider!

Answer 2

Merci @Salus .. J'ai suivi votre conseil .. Et enfin le code-extrait suivant a travaillé pour moi .. J'ai utilisé 'histoire.pushState(); ' méthode juste après l'affichage de la popup:

$('#divStudentDetails').modal('show'); 
history.pushState(null, null, "");