Editor method of HtmlHelper class doesn't work with collections - asp.net-core

Question

In my view I have a model with a property Details of type List. The collection has 3 elements. Now I need to edit this list in a view.
If I use Html.EditorFor method passing the expression everything works correctly, But if I use Html.Editor method, the binding fails. By "fails" I mean that MVC uses the string editor for all fields (even if they are numbers) passing null as a model.
// this works correctly
#for (var i = 0; i < Model.Details.Count; i++)
{
<li>
#Html.EditorFor(m => m.Details[i].Name)
#Html.EditorFor(m => m.Details[i].Age)
</li>
}
// this doesn't work
#for (var i = 0; i < Model.Details.Count; i++)
{
<li>
#Html.Editor("Details[" + i +"].Name")
#Html.Editor("Details[" + i +"].Age")
</li>
}
I'm using ASP.NET Core 3.0 and didn't test this code against previous versions. For several reasons, I cannot use the EditorFor method so I'm stuck with this problem.
Any ideas?

Answer 1

Editor() HTML Helper method is for simple type view and EditorFor() HTML Helper method is for strongly type view to generate HTML elements based on the data type of the model object’s property.
The definition of Html.Editor:
// Summary:
// Returns HTML markup for the expression, using an editor template. The template
// is found using the expression's Microsoft.AspNetCore.Mvc.ModelBinding.ModelMetadata.
//
// Parameters:
// htmlHelper:
// The Microsoft.AspNetCore.Mvc.Rendering.IHtmlHelper instance this method extends.
//
// expression:
// Expression name, relative to the current model. May identify a single property
// or an System.Object that contains the properties to edit.
//
// Returns:
// A new Microsoft.AspNetCore.Html.IHtmlContent containing the <input> element(s).
//
// Remarks:
// For example the default System.Object editor template includes <label> and <input>
// elements for each property in the expression's value.
// Example expressions include string.Empty which identifies the current model and
// "prop" which identifies the current model's "prop" property.
// Custom templates are found under a EditorTemplates folder. The folder name is
// case-sensitive on case-sensitive file systems.
public static IHtmlContent Editor(this IHtmlHelper htmlHelper, string expression);
You could identify a single property for the expression of Editor Tag Helper like below :
#model MVC3_0.Models.Detail
<table>
<tr>
<td>Id</td>
<td>#Html.Editor("Id")</td>
</tr>
<tr>
<td>Name</td>
<td>#Html.Editor("Name")</td>
</tr>
<tr>
<td>Age</td>
<td>#Html.Editor("Age")</td>
</tr>
</table>
public IActionResult Index()
{
var model = new Detail { Id = 1, Name = "jack", Age = 12 };
return View(model);
}
Result:
There is a workaround that you could use TextBox or input instead
#for (var i = 0; i < Model.Details.Count; i++)
{
<li>
#Html.TextBox("Details[" + i + "].Name", Model.Details[i].Name, new { htmlAttributes = new { #class = "text-field" } })
#Html.TextBox("Details[" + i + "].Age", Model.Details[i].Age, new { htmlAttributes = new { #class = "text-field" } })
</li>
}
// input tag helper
#for (var i = 0; i < Model.Details.Count; i++)
{
<li>
<input asp-for="#Model.Details[i].Name" />
<input asp-for="#Model.Details[i].Age" />
</li>
}