Tab Order in ASP.NET MVC 3 Helpers

Question

How can I use Tab Order property for following code:

<td>
    @Html.EditorFor(model => model.Cost)                
</td>

I tried this:

<td tabindex=1>
    @Html.EditorFor(model => model.Cost)                
</td>

any suggestions?

Sinkhole

The last time SO has seen @AbdullahSaqib was 5 days after this question was asked in 2011 – Metic

Answer 1

You can also specify the same html attribute in the helper itself as follows.

@Html.TextBoxFor(model => model.Cost, new { tabindex = 1 })

Kinesthesia

This does not work in EditorFor, a second parameter in EditorFor of type object is used to build View Data not add HTML attributes per the documentation: msdn.microsoft.com/en-us/library/ff406462.aspx – Siren

You can't specify additional parameters in the EditorFor. – Metic

Sorry, I think I was using TextBoxFor and just replaced the helper name thinking EditorFor would work the same way. – Kinesthesia

Answer 2

As a contrast to @Stuy1974's right answer, if you don't want to leave the EditorFor solution, you're going to have to wire up your own Editor Template.

@ModelType SomeApp.ViewModels.SomeNiftyViewModel 

// be sure to include the TabIndex info in the ViewModel
@Html.TextBoxFor(model => model.Cost, new { tabindex = model.TabIndex })

You can also use the ViewData parameter already passed to the editor template directly rather than adding the tab index to the model:

// In the main view
@Html.EditorFor(model => model.Cost, new { TabIndex = 3 })

// In the editor template
@{ int tabIndex = (ViewData["TabIndex"] as int?) ?? 0; }
@Html.TextBoxFor(model => model, new { tabindex = tabIndex })

Metic

Answer 3

Simply do this

@Html.EditorFor(model => model.Cost,  new { htmlAttributes = new { tabindex = 34 } })

Jerryjerrybuild

Answer 4

Another option, allowing you to retain the EditorFor, is to set the tab index in javascript after the page has loaded with something like:

var myEditorFor = document.getElementById("MyEditorForId");

if (myEditorFor != null) {
    myEditorFor.setAttribute("tabindex","18")
}

Myke

Answer 5

Unfortunately @Html.EditorFor method doesn't provide the ability to add HTML attributes. You can add these via a more specific method call. In the above case I'd use -

@Html.TextBoxFor(model => model.Cost, new { tabindex = 1 })

Singhalese

He doesn't have to move away from the EditorFor. He could just as easily create an Editor Template. – Metic