jquery - 在 Javascript 中访问 ModelState

Question

我正在尝试在我的 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>
        }

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

Answer 1

我会根据我对你问题的理解来尝试解决这个问题。所以你有:

    $(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 发布。如果在服务器端存在客户端验证 Uncaught Error ，那么您只需再次返回 View 即可，而无需对 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. 如果服务器端验证失败，则返回 View return View(input);