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（uni-form）的高度/宽度，并且可能将它的z-index抬起，因此当可见时它肯定位于表单的顶部。

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

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

你可以使用CSS来设置覆盖（加载）div的不透明度，这样他们就可以看到它背后的形式，并且它就在它的路上。当表单完成加载时，淡出重叠的div。

希望这会有所帮助。如果您试图阻止用户在所有内容加载时进行探测，我建议使用此路由。

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

1 个答案: