Quelle est la meilleure façon d'utiliser un YUI TabView dans une application ASP.NET MVC ?

Question

Je suis en train de créer une application web ASP.NET MVC et j'aimerais utiliser le YUI TabView (parce que j'aime généralement son apparence par défaut et que j'utilise quelques autres éléments YUI, donc la surcharge supplémentaire sera relativement faible) pour rendre un ensemble d'onglets dans la page principale. Voici ce que je veux :

• Chaque onglet doit rendre le résultat d'une action particulière du contrôleur.
• Chacune de ces actions du contrôleur rendra du HTML et du javascript associé.
• En fin de compte, il y aura un état de l'application à gérer, mais je l'ignore pour l'instant pour me concentrer sur l'affichage par onglets.

Quelle est la meilleure façon de procéder ?

Le YUI Exemples de TabView suggère que le contenu de chaque onglet se trouve dans sa propre division.

<div id="demo" class="yui-navset">
    <ul class="yui-nav">
        <li><a href="#tab1"><em>Tab One Label</em></a></li>
        <li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
        <li><a href="#tab3"><em>Tab Three Label</em></a></li>
    </ul>            
    <div class="yui-content">
        <div id="tab1"><p>Tab One Content</p></div>
        <div id="tab2"><p>Tab Two Content</p></div>
        <div id="tab3"><p>Tab Three Content</p></div>
    </div>
</div>

Je ne veux pas faire ça, puisque je ne veux pas charger tout le contenu de tous les onglets en même temps. Je pense que j'aimerais attraper les événements qui me permettent de voir l'onglet qui est activé et ensuite rediriger vers l'action appropriée. Il semble que l'attribut "dataSrc" des onglets pourrait m'aider, j'ai donc construit un test basé sur leur exemple dynamique :

tabView.addTab( new YAHOO.widget.Tab({
    label: 'One',
    dataSrc: '/Home/Action1',
    cacheData: true,
    active: true
}));

tabView.addTab( new YAHOO.widget.Tab({
    label: 'Two',
    dataSrc: '/Home/Action2',
    cacheData: true
}));

tabView.appendTo('container'); 

Cela semble fonctionner assez bien pour atteindre les actions, mais un artefact de ceci est que tout javascript qui est émis par mon action ne semble pas être évalué correctement... c'est-à-dire que ce type de chose n'affiche pas ma boîte d'alerte :

public ActionResult Action2()
{
    return Content("<script type='text/javascript'>alert('test');</script>");
}

Mes questions concrètes sont les suivantes :

1. Dois-je abandonner la TabView de YUI parce qu'elle n'est tout simplement pas le meilleur choix pour cela ?
2. Devrais-je simplement attraper le message de la TabView onBeforeTabChange et rediriger vers une vue qui redonne ensuite la page principale (et donc la TabView), ce qui revient à désajuster la TabView ?
3. Existe-t-il un moyen d'utiliser la TabView de YUI et de conserver le comportement ajax tout en obtenant que le code script de mes actions s'exécute correctement ?

Answer 1

Votre contenu va être placé dans la page à l'endroit approprié. Le temps de son exécution est dépassé depuis longtemps. Vous avez besoin de quelque chose comme la fonction de rappel de jQuery qui va exécuter un script de votre choix après la fin de l'action AJAX. Pour que votre alerte apparaisse, vous devez l'envoyer avec la demande de page originale.