MVC3 Modèle multiple ou une vue unique modèle

Question

Je veux construire une page Web qui a 3 onglets (et donc 3) divs: Onglet 1 - Mise à jour Détails personnels Tab 2 - Chèque bancaire Onglet 3 - Modifier les détails de connexion

Il y a 2 façons de mettre en œuvre ce pour autant que je peux dire, mais je voudrais savoir les meilleures pratiques.

Tout d'abord serait d'avoir 3 vues partielles qui mettent en œuvre un modèle distinct chaque Deuxièmement serait d'avoir 3 vues partielles qui mettent en œuvre un seul ViewModel

La première option si vous utilisez une vue partielle entraînera une erreur de « Attendez-vous à un modèle, mais a obtenu le modèle B » Je crois que vous pouvez utiliser RenderAction pour se déplacer, mais est que les meilleures pratiques?

Les opinions sont les bienvenus.

Merci

Answer 1

En regardant les noms des onglets, « Mise à jour Détails personnels », « Check Order » et « Modifier les détails de connexion » -. Il semble que ceux-ci sont assez différents, mais les options connexes qu'un utilisateur pourrait faire

Pour moi, il serait logique de diviser ces actions en trois différentes avec trois vues différentes, ce qui signifie que vous rendez seulement l'action de l'onglet visible. De cette façon, si l'utilisateur ne voulait, par exemple, mettre à jour leurs données, le serveur ne fait pas les requêtes DB pour vérifier l'ordre

Vous devez utiliser code CSS pour styler vers le haut pour qu'il ressemble à trois onglets, mais chaque onglet serait vraiment un lien qui qui a fait une nouvelle demande, juste faire ressembler, il y avait trois onglets.

par exemple.

<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>

Les actions pour checkOrder et UpdateLogonDetails viderait essentiellement la même vue, mais un autre onglet serait montrer.

Cela crée l'illusion qu'il était exécution à l'aide des onglets, même si ce n'était pas.

Alors, quand vous avez eu que tous les cours d'exécution, vous pouvez mettre à jour ces liens en utilisant JQuery pour tirer les demandes via AJAX, le retour des résultats partiels et des vues mise à jour du contenu div avec le résultat. Cela signifie que les personnes avec JavaScript activé obtenir l'expérience « ajax » bonne, mais il fonctionne toujours OK pour les personnes handicapées javascript.

Answer 2

user1079925,

Comme vous le dites, il y a une variété de façons de le faire et tout dépendra de la façon dont « liées » les données. si tout dérive du même contrôleur, il serait logique d'avoir un seul viewmodel pour encapsuler les données. Voici un rapide gribouillis à comment cela pourrait ressembler:

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; }
}

ce serait référencé dans votre point de vue:

@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>

, ce n'est pas assez (je vais laisser cette partie pour vous), mais vous permettra de renseigner vos onglets « » d'un seul viewmodel. l'autre alternative, comme vous le mentionnez, est d'avoir 3 blocs de @RenderAction() à l'intérieur de l'onglet divs si les données sont totalement sans rapport avec en aucune façon.