在 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 之间的所有状态。

Answer 3

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

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