2

我正在尝试在我的 asp.net mvc 4 应用程序上放置一个 jQuery 动画加载器，当用户单击提交按钮时，它会以白色的颜色覆盖整个屏幕，请稍候。这一切都有效。我遇到的问题是，当我的表单上出现验证错误时，客户端验证会启动（我想保留它）并且它被困在 jquery 加载程序屏幕后面。我这样称呼装载机：

        $(function () {
            $("#submitbtn").click(function () {
                $("#loading").fadeIn();
            });
        });

在我的$(document).ready(....功能中。我的第一个想法是使用

        @if (ViewData.ModelState.IsValid)
        {
            <text>$(function () {
                $("#submitbtn").click(function () {
                    $("#loading").fadeIn();
                });
            });</text>
        }

但是当页面加载时这是有效的，它会写出来（我应该知道我的错误）。现在我很茫然，我不知道该怎么做。任何人都可以帮忙吗？

4

1 回答 1

2

我会根据我对您问题的理解来尝试一下。所以你有了：

    $(function () {
        $("#submitbtn").click(function () {
            $("#loading").fadeIn();
            if (validFormInputs()) {                   
                yourForm.submit();
            }
            else {
                // hide the laoder again
                $("#loading").fadeOut(); // or .hide or however you want to hide it
            }
        });
    });

现在，如果提交操作发生得太快，加载器可能根本不会显示，因为提交是回发而不是 ajax 发布。如果在服务器端存在客户端验证未捕获的错误，则您可以再次返回视图，而不必在 javascript 上做一些特殊的事情。因此，您的方法可能如下所示：

[HttpPost]
public ActionResult Edit(YourModel input) {
    if (!ModelState.IsValid) {
        return View(input);
    }

    // do something here, redirect or return the view again
}

再次请注意，此代码用于回发操作，而不是用于 ajax 帖子。

更新： 所以基本上这里是步骤：

  1. 捕获提交按钮的点击事件$("#submitbtn").click(function ()...
  2. 展示你的装载机$("#loading").fadeIn();
  3. 进行客户端验证validFormInputs()

  4. 如果验证失败，则隐藏您的加载程序$("#loading").fadeOut();

    4a。假设您正在使用验证插件，或者在任何情况下，您都应该显示错误消息

  5. 如果验证成功，则提交表单yourForm.submit();

  6. 如果服务器端验证失败，则返回视图return View(input);

于 2013-03-28T03:49:22.513 回答