What's the best way to use a YUI TabView in an ASP.NET MVC app?

Question

I'm creating an ASP.NET MVC web app and would like to use the YUI TabView (because I generally like its default look and I'm using a couple other YUI things, so the additional overhead will be comparatively small) to render a set of tabs in the master page. Here's what I want:

• Each tab should render the result of a particular controller action.
• Each of these controller actions will render some HTML and associated javascript.
• Eventually there will be some application state to manage, but I am ignoring that at the moment just to look at the tabbed view.

What's the best way to do this?

The YUI TabView examples suggest that each tab's content is in its own div.

<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>

I don't want to do this, since I don't want to load all the content for all the tabs all at once. I'd think I'd like to catch events that let me see the tab that is being activated and then redirect to the appropriate action. It looks like the tabs' "dataSrc" attribute could help me, so I built up a test based on their dynamic example:

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'); 

This seems to work well enough in getting to the actions, but one artifact of this is that any javascript that is emitted by my action doesn't seem to get evaluated properly... i.e., this type of thing doesn't show my alert box:

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

My concrete questions are:

1. Should I abandon YUI's TabView because it's just not the best choice for this?
2. Should I just catch the TabView's onBeforeTabChange event and just redirect to a view that then re-renders the master page (and thus the TabView), basically un-ajaxing the TabView?
3. Is there a way I can use YUI's TabView and retain the ajax behavior while getting my actions' script code to properly run?

Answer 1

Your content is going to be placed into the page at the appropriate place. The time for its execution is long passed. You need something like jQuery's call back function that will run a script of your choosing after the AJAX action completes. For your alert to pop, you'd have to send it with the original page request.