How to Customize The Editorfor CSS with Razor

How to customize the EditorFor CSS with razor

Create a partial view called Contact.cshtml with your custom markup in Views/Shared/EditorTemplates. This will override the default editor.

As noted by @smartcavemen, see Brad Wilson's blog for an introduction to templates.

ASP.NET MVC 3 Razor - Adding class to EditorFor

Adding a class to Html.EditorFor doesn't make sense as inside its template you could have many different tags. So you need to assign the class inside the editor template:

@Html.EditorFor(x => x.Created)

and in the custom template:

<div>
    @Html.TextBoxForModel(x => x.Created, new { @class = "date" })
</div>

Add css class to Html.EditorFor in MVC 2

I would HIGHLY suggest using Editor Templates. It's definitely the "right" way to style your EditorFor.

You can tell a model property to use an Editor Template in two different ways.

The first (the simplest) is to create an editor template for a certain data type - DateTime for example.

The second way to do it is to set it declaratively in your DataAnnotations by using a UIHint.

Edit
I'd also like to add that you should use the "date" type in your input field so that even when JavaScript is disabled, your user can stills see a native datepicker (only valid on modern HTML5 browsers)

<input id="meeting" type="date" value="2011-01-13"/>

How to change MVC 5 @Html.EditorFor width

Since you're using Bootstrap, I would suggest abandoning the table completely for this type of layout.

You should be able to achieve this with the grid system using a horizontal form:
http://getbootstrap.com/css/#forms-horizontal

<div class="row form-horizontal">
    <div class="col-md-12">
        <div class="form-group">
            @Html.LabelFor(model => model.CaseReportId, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.CaseReportId, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Location, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.Location, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ReportDate, htmlAttributes: new { @class = "control-label col-md-3" })
            <div class="col-md-9">
                @Html.EditorFor(model => model.ReportDate, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>
    </div>
</div>

If you really want to use a table, I noticed you have a table-responsive class on the table element. This is meant to be used on a parent (wrapper) div.
http://getbootstrap.com/css/#tables-responsive

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Set the class attribute to Html.EditorFor in ASP.NET MVC Razor View

The EditorFor helper renders the corresponding editor template. It could be the default template or some custom template that you wrote. This template could contain any markup. It could contain many DOM elements. So now you understand that asking for applying a class to a template doesn't make any sense. To which element on this template you want this class to be applied? For example with the TextBoxFor helper you know that it will generate a single input field, so it makes sense to talk about applying a CSS class to it (that's exactly what the htmlAttributes argument allows you to do).

This being said there are different techniques. For example one that I like very much is to write a custom data annotations model metadata provider and custom editor templates as outlined in the following blog post.

Another possibility is to customize the default templates (as shown in the Brad Wilson's blog post) and apply different HTML attributes to the corresponding input field. Let's take an example with the string.cshtml editor template:

@model string
@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, ViewData)

And now when you want to render this editor template for some string property on your view model:

@Html.EditorFor(x => x.SomeStringProperty, new { @class = "myclass" })

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

I created Editor templates under view/shared .

Adding style to Editor For

Since MVC 5.1, you can pass in custom attributes with using the htmlAttributes as a key:

@Html.EditorFor(model => model.ClienteNuevo, 
    new { htmlAttributes = new { @class = "form-control" } })

In older MVC versions there is no way to add html attributes with the EditorFor method.

You should create a custom editor template or use Html.TextboxFor istead of EditorFor. You should check these topics topic1, topic2.

Adjusting the size of a editorfor box using inline css or site.css file

This has been answered a few times in different scenarios here on SO. Basically, you cannot add CSS directly to an EditorFor()

I would HIGHLY suggest using Editor Templates. It's definitely the "right" way to style your EditorFor.

You can tell a model property to use an Editor Template in two different ways.

The first (the simplest) is to create an editor template for a certain data type - DateTime for example.

The second way to do it is to set it declaratively in your DataAnnotations by using a UIHint.

Alternatively, if you're hung up on using inline CSS for your Editor, you will need to use TextBoxFor()

@Html.TextBoxFor(Function(model) model.School_Title, New With {.class = "CustomCssAttribute" }))

Adding class to EditorFor in MVC

You can pass the class name to the EditorTemplate using AdditionalViewData.

In the main view

@Html.EditorFor(m => m.DocumentType, new { htmlAttributes = new { @class = "myclass" } })

and in the EditorTemplate

....
@Html.DropDownListFor(m => m, values, ViewData["htmlAttributes"])

However including the logic for the SelectList in an EditorTemplate is not good practice. I would recommend your consider creating an extension method for generating the SelectList and then this EditorTemplate wont be required. Refer this example. And Selected = v.Equals(Model), is pointless because the Selected property will be ignored (the selected item will be the value of DocumentType)

---

Related Topics