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

Question

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/javascript">
    $(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 ?

here you go view-source:jqueryui.com/demos/tabs/cookie.html

user1503058
– user1503058

2012-07-05 06:14:12 +00:00
Commented Jul 5, 2012 at 6:14 — user1503058
– user1503058, Commented Jul 5, 2012 at 6:14

Sergi Papaseit · Accepted Answer · 2011-03-24 13:17:42Z

6

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");
}

edited Mar 24, 2011 at 13:17

answered Mar 24, 2011 at 13:11

Sergi Papaseit

16.2k16 gold badges71 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

IsmailS Over a year ago

+1 I want to be able to directly access Tab 2 by url. So if I say www.myDomain.com/controler/Action#Tab2 then it should show tab2. How to achieve it in this way?

Sergi Papaseit Over a year ago

I've never used the jQuery tabs myself so I wouldn't really know, but I guess you could make the tab number an action method parameter, pass it to the view through the ViewBag or in the view model and switch to the corresponding tab with jQuery.

IsmailS Over a year ago

See jim's answer. That worked well. with show event instead of select

jim tollan · Accepted Answer · 2011-03-24 13:42:43Z

3

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

answered Mar 24, 2011 at 13:42

jim tollan

22.5k4 gold badges53 silver badges64 bronze badges

7 Comments

IsmailS Over a year ago

BTW, I guess there might be some use of $tabs variable or it's just like that? Can you please throw some light on this.

jim tollan Over a year ago

Ismail - the $tabs variable can be used to access any of the prepopulated option variable that you may have initialised the tabs component with. i personally have never had cause to use them, but it's useful to have a handle on the instance for that purpose.

IsmailS Over a year ago

Great! Very happy to see your quick answer. Thanks very much Jim :-)

IsmailS Over a year ago

But, select event is not firing in the first request. Hence not loading the content whether I give request url as normal or suffixed with #tab1 :(. Why? Later when I click tab 2 or 3 then it loads properly.

IsmailS Over a year ago

Thanks @jim, show instead of select event worked nicely. :)

|

Hellspawn · Accepted Answer · 2011-11-14 23:54:42Z

2

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

answered Nov 14, 2011 at 23:54

Hellspawn

335 bronze badges

Comments

moi_meme · Accepted Answer · 2011-03-24 13:11:15Z

1

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

answered Mar 24, 2011 at 13:11

moi_meme

9,3574 gold badges48 silver badges65 bronze badges

Comments

McGarnagle · Accepted Answer · 2012-10-26 05:45:32Z

1

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()...

edited Oct 26, 2012 at 5:45

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

answered Mar 7, 2012 at 20:51

Houssem

111 bronze badge

1 Comment

dmuun Over a year ago

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]

tobias86 · Accepted Answer · 2011-03-25 12:12:13Z

0

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.

answered Mar 25, 2011 at 12:12

tobias86

5,0291 gold badge23 silver badges31 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

3 Comments

7 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

7 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related