Quel est le meilleur moyen (le plus efficace) en asp .net de retourner une page entière en contenu tabulé ?

Question

Ce que je veux faire, c'est qu'à chaque fois que je clique sur un onglet, la zone de contenu est remplacée par une toute nouvelle page. Je ne veux pas un chargement complet de la page, donc je veux le faire en ajax, mais j'ai l'habitude de renvoyer de petites données jason via les méthodes de la page. je ne sais pas trop comment construire une toute nouvelle page et la renvoyer via ajax et j'aimerais simplement assigner tout le contenu renvoyé à une div et en finir avec ça. quelle est la meilleure façon de faire cela avec le moins de surcharge possible (je sais qu'il y a des façons inefficaces pour le scriptmanager de faire ajax) ?

ou est-il préférable de charger le contenu de l'onglet dans une iframe ?

Pour info, j'utilise déjà jquery pour appeler des pagemethods légers sur ma page asp net et cela fonctionne très bien.

Answer 1

Si vous utilisez Asp.net et Asp.net Ajax Control Toolkit, vous pouvez utiliser le contrôle AjaxControlToolkit Tab pour mettre en œuvre votre approche. (dans chaque onglet, vous devez mettre une nouvelle page ou un module (je recommande d'utiliser le module)).

Si ce n'est pas le cas, vous pouvez utiliser un contrôle MultiView Asp.net et quelques boutons qui, lorsque l'utilisateur clique sur un bouton, modifient l'index actif de la MultiView (via un AsynchPostback ajax).

et enfin vous pouvez utiliser des div et les contrôler via javascript

Answer 2

Une autre option consiste à utiliser l'interface utilisateur jQuery Tab UI

** EDIT : cela fonctionnera si les pages proviennent toutes du même domaine car elles sont chargées via AJAX (des restrictions de sécurité s'appliquent). S'il est nécessaire de charger des pages provenant d'autres domaines, il peut être nécessaire de mettre en œuvre une politique interdomaines (nécessitant l'autorisation des autres domaines) ou d'utiliser un proxy local script pour demander les données et les transmettre au javascript. (JSONP http://en.wikipedia.org/wiki/JSONP est une exception).

Consultez ce lien pour une démonstration :

http://jqueryui.com/demos/tabs/ajax.html

NB : Vous devrez télécharger les bibliothèques jQuery UI supplémentaires et inclure le widget Tabs.

Les obtenir ici : http://jqueryui.com/download

Le code ressemblera à ceci :

<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.7.2.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.tabs.js"></script>
<script>
$(function() {
    $( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab.");
            }
        }
    });
});
</script>

<div id="tabs">
    <ul>
        <li><a href="page1.aspx">Tab 1</a></li>
        <li><a href="page2.aspx">Tab 2</a></li>
        <li><a href="page3.aspx">Tab 3</a></li>
    </ul>
</div>