Question

I m using a Ajax Tab panel in my application.
There are 4 tabs on Left hand side and a partial view on right hand side.
In each of these tab I m displaying some data and there is a select link button on each tab.
when I click on any of the select link button I m filling the partial view with some information.
When this happens my view is completly loaded again.
A B C D

eg these are the tabs.
let us suppose that I m on tab B and now when I click on the select link button My view is completly loaded with information.
but the tab loose the focus at this point. I comes back to the default value.
so I want help on this
1) either I have to refresh only the partial view without loading the complete page
2) or I need to maintain active tab index value on click on select link button
Please help me with this problem
and provide me examples

Answer 1

jQuery Tabs – Load contents only when clicked
Here is the example which loading content of the tabs dynamically by Ajax. It is for PHP what you need to change is put controller/action instead of URL of the PHP page.

$.get("controller/action", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml");

or else instead of Ajax.ActionLink

use <a onclick="LoadTab(@item.ID)">Item @item.ID</a>
and jquery function to change the tab and load data dyanamicaly

function LoadTab(id){
     //Change tab here Ex: $('#tabs').tabs('select', index);
      $.get('ajax/test.html', {Id, id},function(data) {
          $('#Partial_Controller_Name').html(data);

      });

}