【问题标题】:How to extend the ValidationSummary HTML Helper in ASP.NET MVC?如何在 ASP.NET MVC 中扩展 ValidationSummary HTML Helper?
【发布时间】:2010-10-29 11:19:10
【问题描述】:

我需要将验证摘要包装在 div 中。当出现错误时,如何设置验证摘要以用 div 包装它?

<div class="validation-summary"> 
  <%= Html.ValidationSummary("Login was unsuccessful. Please correct the errors and try again.") %>
</div>

【问题讨论】:

    标签: asp.net asp.net-mvc validation


    【解决方案1】:

    我不得不在我的另一个项目中扩展验证摘要扩展,以处理页面上的多个表单。

    虽然这有所不同,但您可以创建自己的扩展方法...

    namespace System.Web.Mvc
    {
        public static class ViewExtensions
        {
            public static string MyValidationSummary(this HtmlHelper html, string validationMessage)
            {
                if (!html.ViewData.ModelState.IsValid)
                {
                    return "<div class=\"validation-summary\">" + html.ValidationSummary(validationMessage) + "</div>"
                }
    
                return "";
            }
        }
    }
    

    然后打电话

    <%= Html.MyValidationSummary(
        "Login was unsuccessful. Please correct the errors and try again.") %>
    

    HTH, 查尔斯

    【讨论】:

    • 当我尝试在我的 MVC 2 项目中使用它时,我得到一个 HtmlHelper 不包含 ValidationSummary 的定义 - 有什么想法吗?
    • 确保您有对 System.Web.Mvc.Html 的引用;
    • 您可能希望返回一个 MvcHtmlString 而不是一个字符串,以便 html 不被编码并被视为 html 代码。我正在将 MVC3 与新的 Razor 视图引擎一起使用。
    • 有没有办法让这对不显眼的 javascript 起作用?由于上面的代码都是服务器端的,所以对客户端不起作用。
    • @guanome 当然,您可以取消if (!html.ViewData.ModelState.IsValid) 检查并使用不同的技术隐藏一个空/有效的验证摘要,例如CSS。
    【解决方案2】:

    你可以这样做:

    <%if (!ViewData.ModelState.IsValid) { %>
    <div class="validation-summary"> 
        <%= Html.ValidationSummary(
            "Login was unsuccessful. Please correct the errors and try again.") %>
    </div>
    <% } %>
    

    【讨论】:

    • @çağdaş 这似乎对客户端验证消息没有任何影响。如果您使用 jQuery Validate 和 Unobtrusive javascript,它将隐藏错误消息。
    【解决方案3】:

    对于 MVC 2,ValidationSummary 是一个扩展方法,你必须添加

    using System.Web.Mvc.Html;
    

    【讨论】:

      【解决方案4】:

      例如将此 CSS 用于 li 标签...

      .validation-summary-errors ul li {color:Red;}
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2014-12-09
        • 2015-05-30
        • 2014-02-09
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多