在MVC和Razor中创建向导步骤

Question

我想构建一个MVC应用程序,使用多个向导步骤创建用户的帐户.我是否需要使用一个视图页面并通过客户端逻辑隐藏或显示div,或者我是否需要为每个向导创建不同的视图(使用部分视图)？

这里最好的选择是什么？我需要在向导步骤之间维护状态数据,以便用户可以向后或向下移动,在最后一步,他或她可以将其保存到数据库.

Answer 1

有不同的可能性.您可以通过显示/隐藏部分或完整的服务器端解决方案来使用纯客户端解决方案.由您决定哪一个最适合您的特定场景.这是一个例子,如果你决定采用服务器端方法,你可以看看.

Answer 2

取决于你是否允许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:

创建一个视图模型,其中包含所有步骤的信息,并在所有向导步骤视图之间共享.这允许您在不同的POST之间保持所有状态.