MVC 5 @Html.EditorFor override @id

Question

I have a drop down list that is generated and used by @Html.EditorFor in an ASP.net page, my issue is I am unable to assign an Id to this field. I have the same control which i am using in 2 different spots and i want to use the index/id from my model to switch/swap the values.here is the dic for it

  <div class="editor-field">
                    @Html.EditorFor(m => m.state, new { @id = "state" + Model.Index })

                </div>

the html rendered is

<div class="editor-field">
    <label for="EteProvince">State</label>
    <select id= "EteProvince" name="EteProvince" style="width:220px" 
              class="valid">
    </select>
</div>

i want to add a model.index to the id of select. Is there a way to do this?

Thanks

Answer 1

For all Asp.Net MVC method, you can set a viewData object, that set additional atrtibute values to the generated HTML:

@Html.EditorFor(
    modelItem => item.YourProperty, 
    new { htmlAttributes = new { @id="custom_id" } })

for more information check this .

Answer 2

This should put you on the right track:

@Html.LabelFor(model => model.YourItem, "State: ", new { @id = "MyID"}) 
@Html.EditorFor(model => model.YourItem, new { @id = "MyID2"})

And this will allow you to style the label/editor with CSS like normal. Hope this helps!

Answer 3

<div class="editor-field">
    @Html.EditorFor(p => p.item.property, new { htmlAttributes = new { @id="itemId" }})
</div>

Answer 4

You could use DropDownList instead of the EdiorFor , like:

@Html.DropDownList("state" + Model.Index, new SelectList(Model.States, "", ""))

Also you could override the id when using the DropDownListFor :

@Html.DropDownListFor(m => m.state, new SelectList(Model.States, "", ""), new { id = "state" + Model.Index })