0

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

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

最初は、それぞれ別のモデルを実装する 3 つの部分ビューを持つことです。2 番目は、単一の ViewModel を実装する 3 つの部分ビューを持つことです。

部分ビューを使用すると、「モデル A を期待しているがモデル B を取得しました」というエラーが発生する場合の最初のオプションでは、RenderAction を使用してこれを回避できると思いますが、それはベスト プラクティスですか?

意見を歓迎します。

ありがとう

4

2 に答える 2

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>

さて、これはきれいではありませんが（その部分はあなたに任せます）、単一のビューモデルから「タブ」にデータを入力することができます。もう1つの方法は、@RenderAction()おっしゃるように、データがまったく関係がない場合は、タブdiv内に3つのブロックを配置することです。

于 2012-02-16T19:46:41.530 に答える
0

「個人情報の更新」、「注文の確認」、「ログオン情報の変更」というタブの名前を見ると、これらはかなり異なっているように見えますが、ユーザーが実行できる関連オプションです。

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

3 つのタブのように見えるように CSS を使用してスタイルを設定しますが、実際には各タブは新しいリクエストを実行するリンクになり、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 が無効になっている人でも問題なく動作することを意味します。

于 2012-02-17T04:01:06.980 に答える