Jquery & Ajax를 사용하여 MVC 부분 뷰 업데이트 - 올바른 접근법?

Question

MVC 5 웹 응용 프로그램이 있고 JQuery와 Ajax를 사용하여 업데이트 된보기 중 하나에 부분보기를 포함하고자합니다. 전에 약간의 JQuery, Ajax 및 Partial Views를 사용했지만 실시간 업데이트는 절대로하지 않았습니다.

나는 stackoverflow를 점검했고이 주제에 대한 많은 게시물을 찾을 수 있었지만 아직 작동하는 방식을 이해하는 데 어려움을 겪고있다. 만약 내가 올바른 길을 가고 있다면 조언을 해줄 수 있다면 아래에있는 나의 의도 된 코드를 보여 주면 좋을 것입니다.

- 사용자가 조회 한 사용자 세부 정보를 가져 오는 Controller의 Index 메소드는 사용자 데이터를 ViewModel에두고 ViewModel을 View에 전달합니다.

public ActionResult Index(int id) 
{ 
     DashboardViewModel model = new DashboardViewModel(); 

     User user = _userService.GetUserByID(Convert.ToInt32(User.Identity.GetUserId())); 
     model.SelectedUser = user; 

     return View(model); 
} 

2 -보기 뷰 모델을 수용하고, 또한 뷰 모델로부터 데이터를 받아들이는 부분보기가 포함되어 있습니다. 그러면 부분보기에 사용자 전자 메일 주소가 표시됩니다.

보기

@model STAR.UI.ViewModels.DashboardViewModel 

<div class="row"> 
    <div class="col-lg-10" id="myPartial"> 
     @Html.Partial("_UserEmailPartial", Model.SelectedUser) 
    </div> 
</div> 

부분 (_UserEmailPartial)

@model STAR.DomainClasses.User 

<h1 class="page-header text-danger">@Model.email</h1> 

3은 -보기는 사용자가 다른 사용자가 선택할 수있는 드롭 다운 목록이 포함되어 있습니다.

<select id="UserID" class="form-control"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</select> 

사용자가 드롭 다운 목록에서 항목을 선택하면 AJAX 메서드가 포함 된 JQuery 함수가 컨트롤러에서 색인 작업을 호출합니다.

$(document).ready(function() { 

$("#UserID").change(ChangeEventOfDDL); 

function ChangeEventOfDDL() { 

    $.ajax({ 
     type: "GET", 
     url: '/Dashboard/Index/', 
     data: { id: $(this).val() }, 
     error: function() { 
      alert("An error occurred."); 
     }, 
     success: function (data) { 
      $("#myPartial").html(data); 
     } 
    }); 
    } 

}); 

4는 - 색인 방법은 드롭 다운 목록에서 ID를 허용 선택한 사용자 정보를 얻을, 뷰 모델을 채우고보기에 전달합니다.

다음은 확실하지 않은 부분입니다. DIV "myPartial"에 데이터를 전달해야하지만 전체 뷰가 아닌 데이터를 전달하는 방법은 무엇입니까?

도움을 주시면 감사하겠습니다.

감사합니다.

Answer 1

그것은 부분보기 반환 컨트롤러에 다른 작업을 추가하는 가장 좋은 것입니다 :

function ChangeEventOfDDL() { 
    $.ajax({ 
     type: "GET", 
     url: '/Dashboard/UserEmail/', 
     data: { id: $(this).val() }, 
     error: function() { 
      alert("An error occurred."); 
     }, 
     success: function (data) { 
      $("#myPartial").html(data); 
     } 
    }); 
} 

:

public ActionResult UserEmail(int id) 
{ 
    User user = _userService.GetUserByID(id); 

    return PartialView("_UserEmailPartial", user); 
} 

그런 다음이 새로운 조치를 호출하는 클라이언트에서 JS 수정을