복잡한 유형을 부트 스트랩 모달로 전달

Question

프로젝트는 ASP MVC 6 응용 프로그램입니다. 부트 스트랩 모달 대화 상자에 클래스 객체를 전달하려고합니다. JQuery 스크립트를 사용하여 데이터를 모달 대화 상자로 전달하는 방법을 설명하는 기사를 읽었습니다. 예제에서는 int 또는 string 값과 같은 간단한 데이터 유형을 전달하는 것을 다루지 만 복잡한 유형의 데이터 유형은 얻을 수 없습니다.

해결 방법 나는 클래스 개체를 json 문자열에 직렬화하여 성공적으로 모달 대화 상자 (코드 조각 제공)로 전달할 수있었습니다. 그러나 ViewModel 객체에 json을 직렬화 해제하고 모달 대화 상자의 객체 값을 사용하여 컨트롤을 추가로 업데이트합니다. 누군가가 문제를 해결하기위한 방향을 제시 할 수 있습니까?

HTML (ASP 면도기보기)

<button role="button" data-toggle="modal" data-target="#updateModal" data-dataid=@JsonHelper.SerializeObject(@item) /> 

JQuery와 스크립트

$("#updateModal").on('show.bs.modal', function (e) { 
    var dataid = e.relatedTarget.dataset.dataid; 

    //populate the textbox - to test data is passed properly 
    $(e.currentTarget).find('textarea[name="dataidval"]').val(dataid); 
}); 

나는 내가 원하는 것을 달성 옳은 길을 있습니까? 더 나은 대안 솔루션?

Answer 1

나는 한 번 시도해보고 내가 원하는 것을 얻을 수있었습니다. 나는 아직도 더 나은 해결책을 찾으려고 열심이다. 나는 나를 위해 일한 것을 설명하려고 노력했다.

저에게 적합한 솔루션은 json 개체 (복합 형식)를 deserialize하고 모달 쇼 콜백 이벤트에서 컨트롤에 값을 개별적으로 할당하는 것입니다. 컨트롤의 이름 특성은 양식 제출시 값을 가져 오기 위해 ViewModel 형식과 일치해야합니다. 복잡한 유형을 Action 메소드에 전달하지 않으려면 값을 컨트롤의 이름 - 값 쌍으로 별도로 제출할 수 있습니다.

JQuery와 스크립트

$("#updateModal").on('show.bs.modal', function (e) { 

    var dataid = e.relatedTarget.dataset.dataid; 

    //deserialize json 
    var dataObject = JSON.parse(dataid); 

    //populate the controls with values   
    $(e.currentTarget).find('input[name="ViewModel.ID"]').val(dataObject.ID); 
    $(e.currentTarget).find('input[name="ViewModel.Name"]').val(dataObject.Name); 
    $(e.currentTarget).find('input[name="ViewModel.PropertyA"]').val(dataObject.PropertyA); 
    $(e.currentTarget).find('input[name="ViewModel.PropertyB"]').val(dataObject.PropertyB); 
}); 

HTML (부트 스트랩 모달)

<!-- minimal code for the sake of clarity --> 
@model ViewModel 

<form asp-controller="XYZController" asp-action="@nameof(XYZController.Update)" asp-route-returnurl="@ViewData["ReturnUrl"]" 
    method="post" class="form-horizontal" role="form"> 

    <div class="form-group"> 

     <input asp-for="@Model.ID" name="ViewModel.ID" class="hidden" /> 
     <!-- asp-for attributes may not have any effect in this case--> 
     <input class="form-control" asp-for="@Model.Name" name="ViewModel.Name" /> 
     <input class="form-control" asp-for="@Model.PropertyA" name="ViewModel.PropertyA" /> 
     <input class="form-control" asp-for="@Model.PropertyB" name="ViewModel.PropertyB" /> 

    </div> 
</form> 

ASP MVC 컨트롤러

[HttpPost] 
    public IActionResult Update(ViewModel viewModel) 
    { 
     return View(); 
    }