Domanda

Voglio costruire una pagina web che ha 3 schede (e quindi 3 div): Tab 1 - Aggiorna dati personali Tab 2 - Verifica Ordine Tab 3 - Modifica dettagli di accesso

Ci sono 2 modi per implementare questa, per quanto posso dire, ma vorrei sapere le migliori pratiche.

Per prima cosa sarebbe quella di avere 3 viste parziali che implementano un modello separato ogni In secondo luogo sarebbe quello di avere 3 viste parziali che implementano una sola ViewModel

La prima opzione se si utilizza una vista parziale causerà un errore di "Aspettatevi Modello A, ma ha ottenuto Modello B" Io credo che si possa utilizzare RenderAction per aggirare il problema, ma è che le migliori pratiche?

Opinioni benvenuti.

Grazie

È stato utile?

Soluzione

Guardando i nomi delle schede, 'Aggiorna dati personali', 'Controllare Order' e 'Modifica dettagli di accesso' -. Sembra che questi sono abbastanza diverse, ma le opzioni correlate che un utente potrebbe fare

Per me, non avrebbe molto senso per dividere questi in tre diverse azioni con tre diversi punti di vista, il che significa che si esegue il rendering solo l'azione per la scheda visibile. In questo modo, se l'utente voleva solo, diciamo, aggiornare i propri dati, il server non sta facendo le query DB per controllare l'ordine

Si potrebbe utilizzare alcuni CSS per stile l'alto in modo che assomiglia a tre schede, ma ogni scheda in realtà sarebbe un link che, che ha fatto una nuova richiesta, solo facendo sembrare che ci sono stati tre schede.

per es.

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

Le azioni di Checkorder e UpdateLogonDetails renderebbe essenzialmente la stessa vista, ma una scheda diversa sarebbe mostrando.

Questo sarebbe creare l'illusione che era tutto di esecuzione utilizzando le schede, anche se non è stato.

Poi, quando si aveva che tutto in esecuzione, è in grado di aggiornare tali collegamenti utilizzando jQuery per sparare le richieste tramite la tecnologia AJAX, restituendo i risultati come vista parziale e l'aggiornamento del div contenuti del risultato. Questo significa che le persone con JavaScript abilitato ottenere la giusta esperienza 'Ajax', ma che funziona ancora OK per quelli con javascript disabilitato.

Altri suggerimenti

user1079925,

Come dici tu, ci sono una varietà di modi per farlo e sarà tutto dipenderà da come 'relativo' i dati sono. se tutto deriva dallo stesso regolatore, allora sarebbe opportuno avere un unico viewmodel per incapsulare i dati. Ecco un rapido scarabocchio di come potrebbe apparire che:

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

questo sarebbe fare riferimento nella propria vista come:

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

Ora, questo non è abbastanza (lascio che parte per voi), ma permetterebbe di popolare il 'schede' da una sola ViewModel. l'altra alternativa, come si parla, è quello di avere 3 blocchi @RenderAction() all'interno la scheda div se i dati sono totalmente estranei in qualsiasi modo.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top