2012-02-16 3 views
0

3 개의 탭 (따라서 3 개의 div)이있는 웹 페이지를 만들고 싶습니다. 탭 1 - 개인 세부 정보 업데이트 탭 2 - 주문 확인 탭 3 - 로그온 세부 정보 변경MVC3 .net 여러 모델 또는 단일보기 모델

내가 말할 수있는 한이를 구현하는 방법은 두 가지가 있지만 모범 사례를 알고 싶습니다.

이 부분 뷰를 사용하여의 오류가 발생합니다 경우 각 두 번째는 하나의 뷰 모델을

첫 번째 옵션을 구현하는 3 개 부분보기를하는 것 먼저 별도의 모델을 구현하는 3 개 부분보기를하는 것 "기대

모델 A는 있지만 모델 B가 있습니다. " RenderAction을 사용하여이 문제를 해결할 수 있다고 생각하지만 최선의 방법입니까?

의견 환영합니다. 당신이 말하는 것처럼

감사

+0

빠른 답변을 아래에 몇 가지 실마리를주고 않았다. 작은 제안, 이전 질문 중 일부로 돌아가서 일부를 답변으로 표시하십시오. 그렇지 않으면 질문에 대한 응답이 일반적으로 낮음을 알 수 있습니다.) –

답변

0

'개인 세부 사항 업데이트', '주문 확인'및 '로그온 세부 사항 변경'과 같은 탭의 이름을 보면 상당히 다른 것으로 보이지만 사용자가 수행 할 수있는 관련 옵션입니다.

나를 위해 세 가지 다른보기를 사용하여 세 가지 다른 동작으로 나누어 볼 수 있습니다. 즉, 보이는 탭에 대한 동작 만 렌더링한다는 의미입니다. 이렇게하면 사용자가 세부 정보를 업데이트하기 만하면 서버가 DB 쿼리를 사용하여 주문을 확인하지 않습니다.

일부 CSS를 사용하여 세 개의 탭처럼 보이도록 스타일을 지정합니다 , 그러나 각 탭은 정말로 새로운 요청을 한 링크가 될 것입니다. 단지 세 개의 탭이있는 것처럼 보입니다.

<div id="content"> 
    <ul> 
     <li class="active">Update Personal Details</li> 
     <li>@Html.ActionLink("Check Order","CheckOrder")</li> 
     <li>@Html.ActionLink("Update Logon Details","UpdateLogonDetails")</li> 
    </ul> 
    <div id="tab1" /> 
    ... Update Personal Details Tab... etc 
    </div> 
    ... tab2 and tab 3 not included... 
</div> 

CheckOrder 및 UpdateLogonDetails에 대한 작업은 기본적으로 동일한보기를 렌더링하지만 다른 탭이 표시됩니다.

이렇게하면 탭을 사용하여 모두 실행되었다는 환상을 불러 일으킬 수 있습니다.

그런 다음 모두 실행하면 JQuery를 사용하여 해당 링크를 업데이트하여 AJAX를 통해 요청을 실행하고 결과를 부분보기로 반환하고 결과 div로 결과를 업데이트 할 수 있습니다. 즉, 자바 스크립트를 사용하는 사람들은 적절한 '아약스'경험을 얻을 수 있지만 자바 스크립트를 사용하지 않는 사용자는 여전히 정상적으로 작동합니다.

0

user1079925,

는이 작업을 수행하는 다양한 방법이 있습니다 그것은 모두 '관련'데이터가 얼마나에 따라 달라집니다. 모든 컨트롤러가 동일한 컨트롤러에서 파생되는 경우 데이터를 캡슐화하는 단일 뷰 모델을 갖는 것이 좋습니다. 여기에 빠른 낙서가이 보일 수 있습니다 방법으로의이 같이보기에 참조 할 것

public class SubViewModelA 
{ 
    public string SpecialProperty { get; set; } 
} 

public class SubViewModelB 
{ 
    public string SpecialProperty { get; set; } 
} 

public class SubViewModelC 
{ 
    public string SpecialProperty { get; set; } 
} 

public class TabbedViewModel 
{ 
    public SubViewModelA TabA {get; set; } 
    public SubViewModelB TabB {get; set; } 
    public SubViewModelC TabC {get; set; } 
} 

: 지금

@model TabbedViewModel 

<div id="taba">@Html.EditorFor(model => model.TabA.SpecialProperty)</div> 
<div id="tabb">@Html.EditorFor(model => model.TabB.SpecialProperty)</div> 
<div id="tabc">@Html.EditorFor(model => model.TabC.SpecialProperty)</div> 

이 꽤되지 않습니다 (내가 당신을 위해 그 부분을 떠날거야)하지만 단일보기 모델에서 '탭'을 채울 수 있습니다. 당신이 언급 한 다른 대안은 어떤 방식 으로든 데이터가 전혀 관련이없는 경우 탭 div 안에 3 개의 블록을 포함하는 것입니다.

+0

감사합니다. 마스터 뷰가있는 마지막 한 가지는 3 개의 부분 뷰가이 렌더링에로드되었다고 생각합니다. 사용자가 활성화되지 않은 탭을 누를 때까지 부분 뷰로드를 지연시키는 방법이 있습니까? Ajax.actionLink를 사용할 수 있다는 것을 알고 있지만, initil 페이지로드는 어떨까요? – user1079925