A dynamic field for each database record

Question

I have a property called Productdevelopment where I have several functions and must assign a user to each function. I have an Editortemplate to return a list of users. I have to create a dynamic field for each function registered in the database and each field will use Editortemplate to list users. (as in the image below). I created a heavily typed Editortemplate (Functionsusuarios.cshtml) (@model ICollection<FuncaoUsuario>), that generates the fields, as in the image below, but I do not know what to do to return the values to the Model. I thought about using a hidden multiselect, but I’m finding it very complicated.

My class

public class FuncaoUsuario //Não mapeado
{
    public int IdFuncao { get; set; }
    public string Usuario { get; set; }
    public string DscFuncao { get; set; }
}

My field in View (Productdevelopment property)

public ICollection<FuncaoUsuario> ProductDevelopment { get; set; }

My Editortemplate -> Functionsusuarios.cshtml

@model ICollection<FuncaoUsuario>
@{
    var modelMetaData = this.ViewData.ModelMetadata;
    var propertyName = modelMetaData.PropertyName;    
}




@foreach (FuncaoUsuario item in this.Model)
{
    var id = "id" + Guid.NewGuid().ToString().Substring(0, 5);    
    List<SelectListItem> listValues = new List<SelectListItem>();
    if (!string.IsNullOrEmpty(item.Usuario))
    {
        listValues.Add(new SelectListItem { Selected = true, Text = item.Usuario, Value = item.Usuario });
    }     
    <div id="@id" class="field-middle">
        <h3>@String.Format(Html.LabelFor(model => model).ToString(), item.DscFuncao) :</h3>
        @Html.DropDownList("", listValues, new { id = "PD" + item.IdFuncao.ToString() })
    </div>
    <script language="javascript" type="text/javascript">
        $("#@id select")
            .turnAutoComplete("@Url.Action("UsersListJson", "Security")");
    </script> 
}


<select name="@propertyName" multiple="multiple" size=30 style='height: 100%;' >
@foreach (FuncaoUsuario item in this.Model)
{   
<option value="@item.IdFuncao">teste</option>
}
</select>

[EDITED]

I made the changes as below using Begincollectionitem

Models:

public partial class Modelo
{
    public ICollection<FuncaoUsuario> ProductDevelopment { get; set; }
    //Continua...
}
public class FuncaoUsuario 
{
    public int IdFuncao { get; set; }
    public string Usuario { get; set; }
    public string DscFuncao { get; set; }
}

Controller:

public ViewResultBase Editar(int id)
{
    Modelo model = this.Service.GetForEdit(this.IdEmpresa, id);
    return base.SwitchView(model);
}

View Principal:

 @model Modelo

    <div class="box-fields">
        @using (Ajax.BeginForm(
            this.DefaultActionEdit,
            "Modelo",
            new DefaultAjaxOptions()
        ))
        {      
@Html.EditorFor(i => i.ProductDevelopment) //precisa desta propriedade na view principal, pra nao dar o erro mencionado abaixo. E tem que remover o template Collection.cshtml.
            foreach (FuncaoUsuario userFunction in this.Model.ProductDevelopment)
            {
                Html.RenderPartial("_UsuarioFuncao", userFunction);
            }   

    //Mais coisas....
    }

Partial View:

@model FuncaoUsuario

@using (Html.BeginCollectionItem("ProductDevelopment")) 
{  

    List<SelectListItem> listValues = new List<SelectListItem>();
    if (!string.IsNullOrEmpty(this.Model.Usuario))
    {
        listValues.Add(new SelectListItem { Selected = true, Text = this.Model.Usuario, Value = this.Model.Usuario });
    }

    @Html.HiddenFor(x => x.IdFuncao)
    @Html.EditorFor(x => x.Usuario, "Usuario")    
}

Error found:

Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index 
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index

Source Error: 


Line 1:  @model FuncaoUsuario
Line 2:  
Line 3:  @using (Html.BeginCollectionItem("ProductDevelopment")) <- erro nesta linha.
Line 4:  {  

Answer 1

It is a classic case of the use of nuget pack BeginCollectionItem. It is not native to ASP.NET MVC or Razor. It needs to be installed.

I’ve answered several questions about. If necessary, please edit your question so I can make the appropriate additions in the answer.

---

EDIT

If there is this error:

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index

It’s because Begincollectionitem inserts a EditorTemplate called Collection.cshtml which may give some problems. It is recommended to delete it to define your Partial.

The exact location of this Template gets into Views\Shared\EditorTemplates\Collection.cshtml.