asp.net-mvc - Html.ValidationSummary 和 Ajax.BeginForm 最佳实践

Question

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

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

如何将所有错误(客户端和服务器端)合并到位于 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;
}

并将此事件监听器添加到您的 View 中:

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

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