메뉴 옵션의 왼쪽 및 오른쪽 내용 변경 메뉴 수정 MVC

Question

사용자가 응용 프로그램에 로그인하고 메뉴 중 하나를 클릭 할 때 왼쪽 메뉴에서 처음으로로드되는 MVC 응용 프로그램을 만듭니다. 옵션 만 오른쪽 내용이 표시됩니다 (작업 방법 호출).

부분 뷰를 사용하여이를 달성했습니다. Partial Views에서 전체 응용 프로그램을 만드는 것이 좋습니까? 아니면이를 수행 할 다른 방법이 있습니까?

Answer 1

링크가 클릭 된 페이지를 비동기식으로로드하려는 것처럼 보입니다. jQuery ajax 메소드를 사용하여이를 수행 할 수있다.

먼저 링크를 css 클래스 이름으로 표시하여이를 jQuery 선택기로 사용하여 기본로드 동작을 연결합니다. 또한 ajax 호출 결과를로드 할 컨텐츠 페이지가 있어야합니다.

<div> 
    <div id="leftPane"> 
    <a href="@Url.Action("About","Home")" class="alink">About</a> 
    <a href="@Url.Action("Contact","Home")" class="alink">Contact</a> 
    <a href="@Url.Action("Index","Home")" class="alink">Index</a> 
    <div> 
    <div id="rightPane"> 
    </div> 
</div> 

이제 당신이 그 동작 방법의 내용을 얻기 위해 jQuery를로드 방법을 사용, 그 링크를 클릭 이벤트를 수신하고 적절한 CSS와 rightPane이의 innerHTML을

$(function(){ 

    $("a.alink").click(function(e){ 
    e.preventDefault(); 
    $("#rightPane").load($(this).attr("href")); 
    }); 

}); 

를 업데이트 할 수 있습니다, 당신은 유지할 수 있습니다 leftPane는 컨테이너의 왼쪽으로, rightPane는 컨테이너의 우측으로 이동합니다.