De tout l'ajax toolkit, le seul composant que j'utilise est bien l'Update panel. Ce simple composant permet de faire un postback partiel de la page ASP.Net. Son utilisation peut néanmoins est compléxifiée si plusieurs update panels sont placés sur la même page et surtout s'ils "communiquent" les uns avec les autres. Il existe également une problématique avec l'utilisation de JQuery et le célèbre et merveilleux framework JavaScript (le seul officiellement supporté par Microsoft! adieu prototype ou extjs).
En effet, une bonne habitude à prendre avec JQuery est d'executer nos scripts une fois la page entièrement chargée via l'utilisation de la méthode $(document).ready()
Malheureusement cette méthode n'est pas appelée dans le cas d'un update panel et les scripts ne sont éventuellement plus enregistrés.
Prenons un cas pratique. Je possède une page Web qui contient un update panel au sein duquel je dessine plusieurs éléments ayant chacun un tooltip. Pour activer le tooltip, 5 petites lignes JQuery suffisent:
<script type="text/javascript">
$(document).ready(function() {
$("a[title]").tooltip({
tip: '.tooltip',
effect: 'fade',
fadeOutSpeed: 1000,
predelay: 400,
position: "bottom right"
});
});
</script>L'astuce est maintenant d'appeler cette méthode lors du postback de l'update panel. Une solution consiste donc à passer par l'enregistrement d'un script JS en code-behind mais je dois avouer que cette solution ne m'arrange pas, le Javascript devant selon moi, rester coté aspx. Il nous faudrait donc coté markup détecter ce semi-postback.
En effet, nous pourrions utiliser la méthode function pageLoad(sender, args)() mais celle-ci est appelée à chaque fois et c'est bien uniquement lorsqu'un update panel se rafraichit que nous voulons agir. Cela peut se faire grâce à une petite méthode discrète get_isPartialLoad()
Ainsi, il nous suffit (pour ne pas dupliquer le JS) de copier le code JQuery dans une méthode, puis de l'appeler à la fois dans $(document).ready() et lorsque get_isPartialLoad() est vrai.
le code devient ainsi
<script type="text/javascript">
$(document).ready(function() {
getTips();
});
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
getTips();
}
}
function getTips() {
$("a[title]").tooltip({
tip: '.tooltip',
effect: 'fade',
fadeOutSpeed: 1000,
predelay: 400,
position: "bottom right"
});
}
}
Simple à mettre en place, mais astuce difficile à deviner par soi-même!
Souscrire