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

Question

I have looked through some various answers related to this but all were for mvc3 or not for Razor.

I have a single page that has multiple forms, in partial views, that are for editing a different models. However, most of those models have a 'name' field. I am looking to be able to specify an editorfor with a specific id as such:

    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name,  new {id = "PersonName"})
        @Html.ValidationMessageFor(model => model.Name)
    </div>

I have tried various other things but have not found a satisfactory way to handle this. The two choices I seem to have are:

1) Create a form manually using the normal html helpers and construct the model in the controller

2) Rename all the fields in the model to fit the format

Neither of these are exciting to me so I am hoping for an alternative but am afraid that the id is what is used when binding the form to a model.

score 27 · Answer 1 · answered Feb 27 '14 at 19:22

27

I realise this is somewhat late but I just ran into this problem myself... I thought "there has to be a way to use the EditorFor and still override the ID"... there is. Do the following and your input has an ID and Name of whatever you like.

@Html.EditorFor(model => model.myField, null, "txtMyField")

Hope this helps and hope it helps other people too.

Note: from what I understand, the reason this is typically not done is to avoid other, dynamically created controls ID's and Names from conflicting.

answered Feb 27 '14 at 19:22

StuartMc

666
7
12

2

Note: this will also change the `name` attribute of the element. – gunr2171 Jul 08 '14 at 16:45
5

And html attributes can be added using the following object syntax in EditorFor @Html.EditorFor(model => model.FieldName, null, "newIdAndName", new { htmlAttributes = new { @class = "form-control"} }) – Bob Feb 25 '15 at 19:06
Make sure to user Name instead of name if you are going with htmlAttributes .. see here http://stackoverflow.com/a/17638187/70289 – Ahmed Aug 19 '15 at 08:37
I can't believe the EditorFor blatantly ignores the @id convention as used elsewhere. This is everything wrong with ASP.NET MVC in a nutshell, it's truly a disaster. I believe ASP.NET Core fixes a number of these poor choices. Overall this is why I'm more interested in doing everything client side with API's. This HTML barf insanity is just stressful to maintain. – user9993 Jun 07 '18 at 10:57

score 20 · Accepted Answer · answered May 30 '13 at 23:01

20

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

answered May 30 '13 at 23:01

Jorge

17,896
19
80
126

2

Is there an analog for this for DateTime values? I couldn't find one and the EditorFor creates a really nice little date/time picker. Trying this out with the other values that I can do now. Edit: This works perfectly I am marking as accepted but am hoping you might have a solution for the datetime still :) – Bear May 30 '13 at 23:05
1

Does this lose the data on postback ? – SkeetJon Feb 24 '14 at 13:50

score 2 · Answer 3 · answered May 26 '16 at 12:44

2

Based on bob's comment :

EditorFor @Html.EditorFor(model => model.FieldName, new { htmlAttributes = new { id = "myuniqueid"} })

Credits to Bob.

answered May 26 '16 at 12:44

Serge Intern

2,669
3
22
39

score 2 · Answer 4 · answered Dec 30 '16 at 12:05

2

Alternatively you can add htmlAttributes

@Html.EditorFor(Model => Model.myField, new { htmlAttributes = new { @class = "form-control", @id = "txtMyField" } })

answered Dec 30 '16 at 12:05

Ankit

1,094
11
23

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

4 Answers4

Linked