HTML Attributes for Editorfor() in ASP.NET MVC

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

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 = "...")

EditorFor extension not working for htmlAttributes in Asp.Net MVC 5.1

You can use HtmlHelper.AnonymousObjectToHtmlAttributes

var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);

if (disabled)
{
    attributes.Add("disabled", "disabled");
}

Alternatively, you could pass the disabled attribute as part of the htmlAttributes object, meaning you wouldn't need the if statement at all.

htmlAttributes: { class = "form-control", disabled = "disabled" }

Depending on whether you have a custom EditorFor template or not, you may need to change how you pass the html attributes to the EditorFor function, as the parameter it accepts - additionalViewData is not the same.

This article explains in more detail.

If you are using a default template, you can pass the html attributes inside another anonymous object:

return htmlHelper.EditorFor(ex, new { htmlAttributes = attributes });

If you have a custom template, you will need to retrieve the html attributes and apply them yourself in the view:

@{
    var htmlAttributes = ViewData["htmlAttributes"] ?? new { };
}

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.

aspnet razor editorfor conditionally add attribute

You need to build an object defining the html attributes based on some property and then use that in the DropDownList() method. Assuming you model contains a property bool IsReadOnly, then

@{
    var attributes = Model.IsReadOnly ? 
    (object)new { @class = "form-control", readonly = "readonly" } :
    (object)new { @class = "form-control"};
}
@Html.DropDownList("FK_CompID", null, attributes)

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

Change id attribute of an html.editorfor helper in MVC4 with Razor

Change your helper from EditorFor to TextBoxFor the EditorFor, doesn't have a overload to override html properties

Change this

@Html.EditorFor(model => model.Name,  new {id = "PersonName"})

To this

@Html.TextBoxFor(model => model.Name,  new {id = "PersonName"})

---

Related Topics