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

StackOverflow https://stackoverflow.com/questions/9317487

質問

3つのタブ（したがって3つのdiv）を備えたWebページを構築したい：タブ1-個人の詳細を更新するタブ2-注文タブ3-ログオンの詳細を変更する

私が知る限りこれを実装する2つの方法がありますが、ベストプラクティスを知りたいです。

最初に、1秒ごとに個別のモデルを実装する3つの部分的なビューがあることです。単一のViewModelを実装する3つの部分的なビューを持つことです

部分的なビューを使用すると最初のオプションが「モデルAを期待するが、モデルBを取得する」というエラーを引き起こすと、レンデル作用を使用してこれを回避できると思いますが、そのベストプラクティスですか？

意見を大歓迎します。

ありがとう

役に立ちましたか？

解決

タブの名前を見る、「個人の詳細を更新する」、「注文のチェック」、「ログオンの詳細を変更する」 - これらはかなり異なるようですが、ユーザーが行うことができる関連オプションです。

私にとっては、これらを3つの異なるビューで3つの異なるアクションに分割することは理にかなっています。つまり、目に見えるタブに対してのみアクションをレンダリングします。このように、ユーザーが詳細を更新することだけを望んでいる場合、サーバーはDBクエリを実行して注文を確認していません

いくつかのCSSを使用して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>

チェックオーダーとupdateLogondeteailsのアクションは、本質的に同じビューをレンダリングしますが、別のタブが表示されます。

これにより、タブを使用してすべて実行されていたとしても、すべてが実行されていたという幻想が生まれます。

次に、すべてが実行されている場合、jQueryを使用してリンクを更新してAjaxを介してリクエストを起動し、結果を部分的なビューとして返し、結果に応じてコンテンツDIVを更新することができます。これは、JavaScriptを有効にしている人が適切な「Ajax」エクスペリエンスを取得することを意味しますが、JavaScriptが無効になっている人にとってはまだ問題ないことを意味します。

他のヒント

user1079925、

あなたが言うように、これを行うにはさまざまな方法があり、それはすべてデータの「関連」に依存します。すべて同じコントローラーに由来する場合、データをカプセル化するための単一のViewModelを持つことは理にかなっています。これがそれがどのように見えるかについての簡単な落書きです：

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>

今、これはきれいではありません（私はあなたのためにその部分を残します）が、あなたがあなたの「タブ」を単一のviewmodelから入力することを可能にするでしょう。あなたが言及しているように、他の選択肢は3を持つことです @RenderAction() データがまったく関係がない場合は、タブ内のブロックが分割されます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top