how to change default css class in @Html.EditorFor template

Question

My viewmodel -

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; }
    }

in another view-model, I am referencing above class-

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

My view-

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

Generate markup -

 <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>

and the page look like this -

and if you notice in the above image, labels and fields are on the top of each other my question is - how do I change the css classes on labels and fields. By default razor adds editor-label and editor-field respectively. I want to use col-md-10 and col-md-10 .

Any other suggestion to fix the alignment is highly welcome.

[Write your own Editor template](http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-4-custom-object-templates.html). — Erik Philips, Dec 14 '17 at 18:22

score 0 · Answer 1 · answered Dec 14 '17 at 23:00

The EditorFor() by default uses the internal static string ObjectTemplate() method defined in the System.Web.Mvc.Html.DefaultEditorTemplates.cs

To override the default, you need to create your own EditorTemplate. In the /Views/Shared/EditorTemplates folder, create a HashedArrayViewModel.cshtml partial (note the name of the template matches the name of the class), with the following code (add your class names and enclosing elements as required)

@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

and in the view, use

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

Note that your current @Html.ValidationMessageFor(m => m.HashColumns) code makes no sense since HashColumns is a complex object and you cannot apply client side validation to a complex object.

Alternatively, you can write a custom HtmlHelper extension method that generates the label, input and validation message placeholder for each property as described in Refactor similar CHTML that renders varying properties using EditorFor and LabelFor, so that your can use

@Html.BootstrapEditorFor(m => m.HashName)

inside your EditorTemplate, or

@Html.BootstrapEditorFor(m => m.HashColumns.HashName)

in your main view

score -1 · Accepted Answer · answered Dec 27 '17 at 18:56

-1

I created Editor templates under view/shared .

answered Dec 27 '17 at 18:56

Nitin Kumar Mishra

315
8
18

how to change default css class in @Html.EditorFor template

2 Answers2