jQuery UI reload tab content in ASP.NET MVC 3 application

I'd like in an ASP.NET MVC 3 reload the tab content each tab I change tab, when I select the first tab (index = 0), I'd like reload the content. In the tab, it's a ASP.NET MVC partial View

I have this code :

<script type="text/javasc开发者_StackOverflow社区ript">
    $(function () {
        $('#tabs').tabs();
    });
</script>

<div id="tabs"> 
    <ul> 
        <li><a href="#tabs-1">AAAA</a></li> 
        <li><a href="#tabs-2">BBBB</a></li>
    </ul>

    <div id="tabs-1"> 
        @Html.Partial("PartialViewA", Model)
    </div> 
    <div id="tabs-2"> 
        @Html.Partial("PartialViewB", Model)
    </div> 

<div>

Do you have an idea ?

According to the jQuery tabs demos it should be as simple as doing:

<div id="tabs"> 
    <ul> 
        <li><a href="@Url.Action("myActionA", "myController")">Tab 1</a></li>
        <li><a href="@Url.Action("myActionB", "myController")">Tab 2</a></li>
    </ul>
</div>

then in your controller:

public ActionResult MyActionA
{
    return Partial("PartialViewA");
}

public ActionResult MyActionB
{
    return Partial("PartialViewB");
}

here's a quick example, the IMPORTANT part is the select: function(e, ui) bit when you initialise the tabs as this overrides the default bahaviour and gives access to the tab click event:

<div id="menu" style=" background-color:White; width:950px; height:400px; float:left;">             
    <div id="tabContainer">
        <ul> 
            <li><a href="#tab0">Home</a></li> 
            <li><a href="#tab1">Products</a></li> 
            <li><a href="#tab2">Contact Us</a></li>                                               
        </ul>                    

        <div id="tab0"></div>    
        <div id="tab1"></div> 
        <div id="tab2"></div>       
    </div>          
</div> 

$(function() {
    var $tabs = $("#tabContainer").tabs({
        select: function(e, ui) {
            var thistab = ui;
            runMethod(thistab.index);
        }
    });
});

function runMethod(thistab) {
    selectedtab = thistab;
    switch (thistab) {
        case 1:
            getTab0Data();
            break;

        case 2:
            getTab1Data();
            break;

        case 3:
            getTab2Data();
            break;
    }
}

basically, the getTab*n*Data() function(s) run an ajax request that populates the appropriate div (i.e. tab0, tab1, tab2 etc) via a partialview result.

for jquery ajax, see:

jquery ajax

hope this helps

Have a look at this post:

http://dalldorf.com/blog/2011/03/jquery-ui-tabs-main-menu-1/

It may help you find a solution.

It explains how to use the jQuery UI Style Tabs look and feel but leaves you with more control about how the content gets rendered.

It avoids the caching and nesting of recursive calls to the layout...

check the demos from jQuery Tabs Ajax Demos, just call your controller and return a partial view from it.

I found a solution wich is to deny caching the action method, and at the same time keep the tabs caching enabled so you don't lose any current input when switching tabs like this:

[OutputCaching(Location=OutputCacheLocation.None,NoStore=true)]
Public ActionResult YourMethod()...

According to the the jQuery UI site you can try to specify the cache option explicitly

e.g.

$(function () {
    $('#tabs').tabs({
        cache: false
    });
});

That will prevent the browser from caching the original ajax content, so when you revisit the tab it will reload its content.