web-dev-qa-db-ja.com

MVCとRazorでWizardステップを作成します

1つのMVCアプリケーションを作成して、複数のウィザード手順を使用してユーザーのアカウントを作成したいと思います。 1つのビューページで移動し、クライアント側のロジックによってdivを非表示または表示する必要がありますか、それとも（部分的なビューを使用して）ウィザードごとに異なるビューを作成する必要がありますか？

ここでの最良の選択肢は何ですか？ウィザードのステップ間で状態データを維持して、ユーザーが前後に移動し、最後のステップでデータベースに保存できるようにする必要があります。

asp.net-mvc-3wizard
16
Arun Rana

さまざまな可能性があります。セクションを表示/非表示にすることによって純粋なクライアント側のソリューションを使用することも、サーバー側の完全なソリューションを使用することもできます。特定のシナリオに最適なものを決定するのはあなた次第です。これが 例 です。サーバー側のアプローチを採用することにした場合は、こちらをご覧ください。

16
Darin Dimitrov

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間ですべての状態を維持できます。

8
jgauffin

現在、似たようなことをしています。いくつかのステップで大量のデータを収集し、ユーザーがいつでもデータを保存できるようにしています。

基本的には、複数のビューに分割し、各ウィザードビューに関連する情報を含むビューモデルを作成しました。私の目的にはかなりうまく機能しているようです。

1
slapthelownote