MVC: which CSS class implements Html.EditorFor() method?

Question

In order to modify the style shown when you use @Html.EditorFor(m => m.SomeAttribute) I want to know how to override the default CSS class without declare a new class for each attribute data type of the model. In other words.

I don't want to do this:

  @Html.LabelFor(m => m.ddlStationId, new {@class="label"})
  @Html.EditorFor(m => m.ddlStationId, new { ReadMethod = "Read", ReadController = "Receiver",@class="combobox" })
  @Html.EditorFor(m => m.txbBrandName,new {@class="textbox"})

As you all know, EditorFor() has a different behavior depending on the datatype, so I want to know where is located this class.

I did something by using the UIHint class as a decorator and defined an EditorTemplate, but doesn't allowed me to override the main CSS. Is important to say that I'm using the Kendo UI framework. Some extra information which can be relevant.

Answer 1

Thanks tommy! I did something like this, but using UIhint... so, when I declared a property I set some decorators depending on the data type and there I used the Css Class. For example:

[Required]
[Display(Name = "Nombre")]
[UIHint("String")]
public string txbName
{
    get;
    set;
}

And, on the Editor Template:

@model object 

@Html.TextBoxFor(model => model, new {@class="k-textbox",style="min-width:200px;" })

Finally, the definition of the CSS class "k-textbox"

.controls-row .k-textbox {
    margin: 0 auto;
    clear: left;
    display: inline-block;
}

I preffer this solution because allows me apply this markup for all textbox in the solution... for my particular case is what I wanted to do:

<div class="controls-row">
     @Html.LabelFor(model => model.txbName) //it shows "Nombre"
     @Html.EditorFor(m => m.txbName) //it declares an editor for string type
</div>

Thanks for answering! :)

Answer 2

Unless you override the default templates, there is no "default" class. Depending on your DataAnnotations, the behavior might be different on the value being shown (formatting strings, perhaps you have a template that puts a datepicker on the text input), but the output of each of the following is consistent across MVC.

@Html.LabelFor(x=>x.Property)

outputs in HTML

<label for="Property">Property Value</label>

For a string property

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

outputs in HTML

<input type="text" id="SomeStringProperty" name="SomeStringProperty" value=""/>

Lastly, a boolean property

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

outputs in HTML

<input type="checkbox" id="SomeBoolProperty" name="SomeBoolProperty"/>

Given this, then in your stylesheet, you need to create classes for top level HTML elements not based on class or id. Such examples could be

<style>
  <!--apply to all labels -->
  label { position: absolute; text-align:right; width:130px; }
  <!--apply to all labels with class check-->
  label.check { font-weight:bold;padding-left:10px }
  <!-- apply to all input and textarea tags-->
  input, textarea { margin-left: 140px; }
  <!-- apply to all input with class special-->
  input.special { font-weight: bold }
</style>

If you look in the default stylesheet that comes with an basic MVC template, you will probably see things similar to what I have posted above. You can edit these with your custom classes.