如何更改@ Html.EditorFor模板

Question

我的观点模型 -

public class HashedArrayViewModel
    {
        [Required]
        [Display(Name = Constants.HashNameLabel)]
        public string HashName { get; set; }

        [Required]
        [Display(Name = Constants.HashColumnLabel)]
        public string HashColumn { get; set; }

        [Required]
        [Display(Name = Constants.HashAlgorithm)]
        public string HashAlgorithm { get; set; }
    }

在另一个视图模型中，我引用了上面的类 -

        [Required]
        [Display(Name = Constants.HashArrayLabel)]
        public HashedArrayViewModel HashColumns { get; set; }

我的观点 -

 <div>
    @Html.EditorFor(model => model.HashColumns, new { htmlAttributes = new { @class = "form-control" } })
   @Html.ValidationMessageFor(model => model.HashColumns, "", new { @class = "" })
 </div>

生成标记 -

 <div class="" id="hashcolumn" style="">
       <div>
    <div class="editor-label"><label for="HashColumns_HashName">Hash Name</label></div>
    <div class="editor-field"><input class="form-control text-box single-line" data-val="true" data-val-required="The Hash Name field is required." id="HashColumns_HashName" name="HashColumns.HashName" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="HashColumns.HashName" data-valmsg-replace="true"></span></div>
    <div class="editor-label"><label for="HashColumns_HashColumn">Hash Columns</label></div>
    <div class="editor-field"><input class="form-control text-box single-line" data-val="true" data-val-required="The Hash Columns field is required." id="HashColumns_HashColumn" name="HashColumns.HashColumn" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="HashColumns.HashColumn" data-valmsg-replace="true"></span></div>
    <div class="editor-label"><label for="HashColumns_HashAlgorithm">Hash Algorithm</label></div>
    <div class="editor-field"><input class="form-control text-box single-line" data-val="true" data-val-required="The Hash Algorithm field is required." id="HashColumns_HashAlgorithm" name="HashColumns.HashAlgorithm" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="HashColumns.HashAlgorithm" data-valmsg-replace="true"></span></div>
     <span class="field-validation-valid " data-valmsg-for="HashColumns" data-valmsg-replace="true"></span>
       </div>
    </div>

页面看起来像这样 -

如果您在上图中注意到，标签和字段位于彼此的顶部 我的问题是 - 如何更改标签和字段上的css类。默认情况下，razor分别添加editor-label和editor-field。我想使用col-md-10和col-md-10。

非常欢迎任何其他修复路线的建议。

Answer 1

internal static string ObjectTemplate()默认使用System.Web.Mvc.Html.DefaultEditorTemplates.cs

中定义的EditorTemplate方法

要覆盖默认值，您需要创建自己的/Views/Shared/EditorTemplates。在HashedArrayViewModel.cshtml文件夹中，创建一个@model HashedArrayViewModel @Html.LabelFor(m => m.HashName, new { @class = "..." }) @Html.TextBoxFor(m => m.HashName, new { @class = "..." }) @Html.ValidationMessageFor(m => m.HashName, new { @class = "..." }) .... // elements for other properties of HashedArrayViewModel 部分（注意模板的名称与类的名称匹配），使用以下代码（根据需要添加类名和封闭元素）

@Html.EditorFor(m => m.HashColumns)

并在视图中使用

@Html.ValidationMessageFor(m => m.HashColumns)

请注意，您当前的HashColumns代码没有意义，因为HtmlHelper是一个复杂的对象，您无法将客户端验证应用于复杂对象。

或者，您可以编写自定义@Html.BootstrapEditorFor(m => m.HashName) 扩展方法，为Refactor similar CHTML that renders varying properties using EditorFor and LabelFor中所述的每个属性生成标签，输入和验证消息占位符，以便您可以使用

EditorTemplate

在@Html.BootstrapEditorFor(m => m.HashColumns.HashName) 内，或

@IntDef

在主视图中

Answer 2

我在view / shared下创建了编辑器模板。