MVC3 .net複数モデルまたは単一のビューモデル

Question

3つのタブ（したがって3つのdiv）を持つWebページを作成したいとします。 タブ1 - 個人情報の更新 タブ2 - 確認の注文 タブ3 - ログオンの詳細の変更

これを実装する方法は2通りありますが、わかりやすくありがとうございます。

まず部分的なビューを使用すると期待」のエラーが発生します場合は、各 第二には、単一のViewModel

最初のオプションを実装する3つの部分図を持っていることであろう別のモデルを実装する3つの部分図を持っているだろうモデルAはモデルBを持っています " RenderActionを使用してこれを回避できると思いますが、そのベストプラクティスですか？

意見は歓迎します。あなたが言うように

おかげ

Answer 1

[個人情報の更新]、[注文の確認]、[ログオンの詳細の変更]タブの名前を見ると、これらはかなり異なるようですが、ユーザーが行うことができる関連オプションです。

私には、3つの異なるビューで3つの異なるアクションに分割することができます。つまり、表示可能なタブのアクションのみを表示します。このようにして、ユーザが自分の詳細を更新するだけであれば、サーバはDBクエリを実行して注文を確認していません

あなたは3つのタブしかし、各タブは実際には新しいリクエストを出したリンクになり、3つのタブがあるように見えます。

<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を結果に更新することができます。これは、Javascriptを有効にしている人が適切な 'ajax'エクスペリエンスを得ることを意味しますが、JavaScriptを無効にしている人にとっては問題なく動作します。

Answer 2

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> 

、これはかなりではありません（私はあなたのためにその部分を残しておきます）、しかしあなたは単一のビューモデルからあなたの 'タブ'を設定することができます。あなたが言及しているもう1つの方法は、データがまったく無関係な場合は、タブのdiv内に3つのブロックを含めることです。