부분보기 기반 웹 사이트 - Asp.Net MVC 4

Question

저는 프로젝트를 진행하고 있으며 저를 위해 특별한 디자인을 다루어야합니다. 내 목표는 2 개의 다른 동시 작업 영역으로 작업하는 것입니다. 왼쪽 하나는 2 개의 부분 뷰 사이에서 값을 변경해야합니다. 두 번째 (중간 및 오른쪽 영역)는 왼쪽에서 독립적으로 뷰를 변경해야합니다.

결국 결국 두 개의 다른 div, 왼쪽 및 오른쪽 탭과 Jqueryiu Tab 플러그인 중 하나를 클릭 한 후 탭 중 하나를 클릭하여 부분보기를로드합니다.

글쎄, 탭 클릭에서 직접로드 부분보기는 정말 잘 작동

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

는, 문제는 그 초기 전망도 호출해야한다는 것입니다 내가 원하는대로 ... ... 난 모두를 유지할 필요 보기 및 기능을 divs 안에 ... 그것은 iFrame처럼 행동해야합니다. 와우, 가끔은, 내가 뭘 하나 오른쪽에 자리를 차지해야합니다 ...

그래서 몇 가지 팁이나 방법을 알고 싶었어요. asp.net mvc에서 이런 종류의 동작을 달성하십시오. 제 아이디어가 혼란 스럽거나 잘 묘사되지 않으면 알려주세요.

도움을 주셔서 감사합니다.

Answer 1

정확하게 해석한다면 : 첫 번째 세트에있는 링크를 기반으로 두 번째 탭 세트를로드하겠습니까?

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

그리고 원용하는 당신의 행동 결과로 PartialView를 반환해야합니다 링크 조치 : 그렇다면, 그것은 당신의 연결이 같은 것입니다. 그런 다음 성공한 수익에 대해 성공한 경우 탭을 원하는대로 변경할 수있는 함수가 호출됨을 알 수 있습니다.

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

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

이 경우에 저를 용서 : 모든 가정이 올바른 경우

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

, 당신이 당신의 페이지에 눈에 거슬리지 아약스와 또한 당신의 Web.config에서 올바른 키를 포함해야 함을 잊지 마세요 나는 당신의 질문을 오해했습니다. 이게 도움이 되길 바란다.