2

MVC3 プロジェクトで Wizard-Step を使用しています。現在は 2 つのステップですが、3 つ目のステップを追加したいと考えています。

ただし、2 番目のステップでフォームを送信したいと考えています。これは私のウィザードステップ Jquery コードがどのように見えるかです:

    $(function () {

        $(".wizard-step:first").fadeIn(); // show first step


        // attach backStep button handler
        // hide on first step
        $("#back-step").hide().click(function () {
            var $step = $(".wizard-step:visible"); // get current step
            if ($step.prev().hasClass("wizard-step")) { // is there any previous step?
                $step.hide().prev().fadeIn(4500);  // show it and hide current step

                // disable backstep button?
                if (!$step.prev().prev().hasClass("wizard-step")) {
                    $("#back-step").hide();
                }
            }
        });


        // attach nextStep button handler       
        $("#next-step").click(function () {

            var $step = $(".wizard-step:visible"); // get current step
            var validator = $("form").validate(); // obtain validator
            var anyError = false;
            $step.find("select").each(function () {
                if (!this.disabled && !validator.element(this)) { // validate every input element inside this step
                    anyError = true;
                }


            });
            $step.find("input").each(function () {
                if (!validator.element(this)) { // validate every input element inside this step
                    anyError = true;
                }


            });

            if (anyError)
                return false; // exit if any error found




            if ($step.next().hasClass("confirm")) { // is it confirmation?
                // show confirmation asynchronously
                $.post("/wizard/confirm", $("form").serialize(), function (r) {
                    // inject response in confirmation step
                    $(".wizard-step.confirm").html(r);
                });

            }

            if ($step.next().hasClass("wizard-step")) { // is there any next step?
                $step.hide().next().fadeIn(4500);  // show it and hide current step
                $("#back-step").show();   // recall to show backStep button
            }

            else { // this is last step, submit form
                 $("form").submit();
                 }

                return false;

            }


        });

    });

どんな解決策も高く評価されています。

4

1 に答える 1

1

インデクサー変数を使用し、ステップ 2 でフォームを送信し、3 番目のステップで結果を投稿します

たとえば...参照用にプロジェクトコードの一部をここに投稿しています...

    if (indexer < 2 && $step.next().hasClass("wizard-step")) {
        $step.hide().next().fadeIn();
        indexer++;
        ShowStep();
    }
    else {
        $.post(paths + "/Auction/Post", $('form').serialize(), function (data) {
            alert(data);
        })
        .complete(function () {
        });
    }
于 2012-04-05T09:56:37.283 に答える