如何自定义剃刀使用的HTML属性在MVC5中呈现MVC5错误

Question

我在一个新的MVC5项目中使用了物化CSS框架。我正在寻找一种方法，剃须刀，以不同的渲染模型的错误，因为它做的盒子。例如，下面的剃须刀在表单提交时给出模型错误，生成html输出。注意:我已经在视图模型上有了数据注释，用于指定需要FirstName字段。

       <div class="row margin">
            <div class="input-field col s12">
                @Html.LabelFor(m => m.FirstName)
                @Html.TextBoxFor(m => m.FirstName)
            </div>
        </div>

在模型状态出现错误时呈现以下html：

       <div class="row margin">
            <div class="input-field col s12">
                <label for="FirstName">First Name</label>
                <input class="input-validation-error" data-val="true" data-val-required="The First Name field is required." id="FirstName" name="FirstName" type="text" value="">
            </div>
        </div>

我希望下面的html输出如下：

       <div class="row margin">
            <div class="input-field col s12">
                <label for="FirstName" class="active" data-error="The First Name field is required.">First Name</label>
                <input class="validate invalid" id="FirstName" name="FirstName" type="text" value="">
            </div>
        </div>

我是albiet，不是非常有经验的MVC剃须刀一般，所以这可能是一个简单的修复。基本上，我希望只有在这个字段的模型状态错误时才会发生三件事

1. 将“活动”CSS类分配给label元素。
2. 将数据错误属性添加到具有指定模型状态错误的label元素中。
3. 将“验证”和“无效”CSS类分配给输入元素。

任何帮助都将不胜感激！

Answer 1

不幸的是，无法从现有的HTML助手中修改HTML的输出，也无法扩展帮助器并覆盖它们。

从这里开始，您最好的选择是创建您自己的html助手，如下所示：

public class LabelHelper
{
    public static string Label(this HtmlHelper html, string target, string text)
    {
        return string.Format("<label for='{0}'>{1}</label>", target, text);
    }
}

虽然创建简单的帮助程序可能相对简单，但随着HTML变得越来越复杂(并且开始询问字段模型状态)，它开始变得越来越复杂，虽然您可以使用原生TagBuilder类，但我建议您看看HtmlTags Nuget包，它可以很大程度上消除构建HTML标记的痛苦。

此外，如果要使用helpers，可能需要通过web.config文件导入命名空间，以避免在所有视图中显式地包含名称空间：

<system.web.webPages.razor>
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
    <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization" />
        <add namespace="System.Web.Routing" />
        <add namespace="YourWebApp" />
    </namespaces>
    </pages>
</system.web.webPages.razor>`