Html.ValidationSummary 和 Ajax.BeginForm 最佳实践

Question

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

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

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

@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 事件已弃用。

Html.ValidationSummary 和 Ajax.BeginForm 最佳实践

Html.ValidationSummary and Ajax.BeginForm Best Practices

asp.net-mvc

asp.net-mvc-3

asp.net-mvc-4