ASP.Net ScriptManager et UpdatePanel ignorant javascript une fois posté

Question

J'ai des problèmes majeurs en utilisant UpdatePanels sur un site Web. Le problème est que lorsque j'utilise ScriptManager, tout le JavaScript côté client qui était actif lors du chargement initial de la page est perdu une fois qu'un panneau de mise à jour est publié.

Voici ce que je suis en train de faire ...

J'ai un certain nombre de contrôles de calandre .net sur la même page chacun dans son propre panneau de mise à jour. Les calendriers sont initialement masqués, jusqu'à ce que vous cliquiez dans une zone de texte associée (également dans le panneau de mise à jour), à ce moment-là le calendrier apparaît afin que vous puissiez sélectionner une date. Les calendriers fonctionnent très bien jusqu'à ce que vous changiez réellement la date (post-retour), après quoi les calendriers n'apparaissent plus lorsque vous cliquez dans les zones de texte, le JavaScript "onfocus" est perdu. Après avoir regardé google pendant quelques heures, je peux obtenir des choses semi-fonctionnelles en ajoutant dynamiquement un attribut "onfocus" à la TextBox et en enregistrant le script de démarrage avec le ScriptManager quand le calendrier est publié.

Exemple:

TextBox1.Attributes.Add("onfocus", "document.getElementById('searchArrivalDateCalendarDiv').style.display = 'block';") 
ScriptManager.RegisterStartupScript(Page, GetType(Page), "StopTxtClick", "$(document).ready(function(){$('.txtArrivalDate').click(function(event){event.stopPropagation(); $('div.searchArrivalDateCalendarDiv').show(); });});", True) 

Cela semble vraiment peu pratique, surtout quand je présente une page maître. Je vais devoir réenregistrer un tas de scripts de démarrage.

Il doit y avoir un moyen plus facile?

Answer 1

Il semble que vous souhaitiez utiliser la délégation d'événements. L'idée principale est que les événements explosent et que vous joignez votre gestionnaire d'événements en dehors du panneau de mise à jour (peut-être vers une div ou une table dans laquelle se trouve le panneau de mise à jour). Ce gestionnaire est en charge de tous les événements qu'il reçoit, même lorsque votre panneau de mise à jour affiche et qu'une nouvelle zone de texte est affichée, vous n'avez pas besoin de rattacher le gestionnaire d'événements. Lorsque la nouvelle zone de texte déclenche son événement, votre gestionnaire d'événements existant peut essayer de le gérer.

Ce qui suit est juste une façon de faire la délégation de l'événement en javascript (en utilisant jquery et pris de http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery)

jQuery.delegate = function() { 
      return function(e) { 
       var target = $(e.target); 
       if (target.attr("showCalendar")) { 
        var calendar = $("#" + target.attr("showCalendar")); 
        calendar.css("display", "block"); 
       } 
      } 
     } 

     $(document).ready(function() 
     { 
      $('#test').click($.delegate()); 
     }); 

<form id="form1" runat="server"> 
     <asp:ScriptManager runat="server" EnablePartialRendering="true"/> 
     <div id="test" style="width:100%;"> 
      <asp:UpdatePanel runat="server"> 
       <ContentTemplate> 
        <input type="text" id="testText" showCalendar="testCalendarDiv" /> 
        <div id="testCalendarDiv" style="display:none;"> 
         <asp:Calendar runat="server" ID="testCalendar1"/> 
        </div> 
       </ContentTemplate> 
      </asp:UpdatePanel> 
     </div> 
    </form> 

Dans cet exemple simple, j'inscrire la méthode déléguée sur un clic de cette div (la zone de texte et le calendrier sont à l'intérieur de cette div). Lorsque vous cliquez sur la zone de texte, l'événement clique jusqu'à la div. La méthode déléguée est appelée et je vérifie l'attribut showCalendar de l'élément qui a déclenché l'événement. Si cet attribut existe, je trouve l'élément vers lequel cet attribut pointe et met à jour son style d'affichage. C'est un exemple assez simple mais vous pouvez facilement étendre la méthode déléguée pour prendre en charge les fonctions qu'elle appelle en fonction d'un certain type de règles que vous enregistrez.

Answer 2

Le problème est qu'une actualisation UpdatePanel supprime complètement le DOM dans son ou ses éléments div. La meilleure façon de résoudre ce problème est d'utiliser la fonctionnalité en direct() lorsque cela est possible, par exemple .:

$(document).ready(function() { 
    $('.txtArrivalDate').live('click', function (event) { 
    event.stopPropagation(); 

    $('div.searchArrivalDateCalendarDiv').show(); 
    }); 
}); 

Answer 3

Merci pour les réponses.

Je n'ai toujours pas réussi à résoudre ce problème. Cependant, j'ai trouvé une solution alternative pour l'affichage du calendrier.

J'utilise maintenant le contrôle CalendarExtender qui fait partie de la boîte à outils ASP.Net AJAX Control. C'est une bien meilleure solution pour ce dont j'ai besoin. Le calendrier dans son ensemble est beaucoup plus lisse et plus net et je n'ai plus besoin d'utiliser le panneau de mise à jour.Il prend également en charge plusieurs cultures sans aucun codage supplémentaire ce qui est génial.

Vive.