0

我正在创建使用数据注释生成客户端验证数据的 ASP.NET MVC 2 应用程序

我有以下 JQuery 可以在表单上单击按钮时添加覆盖 

    $(":button").click(function () {
     var overlay = jQuery('<div id="overlay"><img src="/content/images/indicator2.gif" alt="Processing Request Please Wait"/> </div>');
    overlay.appendTo(document.body);
    });

这在大多数情况下都有效，但我注意到很多次当客户端验证失败时，覆盖仍然存在。

我希望仅在没有客户端验证错误的情况下附加覆盖。如何获取客户端验证的状态。

就像是

if( client_error==null)
{
attach overlay

}

另外，如果这不是获得叠加层的正确方法，请告诉我。

找到另一个问题但没有答案 https://stackoverflow.com/questions/4848539/block-ui-and-client-side-validations

谢谢，

三月

**编辑 **

nekno 的解决方案是目前最合适的。

我找到了另一个链接，可以为其他寻找相同事物的人提供更深入的了解

http://www.phpvs.net/2010/04/26/manually-validate-an-asp-net-mvc-form-on-the-client-side-with-microsoftmvcvalidation-js-and-jquery/

4

2 回答 2

0

您使用的是传统形式 ( Html.BeginForm()) 还是 AJAX 形式 ( Ajax.BeginForm())？

如果您使用的是 AJAX 表单，那么您可以通过将覆盖 div 放在表单上style="display:none;"并将AjaxOptions对象传递给表单来处理这种情况，然后 MVC AJAX 库将仅在表单通过验证时自动显示/隐藏它并且提交。

<% Html.EnableClientValidation(); %>
<% using(Ajax.BeginForm(new AjaxOptions() { LoadingElementId = "overlay" }) { %>
<div id="overlay" style="display:none;">
    <img src="/content/images/indicator2.gif" alt="Processing Request Please Wait"/>
</div>
...
<% } %>

您可以查看 Brad Wilson在 ASP.NET MVC 3 中的 Unobtrusive Ajax上的帖子，其中还讨论了在不引人注目的 AJAX 之前的 MVC 2 行为。

如果您使用的是传统表单，那么您可以将通用显示叠加代码应用于页面上的所有表单（如下所示），或者为您的表单提供一个 id，以便您可以为每个表单显示不同的叠加。您调用客户端验证方法，该方法返回错误数组。如果没有错误，则验证成功并继续提交。这确实有调用验证代码两次的副作用，因为 MVC 验证框架会钩住表单提交事件并自动再次调用 validate()。但是，它发生两次的事实是难以察觉的，实际上，通过动态验证，只要您输入一个值并移开焦点就验证一个字段，验证代码无论如何已经在您的页面上运行了多次。它并不总是连续两次立即发生。

将此脚本放在底部的视图中，在所有表单标签下方：

<script type="text/javascript">
    $("form").submit(function (e) {
        var errors = Sys.Mvc.FormContext.getValidationForForm(this).validate('submit');
        if (errors.length == 0) {
            $("#overlay").show();
            // Or use jQuery BlockUI
            $.blockUI({ message: $("#overlay") });
        }
    });
</script>

查看来自 Scott Guthrie 的更多信息，他在其中演示了取消表单提交并自己提交。他这样做是为了处理来自局部视图的动态数据。

于 2011-08-20T05:08:44.313 回答
0

如果您的情况允许，请下载jQuery Block UI插件。会做你想做的（显示该消息）。它非常简单，我一直在使用它。

于 2011-08-20T20:11:47.473 回答