Creazione di passaggi della procedura guidata in MVC e Razor

Question

Vorrei creare un'applicazione MVC per creare l'account di un utente utilizzando più di una procedura guidata. Devo andare con una pagina vista e nascondere o mostrare una div per logica lato client o devo creare una vista diversa per ogni procedura guidata (usando viste parziali)?

Qual è l'opzione migliore qui? Ho bisogno di mantenere i dati di stato tra i passaggi della procedura guidata in modo che l'utente possa spostarsi indietro o avanti e sull'ultimo passo lui o lei può salvarlo nel database.

Answer 1

Ci sono diverse possibilità. È possibile utilizzare una soluzione lato client pura mostrando/nascondendo sezioni o una soluzione completa lato server. Sta a te decidere quale sia il migliore per il tuo particolare scenario. Ecco lo an example che potresti dare un'occhiata se decidi di adottare l'approccio lato server.

Answer 2

Dipende se si consente javascript o no.

Se si consente javascript, utilizzare jQuery per mostrare/nascondere i div.

Ho appena creato il seguente script guidato. Supporta più wizard sulla stessa pagina, a patto che segui la sintassi class/div riportata di seguito.

<div class="wizard"> 
    <div class="step active"> 
     some information 
    </div> 
    <div class="step" style="display:none"> 
     Step 2 info 
    </div> 
    <div class="step" style="display:none"> 
     Step 3 info 
    </div> 

    <input type="button" class="prev" style="display: none" value="Previous" /> 
    <input type="button" class="next" value="Next" /> 
</div> 



<script type="text/javascript"> 
$(function() { 
    $('.wizard .prev').click(function() { 
     var wizard = $(this).parent('.wizard'); 

     $('.step.active', wizard).hide(); 

     var currentStep = $('.step.active', wizard); 
     currentStep.hide(); 
     currentStep.removeClass('active'); 

     var newStep = currentStep.prev('.step', wizard); 
     newStep.addClass('active'); 
     newStep.show(); 

     if ($('.step:first', wizard)[0] == newStep[0]) { 
      $(this).hide(); 
     } 

     $('.next', wizard).show(); 
    }); 

    $('.wizard .next').click(function() { 
     var wizard = $(this).parent('.wizard'); 

     $('.step.active', wizard).hide(); 

     var currentStep = $('.step.active', wizard); 
     currentStep.hide(); 
     currentStep.removeClass('active'); 

     var newStep = currentStep.next('.step', wizard); 
     newStep.addClass('active'); 
     newStep.show(); 

     if ($('.step:last', wizard)[0] == newStep[0]) { 
      $(this).hide(); 
     } 

     $('.prev', wizard).show(); 
    }); 
}); 
</script> 

Senza javascript:

Creare un modello di vista, che contiene le informazioni per tutte le misure e condividerla tra tutte le viste passaggio della procedura guidata. Ciò consente di mantenere tutti gli stati tra i diversi POST.

Answer 3

Sto facendo qualcosa di simile al momento. Sto raccogliendo un grande insieme di dati in più passaggi e consentendo agli utenti di salvare i dati in qualsiasi momento.

Ho praticamente diviso in più viste e creato ViewModels per ogni vista con le informazioni rilevanti per il passaggio della procedura guidata. Sembra funzionare ragionevolmente bene per i miei scopi.