Partial View Based Web Site - Asp.Net MVC 4

Question

I'm working on a project and i have to deal with some unusual design for me. My goal is to work with 2 different simultaneous work area. Left one should change its value between 2 different partial view. The second one (mid and right area), should change its views independently from the left one.

So, at the end, i end up with 2 different divs, left and right one and Jqueryiu Tab plugin... after clicking one of the tabs i load the partial view inside it.

<div id="conteudo">
    <div class="container-abas-laterais">
        <div id="abas-laterais" style="width: 100%; height: 100%">
            <ul>
                <li><a href="@Url.Action("Pendencia", "AcessoRapido")">Pendências</a></li>
                <li><a href="@Url.Action("Requerimento", "AcessoRapido")">Requerimentos</a></li>
            </ul>
        </div>
    </div>

    <div class="container-abas">
        <div id="abas">
            <ul>
                <li><a href="#aba-1">Chamados</a></li>
                <li><a href="#aba-2">Cadastros</a></li>
                <li><a href="#aba-3">Pesquisa</a></li>
                <li><a href="@Url.Action("Index", "Configuracao")">Configuração</a></li>
            </ul>
            <div class="container-abas-conteudo">
                <div id="aba-1">
                    <p>Conteúdo da aba um.</p>
                </div>
                <div id="aba-2">
                    <p>Conteúdo da aba dois.</p>
                </div>
                <div id="aba-3">
                    <p>Conteúdo da aba três.</p>
                </div>                    
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">        
    $(function () { $("#abas").tabs(); });
    $(function () { $("#abas-laterais").tabs(); });
</script>

Well, the partial views loaded directly from the tabs clicks worked really well, just as i wanted... the problem is the ones that those initial views should also call... i need to keep all the views and functions inside those divs... it should act like an iFrame.. wah, sometimes, what i do in left one should take place in right one...

So i wanted to know some tips or ways to achieve this kind of behaviour in asp.net mvc. Please, if my idea is confuse or not well detailed, just let me know...

Thanks for the help.

Answer 1

If I am interpreting you correctly: that you want to load up the second set of tabs based on those links in the first set? If so, it would be something like this for your links:

@Ajax.ActionLink("Requerimentos", "Requerimento", "AcessoRapido", null, new AjaxOptions{ UpdateTargetId = "aba-1", OnSuccess = "changeTabs(1)" }, null)

And the action that link invokes will need to return a PartialView as your action result. Then on a successful return, you will see that it's calling a function on success where you can change the tab to the one you want.

function changeTabs(index){
    $("#abas").tabs("select", index);
}

If all the assumptions are correct, don't forget that you will need to include unobtrusive ajax in your page and also the correct key in your web.config:

  <appSettings>
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

Forgive me if I have misinterpreted your question. I hope this helps.