MVC3 .NET複数のモデルまたは単一ビューモデル
-
26-10-2019 - |
質問
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()
データがまったく関係がない場合は、タブ内のブロックが分割されます。