Html.ActionLink를 클릭하면 부분 뷰를로드하는 방법?

Question

Html.ActionLink을 클릭하면 동일한 페이지에서 PartialView을로드하는 방법에 대해 알려주십시오. 나는 나의 요구 사항을 아래에 열거했다.

1. 내가 Employee 테이블에서 직원을 나열합니다 색인 페이지가, 또한 테이블의 각 행은 편집 &가 업데이트/직원 정보를 삭제하는 링크 (Html.ActionLink) 삭제해야합니다.
2. 또한 인덱스 페이지에는 새 직원을 만들거나 기존 직원을 편집하기위한 텍스트 상자가있는 부분보기가 있습니다.
3. 사용자가 테이블에서 링크 편집을 선택하면 직원 세부 정보를 업데이트하기 위해 부분보기의 텍스트 상자에 적절한 사용자 세부 정보를로드해야합니다.
4. 또한 부분 뷰에 입력 된 새로운 직원 세부 사항은 DB 테이블에 저장되어야하며 동시에 인덱스 페이지의 테이블에 추가되어야합니다.

위의 모든 단계는 MVC5에서 Ajax를 사용하지 않고 처리해야합니다. 누구든지 위의 단계를 달성하기 위해 나를 도울 수 있습니까? 당신의 도움을 많이받습니다.

Answer 1

부분 뷰를로드하는 유일한 방법은 렌더링 된 부분 뷰를 JQuery/Javascript에 반환하고 그에 따라 DOM을 업데이트하는 Ajax 호출을 사용하는 것입니다. 예를 들어

:

귀하의 HTML

<a href="#" id="loadViewButton">Load view</a> 
<div id="partialViewContainer"><!-- your partial view will be loaded in here --></div> 

귀하의 JQuery와 :

$('#loadViewButton').on('click', function() { 
    $.ajax({ 
     type: "GET" 
     url: '/YourController/YourAction', 
     success: function (data, textStatus, jqXHR) { 
      $('#partialViewContainer').html(data); 
     } 
    }); 
}); 

컨트롤러의 액션은 다음과 같다 :

,

[HttpGet] 
public ActionResult YourAction() 
{ 
    return View("YourView"); 
} 

Answer 2

ActionLink를 사용하면이 기능이 실제로 잘 돌아갑니다.

HTML

@Html.ActionLink("Load Partial Action Link", null, null, null, new { id = "loadPartialActionLink" }) 
<div id="AJAXContainer"></div> 

jQuery를

$('#loadPartialActionLink').on('click', function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: "GET", 
     url: '/MyController/_MyPartial', 
     success: function (data, textStatus, jqXHR) { 
      $('#AJAXContainer').html(data); 
     } 
    }); 
}); 

컨트롤러 액션

[HttpGet] 
public ActionResult _MyPartial() 
{ 
    return PartialView("_MyPartial"); 
}