Editorfor() and HTML Properties

Html attributes for EditorFor() in ASP.NET MVC

EditorFor works with metadata, so if you want to add html attributes you could always do it. Another option is to simply write a custom template and use TextBoxFor:

<%= Html.TextBoxFor(model => model.Control.PeriodType, 
    new { disabled = "disabled", @readonly = "readonly" }) %>    

EditorFor() and html properties

I wrote a blog entry to answer my own question

Adding html attributes support for Templates - ASP.Net MVC 2.0 Beta

Add HtmlAttributes to Html EditorFor()

Turns out there was a few dumb errors, first of all the declaration on the EditorFor() field was wrong, the correct one is this:

@Html.EditorFor(x => x.Field, new { @disabled = "" })

The second point is to keep using the incoming htmlAttributes in the string.cshtml EditorTemplate, replacing the class property definition:

htmlAttributes["class"] = "text-box single-line form-control";

For:

htmlAttributes["class"] = htmlAttributes["class"] + "text-box single-line form-control";

In this way, the incoming html attributes is just concatenated with the new default ones.

Data-attributes with html editor for mvc

The second object parameter for Html.EditorFor isn't for HTML attributes, it's for additional view data. The EditorFor helpers don't allow customizing HTML attributes in the way that e.g. the more specific <input> helpers do - they take most of their setup from model metadata (for example [Attributes]).

Easiest way to "fix" is obviously dropping EditorFor:

@Html.TextBoxFor(model => model.SireTag, new { data_typeahead = "dsfsdfsd" })

Alternatively, write your own EditorTemplate for the property. This could allow you to use (or simplify) your original syntax, by retrieving the data_typeahead value from ViewData["data_typeahead"] (or "typeahead").

One step further, more advanced, you could make your own Attribute to apply to your model properties + your own ModelMetadataProvider (or - simpler - use IMetadataAware, more on that below) to turn it into metadata that the EditorTemplate could use - this in order to remove the decision about data- attributes entirely from your View, turning your call into:

@Html.EditorFor(model => model.SireTag)

... and your model into something like:

public class MyModel
{
    [Typeahead("dsfsdfsd")]
    public string SireTag { get; set; }
}

Example of this approach using IMetadataAware:

[AttributeUsage(AttributeTargets.Property)]
public class TypeaheadAttribute : Attribute, IMetadataAware
{
    private readonly string value;

    public TypeaheadAttribute(string value)
    {
       this.value = value;
    }

    public void OnMetadataCreated(ModelMetadata metadata)
    {
        metadata.AdditionalValues["typeahead"] = value;
    }
}

This metadata entry can then be extracted in the EditorTemplate, using ViewContext.ViewData.ModelMetadata.AdditionalValues (a dictionary) and the result be added to an attributes dictionary passed to e.g. Html.TextBox.

Custom EditorFor Template and htmlAttributes

You are using the overload of EditorFor() that passes the object as additionalViewData. You can read that within the template from the ViewDataDictionary

@model int?
@{ var attributes = ViewData["htmlAttributes"]; } // returns { @readonly = "readonly" }

which you could then merge with your existing attributes and use in the TextBoxFor() method.

@{
    var htmlAttributes = HtmlHelper.AnonymousObjectToHtmlAttributes(attributes);
    htmlAttributes.Add("oninput", "this.value=this.value.replace(/[^0-9]/g,'')";
}
@Html.TextBoxFor(model => model, htmlAttributes)

Note that TextBoxFor() generates type="text" so there is no need to add it again. In addition, you do not need the leading @ unless its a reserved keyword (for example @class = "...")

mvc 3 Html.EditorFor add html attribute not work

EditorFor is going to overwrite those attributes. See Html attributes for EditorFor() in ASP.NET MVC for workarounds.

If all you need to change is the display of the width, and you're not relying on any Editor Templates then the easiest fix is to use TextBoxFor instead

 @Html.TextBoxFor(model => model.UserName, new { style = "width: 100px" })

Html Attributes on EditorFor() or Check dataType in EditorTemplate

Now ASP.Net MVC 5.1 supports htmlAttributes for EditorFor. Just pass this as an anonymous object.

ASP.Net MVC 5.1 Release Notes

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

Html attributes for EditorFor() in ASP.NET MVC

EditorFor works with metadata, so if you want to add html attributes you could always do it. Another option is to simply write a custom template and use TextBoxFor:

<%= Html.TextBoxFor(model => model.Control.PeriodType, 
    new { disabled = "disabled", @readonly = "readonly" }) %>    

How can I use multi properties in one field using EditorFor?

You can try to add NameWithSurname property to connected Nameand Surname value.

public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Surname { get; set; }

    private string _NameWithSurname;

    public string NameWithSurname
    {
        get
        {
            _NameWithSurname = Name + Surname;
            return _NameWithSurname;
        }
        set {
            _NameWithSurname = value;
        }
    }
}
@Html.EditorFor(model => model.Customer.NameWithSurname  , new { htmlAttributes = new { @class = "form-control" } })

NOTE

Your Surname property might be public, otherwise it only can use in Customer class.

---

Related Topics