Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

As you know we can set attributes to actionLink or textBox in razor views but how can we set attributes to @Html.EditorFor, I know the EditorFor is a dynamic element that can be set according to model type, but all shapes of that can get the attributes. So is there any way to set attribute to @Html.EditorFor something like this: new {@class = "myclass"} ?

like image 401
Saeid Avatar asked Dec 19 '11 09:12

Saeid


People also ask

What is HTML EditorFor in MVC?

ASP.NET MVC includes the method that generates HTML input elements based on the datatype. The Html. Editor() or Html. EditorFor() extension methods generate HTML elements based on the data type of the model object's property.

How do I add an EditorFor style?

EditorFor does not allow for styling as there are no parameters for additional attributes. The reason for this is because the EditorFor doesn't always generate a single element as it can be overridden. To style a specific type of element you need to use the specific editor you want to use.

How does HTML EditorFor work?

Simply put, the Html. EditorFor method allows the developer to retain control over the display of form elements by data type (ie. string, boolean, int…etc) or model attribute at a global level rather than at an individual view level. This allows for cleaner ASP markup and easily scalable form controls.

What is the difference between HTML textbox HTML TextBoxFor and HTML EditorFor?

Show activity on this post. TextBoxFor: It will render like text input html element corresponding to specified expression. In simple word it will always render like an input textbox irrespective datatype of the property which is getting bind with the control. EditorFor: This control is bit smart.


2 Answers

Try this:

@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } }) 
like image 181
10gler Avatar answered Sep 21 '22 06:09

10gler


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" }) 
like image 41
Darin Dimitrov Avatar answered Sep 23 '22 06:09

Darin Dimitrov