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.

StuartMc · Accepted Answer · 2014-02-27 19:22:44Z

28

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, 2014 at 19:22

StuartMc

6767 silver badges12 bronze badges

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

4 Comments

gunr2171 Over a year ago

Note: this will also change the name attribute of the element.

Bob Over a year ago

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

Ahmed Over a year ago

Make sure to user Name instead of name if you are going with htmlAttributes .. see here stackoverflow.com/a/17638187/70289

user9993 Over a year ago

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.

Jorge · Accepted Answer · 2013-05-30 23:01:07Z

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, 2013 at 23:01

Jorge

18.3k19 gold badges82 silver badges129 bronze badges

2 Comments

Bear Over a year ago

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 :)

SkeetJon Over a year ago

Does this lose the data on postback ?

Serge Intern · Accepted Answer · 2016-05-26 12:44:26Z

2

Based on bob's comment :

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

Credits to Bob.

answered May 26, 2016 at 12:44

Serge Intern

2,9894 gold badges25 silver badges39 bronze badges

Comments

Ankit · Accepted Answer · 2016-12-30 12:05:02Z

2

Alternatively you can add htmlAttributes

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

answered Dec 30, 2016 at 12:05

Ankit

1,21413 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related