为什么某些字段在具有模型错误时不会显示红色边框

Question

我正在开发一个asp.net mvc 5 Web应用程序。我在编辑/创建视图中有以下内容，以显示名为ILIOP和＆amp;的两个字段。 Comment：

<div>
    <span class="f">  @Html.DisplayNameFor(model=>model.Server.ILOIP)</span>
    @Html.EditorFor(model =>model.Server.ILOIP)
    @Html.ValidationMessageFor(model =>model.Server.ILOIP)
</div>

<div>
    <span class="f">@Html.DisplayNameFor(model=>model.Server.Comment)</span>
    @Html.TextAreaFor(model=>model.Server.Comment,new { @class = "textArea"})

    @Html.ValidationMessageFor(model =>model.Server.Comment)
</div>

现在在我的Post Edit操作方法上，我正在检查并发冲突错误并在相关字段旁边显示错误消息：

if (databaseValues.ILOIP != clientValues.ILOIP)
    ModelState.AddModelError("Server.ILOIP", "Current value: " + databaseValues.ILOIP);

 if (databaseValues.Comment != clientValues.Comment)
     ModelState.AddModelError("Server.Comment", " Current Value: " + databaseValues.Comment);

现在如果这两个字段（ILIOP＆amp; Comment）有错误，那么注释字段会在它周围出现红色边框，而ILIOP则不会如下： -

现在这里是首次为2个字段呈现视图时的标记（没有错误）：

<input class="text-box single-line" data-val="true" 
       data-val-length="The field ILOIP must be a string with a maximum length of 20." 
       data-val-length-max="20" id="Server_ILOIP" name="Server.ILOIP" 
       type="text" value="4" />
<span class="field-validation-valid" data-valmsg-for="Server.ILOIP" data-valmsg-replace="true"></span>

<textarea class="textArea" cols="20" data-val="true" 
          data-val-length="The field Comment must be a string with a maximum length of 256." 
          data-val-length-max="256" id="Server_Comment" 
          name="Server.Comment" rows="2">
</textarea>

以下是两个字段显示错误时的标记： -

 <input class="input-validation-error text-box single-line" data-val="true" 
        data-val-length="The field ILOIP must be a string with a maximum length of 20." 
        data-val-length-max="20" id="Server_ILOIP" name="Server.ILOIP" 
        type="text" value="4" />
<span class="field-validation-error" data-valmsg-for="Server.ILOIP" 
      data-valmsg-replace="true">Current value: 3</span>

<textarea class="input-validation-error textArea" cols="20" data-val="true" 
          data-val-length="The field Comment must be a string with a maximum length of 256." 
          data-val-length-max="256" id="Server_Comment" 
          name="Server.Comment" rows="2">
</textarea>

<span class="field-validation-error" data-valmsg-for="Server.Comment" data-valmsg-replace="true"> Current Value: 3</span>

所以有人可以建议当ILIOP字段与它相关的错误时，ILIOP字段没有显示红色边框的原因是什么，而注释字段会显示红色边框？

Answer 1

我怀疑你的页面CSS是这样定义的，当class input-validation-error和class textArea都在元素上时，textarea元素会得到红色样式。

作为我假设的初步测试，看看如果你改变

会发生什么

@Html.EditorFor(model =>model.Server.ILOIP)

到

@Html.EditorFor(model =>model.Server.ILOIP, new { @class = "textArea"})

并使用此更改重试您的测试用例。在进行此更改后，您可能必须重建源代码并清除浏览器的缓存。