添加加载消息部分视图 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 索引向上，这样当可见时它肯定位于表单的顶部。

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

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

您可以使用 CSS 设置覆盖（加载）div 的不透明度，以便他们可以看到其后面的表单并且它正在路上。当表单加载完成后，淡出覆盖的 div。

希望这有帮助。如果您试图阻止用户在加载所有内容时四处查看，我推荐此路线。