ASP.NET MVC 데이터 바인딩을 사용하여 JQuery 대화 상자를 표시하는 가장 좋은 방법 View Model

Question

사용자 목록이있는 간단한 페이지를 상상해보십시오. 사용자를 선택하면 편집 할 수있는 다양한 세부 정보가있는 JQuery 모달 대화 상자가 표시됩니다. 뭔가 같이 :

@model IEnumerable<UserRole> 


@if (Model.Any()) 
{ 
    foreach (var user in Model.Users) 
    { 
     <a href="#" id="user-details-link" onclick="userDetailsOpen(@user.id)">Details</a> 
    } 
} 

내가 게시물을 통해 더 구체적인 예를하지만 내가 찾는 것은 일반적이다거야 부분보기 바운드 모델을로드하고 표시 할 가장 방법은 무엇에 대한 의견을 '경험' JQuery 대화 상자로.

코드를 사용하는 방법을 알고 있지만 더 좋은 방법이 있어야한다고 생각합니다. 나는 그것을하는 일반적인 방법이 매우 효율적이지 않다고 믿습니다.

내 규칙과 부분보기 팝업과 연결된 모든 코드에 대해 이 부분보기에서으로 유지됩니다. 나는 내 팝업은 다음의 UserDetails 부분도 같은 것을 구성 할 싶습니다 :

@model User 
<script src="@Url.Content("~/Scripts/UserScripts.js")" type="text/javascript"></script> 

<div id="placeholder"> 

...The modal dialog content... 

</div> 

이 방법을 다른 개발자가 하나가 쉽게 모두 함께 조각 수있을 것입니다 그것을보고 오면.

지금까지 내가 거기에 대화와 같은 부분보기를 표시하는 방법은 두 가지이며, 내가 그들 모두에 문제가 알고 :

1) 사용 나는 위의 표시된 부분보기 구조를 사전 @Html.Partial("UserDetails", new User)을 사용하여 마스터 페이지에서 div 대화 상자를로드 한 다음 사용자 데이터가 채워진 상태로 대화 상자를 표시해야하는 경우 부분 뷰의 모델을 필요한 데이터로 다시 채우고 다시 렌더링하는 ActionMethod에 대한 Ajax 호출을 실행하십시오. 그것과 JQuery .html() 방법. 부분보기/대화에 데이터가로드되면

단순히 .dialog('open')

그레이트,이 작품 JQuery와 함께 표시하지만,이 논리에 몇 가지 문제가 있습니다 : 나는로드 있어요)

은 동일한 부분보기 두 번 (첫 번째 빈칸, 두 번째로로드 된 데이터)

b) 마스터 페이지가로드 될 때 화면에 자리 표시 자 DIV의 내용이 깜박입니다. DIV를 display:none으로 설정하면 .html() 메소드가 트리거되어 부분보기에 해당 display:none 태그가로드되고 팝업이 빈 창이 표시됩니다.

c)는 페이지가 요청되면 큰 경우, 대신 내가 마스터 페이지에 빈 <div id="placeholder"></div>를 배치 할 수있는 부분 뷰에있는의

2)을 보여주기 위해 페이지에 대한 약간의 시간이 소요 및 다음 아약스와 그 사업부에 부분보기의 내용을로드 또는 나는 JQuery와 함께 지금하고 있어요 같이

var url = "/MyController/MyAction/" + Id; 
$("#palceholder").load(url).dialog('open'); 

를 다시 작동하지만이 방법을 참조 몇 가지 큰 문제가있다 :

은 a) 내 "모든 것을 함께 지켜라."라는 생각을 깨뜨린다. 보고있을 때 다른 개발자 주위를 검색하지 않으면이 부분에 어떤 부분 뷰가로드 될지 전혀 알 수 없습니다.

b) 부분 뷰 팝업에 대한 모든 자바 스크립트는 부분 뷰 자체가 아닌에서 으로 참조되어야합니다.

는

c)는 페이지가 요청 될 때, 많은 경우, 그것은 결론의 질문은 당신이 어떻게 생각된다

모델 결합 된 인구 부분보기를 표시하는 가장 좋은 방법입니다 보여주기 위해 페이지에 대한 약간의 시간이 소요 코드를 체계적으로 관리하면서 모달 대화 상자로 사용할 수 있습니까?

완벽한 시나리오는 모든 부분보기 필드를 미리로드 한 다음 대화 상자에 데이터가 채워진 것으로 표시되도록 요청할 때 모델이 새 JSon 데이터 세트에 모델 미리로드 된 부분 뷰를 바인딩하고, 모든 부분 뷰 필드를로드/다시로드하지 않고 방법이 있습니까?

P. 내가 시도한 것들 중 하나는 @Html.Partial("UserDetails", new User)으로 부분 뷰 필드를 미리로드 한 다음 Div 컨텐츠를 대체하기 위해 JQuery .replaceWith() 메소드를 사용하지만 불행히도 작동시키지 못했습니다.

의견을 보내 주시면 감사하겠습니다. 나쁜 아이디어로 아이디어가 없습니다. 감사합니다. .

Answer 1

부분적으로 코드가로드되어 부분적으로 컨테이너가 작업 반환에서 업데이트되는 데 아무런 문제가 없습니다.

<div id="ParitalContainer"> 
    @Html.Partial("_PartialView", Model.PartialModel) 
</div> 

또는 JSON 데이터로 작업하는 시나리오를 고려해 볼 수 있습니다. 즉 $.ajax 또는 $.getJSON을 호출하여 모든 데이터를 비동기로로드하십시오. 귀하의 행동 결과는 JsonResult을 반환하고 원하는 요소 만 업데이트 할 수 있습니다. 더욱 강력한 솔루션을 원한다면 Knockout.js를 사용할 수 있습니다. 이것은 "모든 것을 하나로 묶어"접근 방식을 원한다면 내가 할 수있는 것입니다.