Html.EditorFor adding .textbox to element name

Question

I have a project which contains a simple form for collecting signup info. Recently I have been working to add localization to the project, as all of the text shown to the user was hardcoded. I'm not sure what changed, but for some reason, now when Razor renders an HTML element using the Html.EditorFor method that ends up being a textbox, the Name property of the element has ".textbox" appended to it.

This breaks the bindings, so that when I receive my model all of the text values are null. Here is an example of what I'm seeing, Razor code:

<div class="form-group" ng-class="{ 'has-error': validate && accountForm.FirstName.$invalid }">
        @Html.LabelFor(m => m.FirstName, new { @class = @ViewBag.LabelCssRequired })
        <div class="@ViewBag.TextboxCss">
            @Html.EditorFor(m => m.FirstName, new { htmlAttributes = new { ng_model = "firstName" } })
        </div>
    </div>

and here is the rendered output:

<input class="text-box single-line form-control ng-valid-maxlength ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" id="FirstName_textbox" maxlength="100" name="FirstName.textbox" ng-model="firstName" required="required" type="text" value="">

It is also adding a "_textbox" to the id, but I'm not as concerned about that at the moment. For some reason, this only seems to be happening to input elements where the type is "text". I have another input generated with.EditorFor which has the type of email and it doesn't have any modifications to the name.

This behavior also seems to be restricted to Html.EditorFor, if I use.TextboxFor, it works fine.

I have been able to make the bindings work by explicitly setting the @Name property in Razor, but this only masks the symptom, and I would like to avoid having to do this for every text input on the site.

Has anyone seen this behavior before, or know of a fix?

Do you have anything in project root\views\shared\editortemplates by any chance? I am sure this should not happen, and a rogue editor template would explain this behavior. — Balázs
– Balázs, Commented Oct 13, 2017 at 15:51
@Balázs that was it! Somehow in one of these templates, the textbox that got output had the name "textbox", so that seems to be why it was adding ".textbox". I'm not sure how this happened, as I haven't had any reason to touch these files so far. If you want to post that as the answer, I will accept it. Now off to figure out how that got added to the file — KSF
– KSF, Commented Oct 13, 2017 at 16:15

Balázs · Accepted Answer · 2017-10-13 16:20:12Z

1

By default, the TextBoxFor helper generates HTML using a built-in template. You can override the defaults by creating files in the project root\views\shared\editortemplates folder.

Therefore the problem can be caused by some custom template being present there. Normally, you need to check for files whose name Match either the datatype (such as string) or the control type (such as TextArea). If the corresponding model property has a UIHint attribute on it, a custom file specified in it can also come into play.

answered Oct 13, 2017 at 16:20

Balázs

2,9372 gold badges22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Html.EditorFor adding .textbox to element name

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related