asp mvc보기에서 선택한 partialview로드하는 방법?

Question

나는 ASP.NET MVC 프로젝트에서 일하고있다.

enter image description here

내가 레이아웃의 오른쪽 패널을 설계 : 나는 이미지와 유사한 볼 수 있습니다. 내 레이아웃 코드 : 오른쪽 패널에 포함 된에

 <div class="col-md-3 panel panel-info" style="margin-top:20px;"> 
     <div class="panel panel-primary" style="margin-top:8px;"> 
      <div class="panel-heading">Setting</div> 
      <div class="panel-body"> 

       <div class="list-group"> 

        <a href="#" class="list-group-item active text-center">Lists</a> 
        <hr /> 
        <a href="#" class="list-group-item">Add Users - Partialview 1</a> 

        <a href="~/Areas/Admin/Views/Shared/_AddUser.cshtml" class="list-group-item">Edit Users - Partialview 2</a> 

        <a href="~/Areas/Admin/Views/Shared/_UserList.cshtml" class="list-group-item">User List - Partialview 3</a> 

        <a href="#" class="list-group-item">Set Password - Partialview 4</a> 

        <a href="#" class="list-group-item">User Details - Partialview 5</a> 

        <a href="#" class="list-group-item">Send Message - Partialview 6</a> 

       </div> 
      </div> 
     </div> 
    </div> 

나는 몇 가지 모드가 있습니다 : 각 모드는 특별한 Partialview을 가지고, 편집, 목록 및 ... 를 추가합니다. 오른쪽 패널의 모든 모드를 클릭하면 왼쪽의 특수 부분 뷰로드가 필요합니다. 내가 ASP에서 mvc 동적으로 partialview로드 할 수 있습니까?

감사

Answer 1

방법 1

먼저 당신은 당신의보기

 @{Html.RenderAction("youractionname", "controllername");} 

이 같은 컨트롤러에 작업을해야 다음 컨트롤러는 같은 부분 뷰를 반환해야 이

public ActionResult youractionname() 
     { 
      return PartialView("~/Areas/Admin/Views/Shared/_AddUser.cshtml"); 
     } 

이 방법을 사용하면 부분 뷰가 뷰에로드됩니다.

브라우저를 새로 고치지 않고 partialview를로드하는 아약스를 사용할 수있는 2

방법.

먼저 부분보기를로드해야하는 일부 ID가있는 div를 추가해야합니다.

<div id="PartialId"></div> 

는 다음 (부분보기가로드 될 링크의 클릭에) 액션 링크를 추가 할 필요가

<a href="javascript:Details()">Select</a> 

귀하의 아약스 방법은 당신이 필요로하는 주

<script> 
    function Details() { 
     jQuery.ajax({ 
      url: '@Url.Action("index", "Home")', // your action method 
      method: "POST", // your method 
      cache: false, 
      data: { } 
     }).done(function (result) { 
      $('#PartialId').html(result); 
     }); 
    } 
</script> 

아래처럼 보인다 Unobtrusive-Ajax-jquery 스크립트를 프로젝트에 추가하십시오.

당신은 이것을 찾을 수 있습니다 here