Html.ValidationSummary 和 Ajax.BeginForm 最佳实践

Question

当一些验证错误是客户端而其他是服务器端时，客户端错误进入主视图中的 @Html.ValidationSummary 占位符，而服务器端错误进入位于操作上的 @Html.ValidationSummary局部视图。

如果我没有将@Html.ValidationSummary 指定为表单操作部分视图的一部分，则根本不会显示服务器端错误。

如何将所有错误（客户端和服务器端）合并到位于 UpdateTargetId 元素之外的一个 div 中？

@using (Ajax.BeginForm("PartialViewAction", "MyController", new AjaxOptions { UpdateTargetId = "AjaxResult"}))
{
        <div class="ValidationSummary">
            @Html.ValidationSummary()
        </div>

           <div class="ChartCriteriaSideBox">      
                <div>
                    <ul class="none">
                        <li>
                            @Html.RadioButtonFor(m => m.datesRange.PeriodTypeId, (int)DatesRange.PeriodType.RecentMonth, new { @checked = "checked" }) Recent Month
                        </li>
                        <li>
                            @Html.RadioButtonFor(m => m.datesRange.PeriodTypeId, (int)DatesRange.PeriodType.RecentYear) Recent Year
                        </li>
                        <li>
                            @Html.RadioButtonFor(m => m.datesRange.PeriodTypeId, (int)DatesRange.PeriodType.BetweenDates) Range
                        </li>
                    </ul>
                </div>
    </div>
      <input type="submit" />
    }

Answer 1

这是实现预期结果的方法之一。 在您的主视图中，您应该有这样的结构：

<div id="MainValidationSummary">
  @Html.ValidationSummary()
  <div id="PartialValidationSummary"></div>
</div>

您可以根据需要使 AjaxResult 验证摘要不可见，但不要删除它！来自服务器的数据必须在那里更新。：

#ajaxresult{
  display: none;
}

并将此事件侦听器添加到您的视图中：

$('#ajaxresult').bind('DOMSubtreeModified', function () {
  $('#PartialValidationSummary').html($('#ajaxresult').html());
);

我已经更新了代码，以便实际触发事件。不幸的是，它只能在 IE8+ 中运行，并且会向控制台输出警告，建议使用仅适用于 IE11+ 的更新 API

Answer 2

@Orif Khodjaev 的回答很有帮助，但做了一点改动：

我现在使用 AjaxForm OnComplete 事件，而不是使用 DOMSubtreeModified 事件。 DOMSubtreeModified 事件已弃用。