Создание шагов мастера в MVC и Razor - PullRequest
Новая
       21

Создание шагов мастера в MVC и Razor

15 голосов
/ 19 января 2012

Я хотел бы создать одно приложение MVC для создания учетной записи пользователя, используя более одного шага мастера. Нужно ли переходить с одной страницы просмотра и скрывать или отображать div по логике на стороне клиента или мне нужно создавать разные представления для каждого мастера (используя частичные представления)?

Какой самый лучший вариант здесь? Мне нужно поддерживать данные о состоянии между шагами мастера, чтобы пользователь мог перейти назад или на следующий шаг, а на последнем шаге он или она может сохранить их в базе данных.

Ответы [ 3 ]

15 голосов
/ 19 января 2012

Есть разные возможности. Вы можете использовать чисто клиентское решение, показывая / скрывая разделы или полное серверное решение. Вам решать, какой из них лучше всего подходит для вашего конкретного сценария. Вот пример , на который вы можете взглянуть, если решите использовать подход на стороне сервера.

8 голосов
/ 19 января 2012

Зависит от того, разрешаете ли вы JavaScript или нет.

Если вы разрешите JavaScript, используйте jQuery, чтобы показать / скрыть div.

Я только что сделал следующий скрипт мастера. Он поддерживает несколько мастеров на одной странице, если вы соблюдаете приведенный ниже синтаксис class / div. 

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

Без JavaScript:

Создайте модель представления, которая содержит информацию для всех шагов, и поделитесь ею со всеми видами шагов мастера. Это позволяет вам сохранять все состояния между различными сообщениями.

1 голос
/ 19 января 2012

Я делаю нечто подобное в данный момент. Я собираю большой набор данных за несколько этапов и позволяю пользователям сохранять данные в любой точке.

Я в основном разделил его на несколько представлений и создал модели представления для каждого представления с соответствующей информацией для этого шага мастера. Кажется, работает достаточно хорошо для моих целей.

...