MVC4 表单输入验证 - 自定义错误范围答案

【问题标题】：MVC4 Form Input Validation - Customising the error spanMVC4 表单输入验证 - 自定义错误范围
【发布时间】：2013-02-27 12:30:47
【问题描述】：

我有一个使用Html.TextBoxFor 的带有多个输入的表单，每个输入都有一个ValidationMessageFor，它从ViewModel 属性中获取错误消息。对于这个例子，我们假设只有一个输入：

@Html.TextBoxFor(x => x.Code)
@Html.ValidationMessageFor(x => x.Code)

当出现模型错误时，验证器会在几个跨度内显示它的错误消息，如下所示：

<input type="text" value="" name="Code" id="Code" data-val-required="Personalised code is required" data-val="true" class="input-validation-error">
<span data-valmsg-replace="true" data-valmsg-for="Code" class="field-validation-error">
    <span for="Code" generated="true" class="">Personalised code is required</span>
</span>

如何自定义此错误消息？

例如将外部跨度更改为 div 并同时提供 div 和 span 类？

<div class="myOuterSpan" data-valmsg-replace="true" data-valmsg-for="Code" class="field-validation-error">
    <span class="myInnerSpan" for="Code" generated="true" class="">Personalised code is required</span>
</div>

还是只有一个跨度？

<span class="errorWrapper" for="Code" generated="true">Code is required</span>

或者将所有内容包装在一个 div 中？

<div class="myOuterDiv">
    <span data-valmsg-replace="true" data-valmsg-for="Code" class="field-validation-error">
        <span for="Code" generated="true" class="">Personalised code is required</span>
    </span>
</div>

你懂的……

解决方案

我的解决方案基于 Darin 的回答并创建了一个 CustomValidationMessage，而不是我最初打算创建的 customValidationMessageFOR。

控制器

ModelState.AddModelError("Code", "Invalid Code");

查看

@Html.CustomValidationMessage("Code")

扩展

public static class Extensions
{
    public static MvcHtmlString CustomValidationMessage(this HtmlHelper htmlHelper, string modelName)
    {
        var modelState = htmlHelper.ViewData.ModelState[modelName];
        var modelErrors = modelState == null ? null : modelState.Errors;
        var modelError = ((modelErrors == null) || (modelErrors.Count == 0))
            ? null
            : modelErrors.FirstOrDefault(e => !string.IsNullOrEmpty(e.ErrorMessage)) ?? modelErrors[0];

        if (modelError != null)
        {
            return MvcHtmlString.Create("<span class='validation_wrapper customValidation'><span>" + modelError.ErrorMessage +"</span></span>");
        }

        return new MvcHtmlString(string.Empty);
    }
}

【问题讨论】：

你看到this了吗？

标签： asp.net-mvc validation asp.net-mvc-4

【解决方案1】：

无法修改由ValidationMessageFor 助手生成的标记。如果你想这样做，你将不得不编写一个自定义助手。这个助手的签名可能如下所示：

public static MvcHtmlString CustomValidationMessageFor<TModel, TProperty>(
    this HtmlHelper<TModel> htmlHelper, 
    Expression<Func<TModel, TProperty>> expression
)
{
    ...
}

您也可以查看similar post。

【讨论】：

正是我需要的。谢谢！
您可以稍微修改标记。我在下面更新了我的答案。

【解决方案2】：

确实不需要自定义扩展。例如：

控制器：

ModelState.AddModelError("InvalidLogin", "Your credentials are invalid.")

查看：

@Html.ValidationMessageFor
(
  model => model.InvalidLogin, 
  "", 
  htmlAttributes: new { @class = "text-error" }, 
  tag: "div"
)

【讨论】：

是的，如果您只有一条验证消息，这可行，但如果您有多个，您是否将每条都包装在一个跨度中？
是的。除非你有一些复杂的标记。但是，大多数情况下，带有自定义类的 div 或 span 可以解决问题。