Navigation par onglets - Cadres ou AJAX?

Question

J'ai ce que j'imagine être une interface web assez standard.

Il existe 4 ListView différents (contrôles de grille) auxquels on accède par une série d'onglets en haut.

J'ai implémenté cela comme suit:

alt text http://img402.imageshack.us/img402/1530/pagedu8.jpg

Tab 1 chargera Page 1 contenant la grille 1 dans Frame 2, onglet 2 se charge Page 2 contenant la grille 2 dans Frame 2 etc.

Toutefois, cela signifie que si vous cliquez sur un élément de la grille et que vous chargez DetailsPage1.aspx dans l'image 2, l'image 1 et les onglets sont toujours visibles et actifs.

J'ai été informé que je devrais avoir un seul cadre, et charger les pages dynamiquement en fonction de l'onglet, en utilisant HttpRequest (ou WebRequest dans asp.net).

Est-ce la bonne approche à adopter? Si vous avez des ressources ou des conseils à portée de main, ce serait apprécié!

Merci

Answer 1

Les cadres sont un non-non absolu. Il n'y a aucun avantage pour les cadres qui ne peuvent pas être obtenus en utilisant d'autres techniques. Est-ce que cela signifie que vous devez utiliser AJAX? Pas nécessairement. AJAX est une solution parfaitement adaptée si vous ressentez le besoin de fournir une interface riche et transparente, mais ce n'est pas strictement nécessaire. Vous pouvez utiliser des inclusions côté serveur pour séparer vos onglets dans une autre sous-page (commune), mais puisque vous mentionnez ASP.NET (en supposant que vous exécutez framework v2 ou supérieur), vous pouvez utiliser Master Pages, où vos onglets se trouvent dans une section de contenu ou dans le masque lui-même, et vos grilles/détails se trouvent dans une autre section de contenu. La principale différence entre les deux techniques est que, en utilisant AJAX, la transition d'un onglet à l'autre sera fluide et transparente, mais a) cela demande un peu plus de travail (surtout si vous ne connaissez pas le framework AJAX) et b) puisque vous avez essentiellement 4 pages en une, les pages sont «plus lourdes» et sont plus complexes à maintenir. Si vous optez pour la route non-AJAX, la différence principale est qu'il y aura un effet de rafraîchissement petit mais distinct lorsque vous cliquez sur chaque onglet (puisqu'il charge une nouvelle page à chaque fois). Bien sûr, les pages maîtres sont utiles pour maintenir un style et une structure de site cohérents de toute façon, il n'y a donc aucune raison pour laquelle vous ne pouvez pas utiliser AJAX avec un système de page maître.

Answer 2

Les cadres sont boiteux: vous avez des problèmes, si les utilisateurs veulent définir un signet et si les utilisateurs visitent votre site via google: Ensuite, votre cadre de navigation n'est pas visible. Donc, vous avez besoin de beaucoup de javascript sale. pour vérifier cela. Si vous avez besoin de javascript, faites-le dès le début et utilisez AJAX

Answer 3

Avez-vous essayé le TabContainer ou en chargeant les 4 panneaux de détail et en affichant/masquant simplement les panneaux lors du changement de sélection d'onglet? En fonction des écrans que verront vos utilisateurs, si vous chargez dynamiquement les vues de détail (Ajax ou publication), il se peut que vous ayez du mal à conserver les informations que l'utilisateur a saisies et vous devrez attendre (les utilisateurs n'aiment pas attendre).

Answer 4

Ajax est le meilleur choix. Mais gardez à l'esprit de le rendre navigable via back/forward. Le meilleur choix est de changer le hash de la page. J'ai utilisé quelque chose comme ceci:

domain.com/#tab1 pour premier onglet domain.com/#tab2 pour la deuxième onglet

et ainsi de suite.

Si vous utilisez jQuery, this peut être un bon début (je l'utilise et je n'ai eu aucun problème avec). Je suis sûr qu'il y a une solution pour tous les cadres populaires bien que :)

Answer 5

Au lieu d'utiliser des cadres, vous devriez simplement inclure votre page de navigation dans toutes vos autres pages. Le navigateur verra que vous incluez le même document dans toutes vos pages et le cachez.

Answer 6

Je recommande d'utiliser le plugin jQuery et jQuery UI. Aucun cadre ne sera nécessaire, juste des conteneurs div.

Answer 7

Comme StingyJack, je suggère de jeter un coup d'œil au contrôle TabContainer, mais vous pouvez faire en sorte que votre ViewState ne soit pas trop grand si vous le faites. Ainsi, par exemple, ne chargez rien dans un GridView tant que cet onglet n'est pas en cours d'affichage et supprimez-le si ce n'est pas le cas (enregistrement dans la base de données, si nécessaire.) L'événement ActiveTabChanged de TabContainer cette stratégie.Vous pouvez consulter ViewState pour les grilles, mais laissez-le pour le conteneur.

Answer 8

DO utilise pas les cadres (ou iframes pour cette question) à moins que vous absolument doit ...

Les seules raisons valables que je peux penser à utiliser (i) des cadres est des commandes de téléchargement de fichiers en fait, et Je ne suis pas sûr que ce soit valide là non plus ...

Answer 9

Vous utilisez ASP.NET, donc il suffit de charger les 4 contrôles dans un mutliview et ensuite à la publication de publier le visible sur le bouton qui a été cliqué.

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.multiview.aspx