Adding Class to Editorfor in MVC

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>

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)

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" })

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

adding a class to EditorFor - razor c#

Ok so this is what you can do:

In your EditorTemplates folder create a template called DateTime.cshml (the name will resolve automatically if you use it for dates, otherwise you have to specify it when using it).
Then in it:

@model System.DateTime

@Html.TextBox(
   string.Empty, 
   Model.ToString("yyyy-MM-dd"),
   new { @class="datepicker", @type = "date"})

Using the last parameter you can specify any html attribute (class, data, type etc.).

Then you use it like this:

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

In case you chose to name your template with a different name you can specify it by invoking another overload:

@Html.EditorFor(x => x.ADate, "MyOtherAwesomeTemplate")

HTML.EditorFor adding class not working

EditorFor in ASP.NET MVC 3 does not support passing CSS to the generated HTML in this manner. You have to create a custom editor template and pass custom ViewData entries and do it manually (as the linked answers above show).

This was corrected in MVC 5.1, but there is no way to make this work in MVC 3 with EditorFor if you aren't willing to create your own templates.

Add css class to EditorFor or validate email with jquery

use @Html.TextBoxFor

Example:

@Html.TextBoxFor(x => x.Created, new { @class = "form-control" })

Or dirty way using jQuery:

$(document).ready(function () {
    $('#Email').addClass('form-control');
});

How to add a Class using EditorFor?

I found a solution, basically, in the view using:

@Html.TextBoxFor() 

and add:

[EmailAddress(ErrorMessage = "Invalid Email Address")] 

in the model.

    [Required]
    [StringLength(100, ErrorMessageResourceName = "Common_Annotations_CharactersLong", ErrorMessageResourceType = typeof(Resources), MinimumLength = 6)]
    [EmailAddress(ErrorMessage = "Invalid Email Address")]
    [Display(Name = "Account_Register_UserEmail", ResourceType = typeof(Resources))]
    public string UserEmail { get; set; }

    [EmailAddress(ErrorMessage = "Invalid Email Address")]
    [Display(Name = "Account_Register_ConfirmEmail", ResourceType = typeof(Resources))]
    [Compare("UserEmail", ErrorMessageResourceName = "Account_Register_ConfirmEmailErrorMessage", ErrorMessageResourceType = typeof(Resources))]
    public string ConfirmEmail{ get; set; }

<div class="form-group">
    @Html.LabelFor(m => m.UserEmail, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.UserEmail, new { @class = "form-control" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => m.ConfirmEmail, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.ConfirmEmail, new { @class = "form-control" })
    </div>
</div> 

Overwriting the class on a `Html.EditorFor`

There is no way to customize the value of the emitted class attribute when using built-in editor templates via the EditorFor method. It hard-codes the class value (more info available here: http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-3-default-templates.html)

You have two options:

1. Write your own custom template that supports the extra functionality. Have a look here for more details: http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-4-custom-object-templates.html

2. Process the output of the EditorFor method:

 <%: new HtmlString(Html.EditorFor(m=>m.ConfirmationHeadline).ToString()
        .Replace("class=\"text-box single-line\"", 
                 "class=\"text-box single-line span-11 last\"")) %>

---

Related Topics