Nouveauté Javascript, quelqu'un peut-il expliquer ce code ligne par ligne?

Question

J'ai utilisé ce code pour maintenir la position de défilement et je n'ai pas la moindre idée de ce que cela signifie. Si quelqu'un a le temps, pouvez-vous me fournir une explication étape par étape de ce qu'il fait. Ici, il est:

<script language="javascript" type="text/javascript"> 
    var xPos, yPos; 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

     function BeginRequestHandler(sender, args) { 

     if ($get('<%=lstAuctions.ClientID %>') != null) { 

      xPos = $get('<%=lstAuctions.ClientID %>').scrollLeft; 
      yPos = $get('<%=lstAuctions.ClientID %>').scrollTop; 
     } 
    } 

    function EndRequestHandler(sender, args) { 

     if ($get('<%=lstAuctions.ClientID %>') != null) { 

      $get('<%=lstAuctions.ClientID %>').scrollLeft = xPos; 
      $get('<%=lstAuctions.ClientID %>').scrollTop = yPos; 
     } 
    } 

    prm.add_beginRequest(BeginRequestHandler); 
    prm.add_endRequest(EndRequestHandler); 

</script> 

Answer 1

var xPos, yPos; // global variable declaration 
var prm = Sys.WebForms.PageRequestManager.getInstance(); // Some webforms javascript manager 

/* 
* Begin function with 2 arguments 
*/ 
function BeginRequestHandler(sender, args) { 

    // check if the element generated by .net with id 'lstAuctions.ClientID' exists 
    if ($get('<%=lstAuctions.ClientID %>') != null) { 

     // get its scroll left and top position and 
     // assign it to the global variables 
     xPos = $get('<%=lstAuctions.ClientID %>').scrollLeft; 
     yPos = $get('<%=lstAuctions.ClientID %>').scrollTop; 
    } 
} 

/* 
* this method gets executed last, it uses the 
* already set global variables to assign the old scrollpositions again 
*/ 
function EndRequestHandler(sender, args) { 

    if ($get('<%=lstAuctions.ClientID %>') != null) { 
     // assign the previous scroll positions 
     $get('<%=lstAuctions.ClientID %>').scrollLeft = xPos; 
     $get('<%=lstAuctions.ClientID %>').scrollTop = yPos; 
    } 
} 

// first function gets executed on the beginning of a request 
prm.add_beginRequest(BeginRequestHandler); 
// second function gets executed on the end of the request 
prm.add_endRequest(EndRequestHandler); 

Answer 2

scrollLeft

scrollTop

Sys.WebForms.PageRequestManager Class

Answer 3

Sys.WebForms.PageRequestManager est un ASP.Net AJAX construire. En particulier dans votre code, il y a des variables allouées (xPos, yPos, prm) et deux fonctions définies (BeginRequestHandler, EndRequestHandler). À la fin du code se trouvent deux appels de fonction (prm.add_beginRequest, prm.add_endRequest) qui affectent ces fonctions en tant que gestionnaires d'événements.

Les appels $ get font partie de la bibliothèque en tant que raccourci pour obtenir des données du côté client. C'est très javascript sous les couvertures, mais c'est juste une implémentation syntaxique à travers la bibliothèque côté client ASP.Net AJAX.

Answer 4

var xPos, yPos;

** déclare deux variables globales.

---

fonction BeginRequestHandler (expéditeur, args) {

** déclare une nouvelle fonction. Cette fonction est probablement utilisé pour un gestionnaire d'événements

si (obtenir $ ('<% = lstAuctions.ClientID%>')! = Null) {

** ceci est une combinaison de ligne ASP/ASP. Code NET tel que défini dans l'appariement <%%>.

xPos = $ get ('<% = lstAuctions.ClientID%>'). ScrollLeft; ** capture la position de défilement actuelle de la page dans la variable locale.

yPos = $ get ('<% = lstAuctions.ClientID%>'). ScrollTop; ** capture la position de défilement actuelle de la page dans la variable locale.

---

fonction EndRequestHandler (expéditeur, args) {

** déclare une nouvelle fonction. Cette fonction est probablement utilisé pour un gestionnaire d'événements

si (obtenir $ ('<% = lstAuctions.ClientID%>')! = Null) {

** ceci est une combinaison de ligne ASP/ASP. Code NET tel que défini dans l'appariement <%%>. $ Get ('<% = lstAuctions.ClientID%>').scrollLeft = xPos; ** définit la position de défilement de la page sur la valeur de xPos.

$ get ('<% = lstAuctions.ClientID%>'). ScrollTop = yPos; ** définit la position de défilement de la page sur la valeur de xPos.

---

var prm = Sys.WebForms.PageRequestManager.getInstance(); ** déclare et initialise une nouvelle variable dans PageRequestManager.

prm.add_beginRequest (BeginRequestHandler); ** ajoute le gestionnaire d'événements défini ci-dessus à la demande beginRequest de la page en cours.

prm.add_endRequest (EndRequestHandler); ** ajoute le gestionnaire d'événements défini ci-dessus à la demande endRequest de la page en cours.

Answer 5

Vous avez demandé ...

// declare 2 variables 
var xPos, yPos; 
// get an instance of the PageRequestManager - this looks like an MS ajax helper class 
var prm = Sys.WebForms.PageRequestManager.getInstance(); 

// declare a function 
function BeginRequestHandler(sender, args) { 

    // get the ClientSide HTML DOM element which corresponds to the lstAuctions asp control on the serverside 
    if ($get('<%=lstAuctions.ClientID %>') != null) { 
     // if the element is not null (eg: page is not broken) 

     // get the x Position of the object relative to what is displayed by the scrolled window (if you scroll sideways this value changes) 
     xPos = $get('<%=lstAuctions.ClientID %>').scrollLeft; 
     // get the y Position of the object relative to what is displayed by the scrolled window (if you scroll up/down this value changes) 
     yPos = $get('<%=lstAuctions.ClientID %>').scrollTop; 
    } 
} 

// declare a function 
function EndRequestHandler(sender, args) { 

    // get the ClientSide HTML DOM element which corresponds to the lstAuctions asp control on the serverside 
    if ($get('<%=lstAuctions.ClientID %>') != null) { 
     // if the element is not null (eg: page is not broken) 

     // set the x position of the object to what we got last time (horizontal scroll the page) 
     $get('<%=lstAuctions.ClientID %>').scrollLeft = xPos; 

     // set the y position of the object to what we got last time (vertical scroll the page) 
     $get('<%=lstAuctions.ClientID %>').scrollTop = yPos; 
    } 
} 

// tell the page request manager to call our BeginRequestHandler method when it begins it's request 
prm.add_beginRequest(BeginRequestHandler); 

// tell the page request manager to call our EndRequestHandler method when it ends it's request 
prm.add_endRequest(EndRequestHandler); 

En fait, il ressemble à la page utilise la bibliothèque MS ajax pour afficher un contenu dynamique (remplaçant probablement une liste avec une autre liste), mais en conservant la place que l'utilisateur a fait défiler la page pour ne pas "sauter" lorsque le nouveau contenu remplace l'ancien contenu.