Question

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

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

Answer 1

有不同的可能性。您可以通过显示/隐藏部分或完整的服务器端解决方案来使用纯客户端解决方案。由您决定哪一个最适合您的特定场景。如果您决定采用服务器端方法，可以查看an example。{/ p>

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之间保持所有状态。

Answer 3

我现在正在做类似的事情。我正在通过几个步骤收集大量数据，并允许用户随时保存数据。

我基本上将它拆分为多个视图，并为每个视图创建了ViewModel，其中包含该向导步骤的相关信息。对我来说似乎工作得相当好。

在MVC和Razor中创建向导步骤

3 个答案: