'개인 세부 사항 업데이트', '주문 확인'및 '로그온 세부 사항 변경'과 같은 탭의 이름을 보면 상당히 다른 것으로 보이지만 사용자가 수행 할 수있는 관련 옵션입니다.
나를 위해 세 가지 다른보기를 사용하여 세 가지 다른 동작으로 나누어 볼 수 있습니다. 즉, 보이는 탭에 대한 동작 만 렌더링한다는 의미입니다. 이렇게하면 사용자가 세부 정보를 업데이트하기 만하면 서버가 DB 쿼리를 사용하여 주문을 확인하지 않습니다.
일부 CSS를 사용하여 세 개의 탭처럼 보이도록 스타일을 지정합니다 , 그러나 각 탭은 정말로 새로운 요청을 한 링크가 될 것입니다. 단지 세 개의 탭이있는 것처럼 보입니다.
<div id="content">
<ul>
<li class="active">Update Personal Details</li>
<li>@Html.ActionLink("Check Order","CheckOrder")</li>
<li>@Html.ActionLink("Update Logon Details","UpdateLogonDetails")</li>
</ul>
<div id="tab1" />
... Update Personal Details Tab... etc
</div>
... tab2 and tab 3 not included...
</div>
CheckOrder 및 UpdateLogonDetails에 대한 작업은 기본적으로 동일한보기를 렌더링하지만 다른 탭이 표시됩니다.
이렇게하면 탭을 사용하여 모두 실행되었다는 환상을 불러 일으킬 수 있습니다.
그런 다음 모두 실행하면 JQuery를 사용하여 해당 링크를 업데이트하여 AJAX를 통해 요청을 실행하고 결과를 부분보기로 반환하고 결과 div로 결과를 업데이트 할 수 있습니다. 즉, 자바 스크립트를 사용하는 사람들은 적절한 '아약스'경험을 얻을 수 있지만 자바 스크립트를 사용하지 않는 사용자는 여전히 정상적으로 작동합니다.
빠른 답변을 아래에 몇 가지 실마리를주고 않았다. 작은 제안, 이전 질문 중 일부로 돌아가서 일부를 답변으로 표시하십시오. 그렇지 않으면 질문에 대한 응답이 일반적으로 낮음을 알 수 있습니다.) –