Application de styles sélectionnés à un contrôle onglet après des occurrences de publication asynchrones

Question

Je suis devenu fou sur un problème avec mon contrôle onglet.

Cela a à voir avec quelque chose de gâcher pendant les requêtes ajax dans ASP.NET et ça me rend fou parce que je pense avoir traversé au moins 50 différentes solutions possibles pour essayer de résoudre ce problème.

Laissez-moi vous expliquer. J'ai un contrôle Tab (un TabStrip). C'est simplement une table (générée avec un contrôle Repeater) qui a une ligne et chaque colonne (chaque élément td) est une "tabulation". Chaque fois qu'un onglet est cliqué, un div correspondant (Panel) est affiché.

Cela fonctionne, le div correspondant est affiché parce que je définis la propriété de style de div pour afficher: block.

Le problème que je rencontre concerne les styles appliqués aux éléments td. Il y a deux styles, un qui indique que l'onglet est sélectionné et l'autre qui indique que l'onglet n'est pas sélectionné. Par conséquent, lorsque cet utilisateur sélectionne un onglet, le div correspondant est affiché et la fonction JavaScript passe à travers le tds dans le TabStrip et applique le style "non sélectionné" à tous les onglets sauf l'onglet actuellement sélectionné, auquel cas le Le style "selected" est appliqué.

Cela fonctionne génial à moins qu'une requête Ajax ne se soit jamais produite sur la page.

Pour une raison folle, les classes css ne sont plus disponibles pour le JavaScript qui contrôle les onglets. Les onglets fonctionnent (comme dans le cas où ils affichent les divs correspondants) lorsqu'on clique dessus, sauf que les styles ne sont plus appliqués aux onglets. J'ai essayé à peu près tout pour contourner ce problème. J'ai même créé une fonction JavaScript qui ajoute dynamiquement le lien à la feuille de style avec les styles de l'onglet afin de s'assurer que la feuille de style a été chargée même pendant les requêtes Ajax. Cela n'a pas aidé et je considère maintenant une approche complètement différente, mais je n'ai aucune idée de la façon dont je vais le faire. Ce que je veux faire est de définir la propriété de style du tds au lieu de définir la propriété className. Les styles sont stockés dans la feuille de style externe et je voudrais les conserver afin que je puisse facilement changer le style de TabStrip en utilisant la feuille de style quand je veux sans avoir à modifier le code du serveur.

Alors ... comment extraire-t-on le style de la feuille de style pour l'analyser et appliquer les propriétés de style appropriées à l'élément?

Avez-vous d'autres recommandations ... parce que cette idée semble être assez difficile et à ce stade, je me demande si je suis à la recherche d'une solution beaucoup plus simple à ce problème moche.

Merci pour votre aide,

-Frinny

Answer 1

J'ai trouvé la réponse au problème.

Cela n'avait rien à voir avec la feuille de style. Cela a fini par être un problème avec la façon dont j'enregistrais les tableaux JavaScript utilisés à des fins de tabulation dans mon code .NET avec le ScriptManager.

Il est long et compliqué pour moi d'expliquer, donc je vais le résumer à cette note:

La méthode ScriptManager.RegisterArrayDeclaration() va ajouter des éléments à un tableau déjà existant ... si le tableau doesn n'existe pas, il va en créer un, puis ajouter des éléments. Vous ne devez appeler cette fonction que si vous devez insérer de nouveaux éléments dans le tableau. Mon problème était que les tableaux utilisés à des fins de tabulation doublaient chaque fois qu'une publication asynchrone se produisait. Cela signifiait que le tabulation JavaScript sélectionnait l'onglet approprié, puis le désélectionnait lorsque la valeur était à nouveau trouvée dans le tableau.

J'ai contourné mon problème en utilisant la méthode Page.ClientScript.RegisterArrayDeclaration() à la place. Cela n'a pas le même comportement.

Merci pour votre temps!

-Frinny

Answer 2

Parsing le style de la feuille de style et de le mettre directement dans l'élément de style doit être évité. C'est définitivement un comportement non-standard. Cependant, c'est la seule façon possible d'atteindre votre objectif (ce dont je doute), vous chargez le fichier, l'analysez avec des expressions régulières, faites un remplacement avec des expressions régulières, puis appliquez le résultat dans votre code HTML.

Une meilleure solution serait d'analyser en profondeur le code HTML sur lequel votre page fonctionne après l'un de ces rappels AJAX qui confond les choses. Si vous n'avez pas d'outil qui vous permettra de voir le code HTML actuel (pas le contenu qui a été téléchargé), alors vous devez en trouver un. Quelque part là-bas, vous devriez voir la raison pour laquelle vos choses échouent après la requête AJAX.