Tạo các bước Wizard trong MVC và Razor

Question

Tôi muốn xây dựng một ứng dụng MVC để tạo tài khoản của người dùng bằng nhiều bước sau đó. Tôi có cần phải đi với một trang xem và ẩn hoặc hiển thị div theo logic phía máy khách hay tôi cần tạo chế độ xem khác nhau cho từng trình hướng dẫn (sử dụng chế độ xem một phần)?

Tùy chọn tốt nhất ở đây là gì? Tôi cần phải duy trì dữ liệu trạng thái giữa các bước của trình hướng dẫn để người dùng có thể di chuyển trở lại hoặc tiếp theo và vào bước cuối cùng, người đó có thể lưu nó vào cơ sở dữ liệu.

Answer 1

Có nhiều khả năng khác nhau. Bạn có thể sử dụng một giải pháp phía khách hàng thuần túy bằng cách hiển thị/ẩn các phần hoặc một giải pháp phía máy chủ đầy đủ. Đó là vào bạn để quyết định cái nào là tốt nhất cho kịch bản cụ thể của bạn. Dưới đây là an example bạn có thể xem xét liệu bạn có quyết định đi tiếp cận phía máy chủ hay không.

Answer 2

Phụ thuộc vào việc bạn có cho phép javascript hay không.

Nếu bạn cho phép javascript, hãy sử dụng jQuery để hiển thị/ẩn các div.

Tôi vừa thực hiện tập lệnh thuật sĩ sau. Nó hỗ trợ nhiều trình thuật sĩ trên cùng một trang, miễn là bạn làm theo cú pháp lớp/div bên dưới.

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

Nếu không có javascript:

Tạo một mô hình điểm, trong đó có thông tin cho tất cả các bước và chia sẻ nó giữa tất cả các quan điểm bước wizard. Điều này cho phép bạn giữ tất cả trạng thái giữa các POST khác nhau.

Answer 3

Tôi đang làm điều gì đó tương tự tại thời điểm này. Tôi đang thu thập một lượng lớn dữ liệu qua một vài bước và cho phép người dùng lưu dữ liệu tại bất kỳ thời điểm nào.

Tôi đã chia nhỏ nó thành nhiều chế độ xem và tạo Chế độ xem cho mỗi chế độ xem với thông tin liên quan cho bước trình hướng dẫn đó. Dường như hoạt động tốt cho mục đích của tôi.