EditorFor ignores tabindex. How to install tabindex?

Question

Using tabindex seems to work only for htmlhelpers like Textboxfor and not EditorFor

For instance:

<%: Html.TextBoxFor(model => Model.MyItem, new { @tabindex = "3" })%> 

Produces a tabindex value.

However, if you use;

 <%: Html.EditorFor(model => Model.MyItem, new { @tabindex = "3" })%> 

Then the result is that the control is created as expected, but the tab index is missing.

So ... How can I install tabindex for a given EditFor control?

Answer 1

The main problem that I encountered is that I needed to create a mechanism like EditorFor to format the decimal as a currency (our system has several currencies, so "C" would not be suitable), get a tab index that works And allow the system to support standard validation.

I managed to achieve this using the following. By creating your own custom editor control.

Create a file (mine is called decimal.ascx) in the Views / Shared / EditorTemplates directory of your project.

  <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<decimal?>" %> <% int intTabindex = 0; decimal myVal = 0; string strModelValue = ""; if (Model != null) { myVal = (decimal)Model; strModelValue = myVal.ToString("#.00"); } else strModelValue = ""; if (ViewData["tabindex"] != null) { intTabindex = (int)ViewData["tabindex"]; } %> <%: Html.TextBox("", strModelValue, new { @tabindex = intTabindex })%> 

Essentially, this code simply overrides what would normally be represented in the "decimal" editor for a method with <; p>

 <%: Html.TextBox("", Model.ToString("#.00"), new { @tabindex = intTabindex }) %> 

template.

My calling code is now readable;

 <%: Html.EditorFor(model => Model.MyItem, new { tabindex = 5 })%> 

The result is the following code on the page.

 <input id="Model_MyItem" name="Model.MyItem" tabindex="5" type="text" value="12.33" /> 

This is exactly what I need.

Although this is true only for my specific circumstances, I would urge anyone who wants to solve this problem to first try to create their own control over the task, since this can save you a significant amount of time.

If in the code, of course, it will be possible to create a certain type of control and tune the results around it.

For instance; we could just add another element to the call to define the text format.

 new {tabindex = 12, numberformat=2} 

Then just create a handler for all formats.

Answer 2

Since EditorFor is just a template for a DataType, it expects only a data type like Model. There are several ways around this, I guess. You could add tabindex to an anonymous object that would be merged into a ViewData for an EditorTemplate like this.

Code in your view:

 Html.EditorFor(m => m.Username, "test", new { tabindex = 3, style = "width: 400px;" }) 

EditorForModel template for viewing ViewData:

 <%: Html.TextBoxFor(m => m.Username, ViewData)%> 

This should do text input with tabindex of 3 and style = "width: 400px;"

Happy coding.

Edited: This is exactly the markup that I have on my test page:

 <%: Html.EditorFor(m => m.DollarsAmount, "NullableDecimal", new { tabindex = 99 }) %> 

I tell the EditorFor template to select the Tullplate editor "NullableDecimal" I created. (You can put the UiHint attribute in a property inside the model also to tell it to use editortemplate)

"NullableDecimal" EditorTemplate located in ~ / Views / Shared / EditorTemplates:

 <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<decimal?>" %> <%: Html.TextBox(string.Empty, (Model.HasValue ? Model.Value.ToString("#.00") : null), ViewData) %> 

What is even more accessible for my implementation is the additional ViewData, which I pass through my anonymous object, are combined into a ViewData dictionary, which will be used by EditorTemplate. Therefore, if you do not pass the ViewData to the EditorTemplate, this will not cause your tabindex text inputs to be 0, as your implementation will currently do. In addition, your implementation will only consider tabindexes, not any other input attributes. i.e. maximum length or style