2017-10-21 108 views
0

L'extrait de code (en C#) utilisé pour déclencher le code JavaScript de code-behind est: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

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.

+0

Salut Folks, veuillez répondre. Je te serai reconnaissant! –

Répondre

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!

+0

Merci ... C'est vraiment une bonne idée, mais je suis confronté à quelques problèmes lors de l'implémentation sur plusieurs pages web (environ 10 pages .aspx). Donc, j'ai essayé de le garder dans MasterPage. Mais les problèmes rencontrés pour obtenir la page précédente. ** ENJEU: ** En cliquant sur le lien de page, la page précédente est la page 'existant avant' mais à la page-actualiser aussi, elle charge la page précédente. De plus, l'URL qui s'affiche sur le navigateur change également incorrectement. L'extrait de code de la page principale est placé dans le prochain commentaire car le 'nombre de caractères de cette réponse est trop long'. –

+0

Voici l'extrait de code de la page maître: Les codes sont mis en commentaire car ils ne fonctionnent pas comme prévu: //history.pushState(null, null, document.referrer); window.addEventListener ('popstate', fonction (événement) { //history.pushState(null, null, document.referrer); //history.pushState(null, null, window.location.href); alerte ('Bonjour, Vous avez cliqué sur le bouton de retour du navigateur'); }); –

+0

Avez-vous pensé que cela pouvait être dû à des références dynamiques à 'pushState()'? Je ne recommanderais pas de passer des arguments dynamiques comme 'document.referrer' ou' window.location.href'. Je suppose que c'est mieux de faire, 'var stateObj = {id: hdnStudentId}; history.pushState (stateObj, null, "#popup"); '' 'après que l'URL est un modèle général pour les URL côté client uniquement qui seront traitées par JS. puis dans votre écouteur d'événement, vous pouvez appeler la fonction 'showStudentDetails (stateObj.id)' et cela signifie étendre votre fonction pour accepter les arguments aussi. –

0

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, "");