Frage

Ich möchte eine Webseite erstellen, die 3 Registerkarten (und damit 3 Divs) hat: Registerkarte 1 - Registerkarte "persönliche Details aktualisieren

Es gibt zwei Möglichkeiten, dies zu implementieren, soweit ich das beurteilen kann, aber gerne die besten Praxis kennen.

Erstens wäre es, 3 Teilansichten zu haben, die jeweils ein separates Modell implementieren, um 3 Teilansichten zu haben, die ein einzelnes ViewModel implementieren

Die erste Option, wenn die Verwendung teilweise Ansichten zu einem Fehler von "Erwartungsmodell A ist, aber Modell B" verursacht, können Sie Renderaction verwenden, um dies zu umgehen, aber ist diese Best Practice?

Meinungen willkommen.

Vielen Dank

War es hilfreich?

Lösung

Betrachten Sie die Namen der Registerkarten, "persönliche Details aktualisieren", "Reihenfolge" und "Anmeldedetails ändern" - es scheint, dass diese ziemlich unterschiedlich sind, aber verwandte Optionen, die ein Benutzer tun könnten.

Für mich wäre es sinnvoll, diese in drei verschiedene Aktionen mit drei verschiedenen Ansichten aufzuteilen, was bedeutet, dass Sie nur die Aktion für die sichtbare Registerkarte erfüllen. Wenn der Benutzer nur seine Details aktualisieren wollte, macht der Server die DB -Abfragen nicht auf, um die Reihenfolge zu überprüfen

Sie würden einige CSS verwenden, um es so zu stylen, dass es wie drei Registerkarten aussieht, aber jede Registerkarte wäre wirklich ein Link, der eine neue Anfrage beantragte, so dass es so aussieht, als gäbe es drei Registerkarten.

z.B

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

Die Aktionen für Checkorder und Updatelogondetails würden im Wesentlichen dieselbe Ansicht machen, aber eine andere Registerkarte würde angezeigt.

Dies würde die Illusion erzeugen, dass alles mit Registerkarten ausgeführt wurde, obwohl dies nicht der Fall war.

Wenn Sie dann alles ausgeführt haben, können Sie diese Links über JQuery aktualisieren, um die Anfragen über AJAX zu entlassen, die Ergebnisse als teilweise Ansichten zurückzugeben und die Inhaltsdiv mit dem Ergebnis zu aktualisieren. Dies bedeutet, dass Menschen mit JavaScript -Aktivitäten die richtige "Ajax" -Erfahrung erhalten, aber dass es immer noch für diejenigen mit deaktiviertem JavaScript in Ordnung ist.

Andere Tipps

User1079925,

Wie Sie sagen, gibt es eine Vielzahl von Möglichkeiten, dies zu tun, und alles hängt davon ab, wie "verwandt" die Daten sind. Wenn alles von demselben Controller abgeleitet ist, wäre es sinnvoll, ein einzelnes ViewModel zu haben, um die Daten zu verkapulieren. Hier ist ein kurzes Schreiben, wie das aussehen könnte:

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

Dies würde in Ihrer Ansicht verwiesen als:

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

Das ist nicht schön (ich werde diesen Teil für Sie verlassen), aber Sie würden Ihnen erlauben, Ihre "Registerkarten" von einem einzigen ViewModel zu füllen. Die andere Alternative ist, wie Sie erwähnt, 3 zu haben @RenderAction() Blöcke in den Registerkarten Divs, wenn die Daten in irgendeiner Weise völlig miteinander zu tun haben.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top