Question

我正在创建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/

Answer 1

您使用的是传统表单（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>
...
<% } %>

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

如果您使用的是传统表单，则可以将常规的show-overlay代码应用于页面上的所有表单（如下所示），或者为表单指定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>

请参阅more info from Scott Guthrie，他演示取消表单提交并自行提交。他这样做是为了处理来自部分视图的动态数据。

Answer 2

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

asp.net mvc客户端验证状态：需要附加/分离覆盖

2 个答案: