添加加载消息部分视图jQuery MVC3

Question

我有一个非常简单的注册向导表格。这是一个用VB编写的MVC3\Razor项目。

我的最后一步显示了包含用户输入详细信息的部分视图。由于部分加载可能需要几秒钟的时间，因此在加载之前表单看起来很奇怪 - 带有几个按钮的空白表单。

是否有一种干净、正确的方法可以在部分加载时显示一些加载图像/消息，以便用户明白他/她需要稍等片刻？

我的注册视图代码：

    $(function () {

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

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

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


    // attach next button handler       
    $("#register-nextstep").click(function () {

        var $step = $(".wizardstep:visible"); // get current step

        var validator = $("form").validate(); // obtain validator
        var anyError = false;
        $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 the confirmation div?
            // post to the controller and show confirmation partial view asynchronously
            $.post("ConfirmRegister", $("form").serialize(), function (r) {
                // inject response in confirmation step
                $(".wizardstep.confirm").html(r);
            });

        }

        if ($step.next().hasClass("wizardstep")) { // is there a next step?
            $step.hide().next().fadeIn();  // show it and hide the current step
            $("#register-backstep").show();   // recall to show back button
        }

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


    });

});

<div class="uni-form">
    <fieldset>
        <div class="wizardstep">
            <h2>Step 1: Your Username</h2>
            <p class="wizardnote">Please choose a username you will use to login to >your account.</p>                
        </div>
        <div class="wizardstep">
            <h2>Step 2: Your Email Address</h2>
            <p class="wizardnote"></p>                
        </div>
        <div class="wizardstep">
            <h2>Step 3: Choose a Password</h2>
            <p class="wizardnote"></p>                
        </div>
        <div class="wizardstep confirm"></div>
        <div class="buttoncontainer">
            <input type="button" value="&larr;Back" id="register-backstep" />
            <input type="button" value="Next Step" id="register-nextstep" />
        </div>
    </fieldset>
</div>

目前的局部视图只是模型元素的虚拟显示。

Answer 1

使用一个固定位置的 div，它是包含 div 的高度/宽度（统一格式），并且可能将它的 z-index 向上提升，因此它在可见时绝对位于表单顶部。

var h= $(.uni-form).height();
var w= $(.uni-form).width();

将加载图标放置在适当的位置。

您可以使用 CSS 设置覆盖（加载）div 的不透明度，这样他们就可以看到它后面的表单并且它正在运行。表单加载完成后，将覆盖的 div 淡出。

希望这会有所帮助。如果您想防止用户在加载所有内容时四处闲逛，我推荐这条路线。