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的回答非常有帮助，但稍作改动：

而不是使用DOMSubtreeModified事件我现在使用AjaxForm OnComplete事件。不推荐使用DOMSubtreeModified事件。

Html.ValidationSummary和Ajax.BeginForm最佳实践

2 个答案: