ASP.NET MVC 2 验证错误样式

Question

我在进行 ASP.NET MVC 2 表单验证和设置样式时遇到问题。

这是我的表单示例，有一个验证错误：

该字段使用以下html：

<div class="registration-field">
     <label>FullName</label><%= Html.TextBoxFor(x => x.FullName) %>
     <%= Html.ValidationMessageFor(x => x.FullName)%>
</div>    

问题是，为了在整个元素中显示高亮，我需要将 CSS 类“registration-field-error”添加到第一个 div。

<div class="registration-field registration-field-error">
     <label>FullName</label><%= Html.TextBoxFor(x => x.FullName) %>
     <%= Html.ValidationMessageFor(x => x.FullName)%>
</div>    

registration-field-error 的 CSS 是：

.registration-field-error
{
    background-image:url(../Content/Images/box-background-error.png);
    background-repeat:repeat-y; 
}

我可以做一些复杂的逻辑来检查 ViewState 是否有错误，这对于服务器验证错误很好，但不适用于客户端验证：

<% if (ViewData.ModelState["FullName"] == null) { %>
     <div class="registration-field">
<% }  else { %>
     <div class="registration-field registration-field-error">
<% } %>

我的第一个想法是创建一个新的 Html 助手来决定它是否应该使用registration-field-error 类：

<%= Html.FormFieldFor(x => x.FullName, ViewData.ModelState) %> 

然后编辑 MicrosoftMvc.Ajax.js 脚本以在检测到客户端验证错误时添加该类。

或者，有没有更好的方法来实现这一点？

Answer 1

首先在没有任何条件逻辑的情况下包装您的 div 元素，但将您的验证消息包装在具有类名“error”的 span 中，如下所示：

<div class="registration-field">      
  <label>FullName</label><%= Html.TextBoxFor(x => x.FullName) %>      
    <span class="error"><%= Html.ValidationMessageFor(x => x.FullName)%></span>
</div> 

然后使用下面给出的函数来动态添加错误类：

$(function(){
 $("div span.error").each(function(){
  var className = $(this).parent().attr("class") + "-error";
  if($(this).html().length > 1)
   $(this).parent().addClass(className);
 });
});

这将更改您的代码的更少部分。