如何替换@Html.ValidationSummary内联样式为CSS类适配CSP策略

默认ASP.NET MVC/Razor Pages中@Html.ValidationSummary(false)渲染的隐藏LI标签携带style="display:none"内联样式，会和禁止unsafe-inline的Content-Security-Policy规则冲突，可按以下步骤改造，完全保留原有验证交互逻辑：

第一步：新增对应CSS控制规则 #

先在全局样式文件中添加类选择器规则，替代内联样式的显示隐藏逻辑：

/* 验证摘要无错误时，隐藏内部所有LI，对应原内联display:none效果 */
.validation-summary-valid li {
    display: none;
}

/* 验证摘要存在错误时，正常显示LI列表 */
.validation-summary-errors li {
    display: list-item;
}

注：validation-summary-valid和validation-summary-errors是验证摘要组件自带的父容器类名，无错误时框架自动给UL加validation-summary-valid，存在验证错误时自动切换为validation-summary-errors，不需要额外修改类名绑定逻辑。

第二步：移除渲染生成的内联样式 #

根据项目场景二选一即可：

方案A：后端扩展方法替换（推荐，无客户端闪烁） #

自定义HtmlHelper扩展方法，在渲染阶段直接剔除LI上的内联样式：

using System.Web.Mvc;

public static class CspFriendlyValidationExtensions
{
    public static MvcHtmlString CspValidationSummary(this HtmlHelper html, bool excludePropertyErrors)
    {
        var rawSummary = html.ValidationSummary(excludePropertyErrors);
        if (rawSummary == null) return MvcHtmlString.Empty;
        
        // 替换掉生成的内联样式
        var sanitizedHtml = rawSummary.ToString().Replace("style=\"display:none\"", string.Empty);
        return MvcHtmlString.Create(sanitizedHtml);
    }
}

视图中把原有调用替换为扩展方法即可：

<!-- 原代码 @Html.ValidationSummary(false) -->
@Html.CspValidationSummary(false)

如果是ASP.NET Core项目，只需要把扩展方法的命名空间切换为Microsoft.AspNetCore.Mvc.Rendering，其余逻辑完全一致。

方案B：前端脚本移除（适合不方便改后端代码的场景） #

如果不想调整后端渲染逻辑，可以在页面DOM加载阶段移除内联样式，注意脚本要放在验证脚本之前加载，避免元素短暂显示的闪烁问题：

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.validation-summary-valid li[style*="display:none"]')
        .forEach(item => item.style.removeProperty('display'));
});

验证效果 #

改造完成后可满足所有要求：

• 无验证错误时，通过CSS类规则隐藏LI，和原显示效果完全一致
• 触发服务端/客户端验证时，框架自动切换父容器类名，错误项正常显示
• 渲染出的HTML无任何内联样式，完全符合CSP禁止unsafe-inline的安全要求
• 不影响原有验证组件的所有交互逻辑，不需要修改jquery.validate、jquery.validate.unobtrusive等第三方库的源码

内容的提问来源于stack exchange，提问作者Sachin