在MVC和Razor中创建向导步骤

Question

我想构建一个MVC应用程序，使用多个向导步骤来创建用户帐户。我需要选择什么方式呢？是使用客户端逻辑隐藏或显示div，还是为每个向导创建不同的视图（使用部分视图）？

哪种选项最好？我需要在向导步骤之间保持状态数据，以便用户可以向后或向前移动，并在最后一步将其保存到数据库中。

- Arun Rana

Answer 1

有不同的可能性。您可以使用纯客户端解决方案通过显示/隐藏部分，或者全面的服务器端解决方案。根据您特定情况来决定哪种最适合您。如果您决定采用服务器端方法，则可以查看示例。

- Darin Dimitrov

---

Darin在回答中提供的示例链接对我设置MVC向导非常有帮助。 - REMESQ

@REMESQ - 这么长的一句话，其实就是想说“谢谢，帮了大忙”。 - Rafael Herscovici

Answer 2

这取决于您是否允许JavaScript。

如果您允许JavaScript，请使用jQuery来显示/隐藏divs。

我刚刚编写了以下向导脚本。只要按照以下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请求之间保留所有状态。

- jgauffin

---

你的代码运行良好，但如何验证每个表单？ - kirtan

Answer 3

我目前正在做类似的事情。我正在通过多个步骤收集大量数据，并允许用户在任何时候保存数据。

我基本上将其分成多个视图，并为每个视图创建了相应的ViewModel，包含该向导步骤的相关信息。对于我的目的来说，这似乎运作得相当不错。

- slapthelownote

---

你能否提供一些例子？ - Arun Rana

如果你有什么特别困难的地方，让我知道会更容易些吗？ - slapthelownote