Sortowanie danych na podstawie zakładek

Witam
Mam do rozwiązania zadanie na uczelnię polegające na sortowaniu danych na stronie internetowej.Posiadam taki kod:

<nav id="menu">
        <a href="#tab1">tab1</a>
        <a href="#tab2">tab2</a>
        <a href="#tab3">tab3</a>        
</nav>    
<div class="tab" id="tab1">
        <!-- tabela z danymi z bazy -->
</div>
<div class="tab" id="tab2">
        <!-- tabela z danymi z bazy -->
</div>
<div class="tab" id="tab3">
        <!-- tabela z danymi z bazy -->
</div>

W nim mam tabele i wyświetlają się dane na podstawie kryteriów. Mój problem polega na tym, że nie wiem jak zrobić że gdy będę miał otwartą zakładkę 1 to bedę wyszukiwał dane z zakładki 1 a jak np zakładkę 3 to wpisując będę wyszukiwał dane filtrując tylko zakładkę 3. Nie potrzebuję gotowca. Proszę tylko o wyjaśnienie mi jak to ma się odbywać :) I w jakim kierunku powinienem iść z implementacją zadania.

Można to zrobić na różne sposoby, chyba najprościej, :

<nav id="menu">
        <a href="@Url.Action("Tab1", "SomeController")">tab1</a>
        <a href="@Url.Action("Tab2", "SomeController")">tab2</a>
        <a href="@Url.Action("Tab3", "SomeController")">tab3</a>        
</nav>    
<div class="tab">
@foreach(var item in Model.Item){...}
</div>

Czyli kliknięcie w a przeładowuje całą stronę i zwraca dane tylko dla klikniętego taba. Możesz w modelu dodaktowo zwrócić informację który tab należy zaznaczyć jako kliknięty.
Jeśli każdy tab to zupełnie inne dane i powinien być inny widok wtedy robisz 3 główne widoki i jeden partial z navbarem czyli widok Tab1 powinien wyglądać tak:

@Html.Partial("tu partial z navbarem")
<div>
 //tu jakieś dane
</div>

Analogicznie pozostałe 2 widoki.

Zrobiłem tak, że do zakładki która jest aktywna dodałem klasę .active i mam teraz problem bo nie wiem jak to wykorzystać podczas wyszukiwania, żeby dla aktualnej zakładki przeszukiwało bazę. Szukałem na forum ale nic na ten temat nie znalazłem.

Pokazałem Ci wyżej. Każda zakładka ma mieć inny link, czy to inna akcja, czy tylko parametr.
Pokaż najlepiej to co wypociłeś. Widoki i kontrollery.

Dobra poradziłem sobie, mam już asynchronicznie przeładowywaną stronę. Pozostała mi jeszcze jedna zagwostka. Jak podmieniać zawartość diva.
Mam:

<div id="search_change">
        @using (Ajax.BeginForm("Sort_tab1", "KsiegarniaKsiazki",
            new AjaxOptions
            {
                UpdateTargetId = "tab1",
                HttpMethod = "GET",
                InsertionMode = InsertionMode.Replace,
                OnFailure = "brakDanych"
            }))
        {
            <div>Nazwa: </div>
            <div>@Html.TextBox("search")</div>
            <input type="submit" value="Szukaj" />
        }
    </div>

Formularz ajax w divie- i on działa asynchronicznie ale tylko dla pierwszej zakładki. Zakładki są 3 i żeby nie kombinować chciałem podmienić dla każdej tylko formularz po kliknięciu w zakładkę. Czyli klikam na "zakładka1" i ładuje mi się 1 wersja formularza, klikam "zakladka2" i ładuje się druga wersja no itd. Zrobiłem tak w javascript:

function tab1(){
        document.getElementById("search_change").innerHTML=
            '@using (Ajax.BeginForm("Sort_tab1", "KsiegarniaKsiazki",
    new AjaxOptions {   UpdateTargetId="tab1",
        HttpMethod ="GET",
        InsertionMode =InsertionMode.Replace,
        OnFailure = "brakDanych"
        }))
    {
    <div>Nazwa: </div>
    <div>@Html.TextBox("search")</div>
    <input type="submit" value="Szukaj"/>
    }'
    }

I to podmienianie mi nie działa. Gdy w miejsce;

document.getElementById("search_change").innerHTML= 

po znaku równości wstawię jakiś tekst "gfdsgd" to działa dla wszystkich przycisków. A jak zrobić z formularzem? By zamiast tekstu zamieniać formularz?

Nie rozumiem, pokaż cały plik cshtml i js albo radź sobie sam.

mój kod cshtml i javascript

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

<script type="text/javascript">
    var brakDanych = function () {
        alert('Brak elementów dla podanej frazy');
    }
    function tab1(){
        document.getElementById("search_change").innerHTML="111111111111"    
    }
    function tab2() {
        document.getElementById("search_change").innerHTML="gfger"
    }
</script>

    <div id="search_change">    <!--//w tym divie chce zmieniac całą zawartość dla kazdej zakladki -->
        @using (Ajax.BeginForm("Sort_tab1", "Ksiegarnia", //Sort_tab -> chce zmieniac ten element Sort_tab1, Sort_tab2, Sort_tab3
            new AjaxOptions
            {
                UpdateTargetId = "tab1",  //tab ->tab1, tab2, tab3
                HttpMethod = "GET",
                InsertionMode = InsertionMode.Replace,
                OnFailure = "brakDanych"
            }))
        {
            <div>Nazwa: </div>
            <div>@Html.TextBox("search")</div>
            <input type="submit" value="Szukaj" />
        }
    </div> 


<div id="display_data">
    <nav id="menu">
        <a href="#tab1" onclick="tab1()">tab1</a>
        <a href="#tab2" onClick="tab2()">tab2</a>
        <a href="#tab3" onClick="tab3()">E-tab3</a>        
    </nav>
        <!-- --------------  TAB 1  -------------- -->
    <div class="tab" id="tab1">
        @Html.Partial("Sort_tab1")
    </div>
    <!-- --------------  TAB 2  -------------- -->
    <div class="tab" id="tab2">
        @Html.Partial("Sort_tab2")
    </div>
    <!-- --------------  TAB 3  -------------- -->
    <div class="tab" id="tab3">
       @Html.Partial("Sort_tab3")
    </div>   
</div>

<!-- Chodzi mi głównie o zmiane formularzy wraz z zakladkami elementow Sort_tab1 i tab1  --> 

Czyli jak zmieniam zakładkę to chcę zmienić razem z nią formularz i gdy próbowałem tą funkcją

document.getElementById("search_change").innerHTML="gfger"

i w miejsce "gfger" wkleiłem formularz do podmiany to nie działa. Nie mam pojęcia jak je podmieniać. Jeśli chodzi o sam tekst to gdy jest funkcja postaci jak linie wyżej to działa, z kodem formularza już nie

Czemu nie umieścisz tej formy w zakładce, a nie po za nią?

function tab2() {
        document.getElementById("search") = "@Html.Partial("search2")";
    }

Tak powinienem podmieniać? Bo niestety ta kombinacja nie chce mi działać. Fajnie byłoby z zakładkami, ale jak wtedy podmieniać widoki po kliknięciu?