MVC - Adding Item to List in Model on form-submit

Question

I'm trying to dynamically add items to a list and make these items show up in my controller after submitting, but right now I don't even get the existing list-items to show up.

I'm not 100% what the issue is, but it seems to have something to do with the partial view that is rendered for each item.

ViewModels :

public class UserGroupVM
{
    public int Id { get; set; }
    [Required]
    [Display(Name = "Usergruppe")]
    public string Name { get; set; }
    [Display(Name = "Beschreibung")]
    public string Description { get; set; }
    [Required]
    public Boolean IsGlobal { get; set; }
    public List<Employee_UserGroupVM> Employees { get; set; }
}

public class Employee_UserGroupVM
{
    public int Id { get; set; }
    [Display(Name = "Kennung")]
    public string SamAccountName { get; set; }
    [Display(Name = "Name")]
    public string LastnameFirstName { get; set; }
    [Display(Name = "Admin")]
    public bool IsAdmin { get; set; }
}

Form-View:

@model DAKCrmImport.Web.Models.UserGroupVM

@{
    ViewBag.Title = "_UserGroup";
}

@using (Html.BeginForm("Save", "UserGroup", FormMethod.Post, new { Id = "form-usergroup-add", novalidate = "false" }))
{
    <fieldset>
        <div class="container-form-clear">
            <a class='button form-clear' title='Formular leeren'>button clear</a>
        </div>
        @Html.HiddenFor(model => model.Id)
        @Html.LabelFor(model => model.Name, new { @class = "label req" })
        @Html.TextBoxFor(model => model.Name, new { @class = "input"})
        @Html.LabelFor(model => model.Description, new { @class = "label" })
        @Html.TextAreaFor(model => model.Description, new { @class = "input", rows = "3", cols = "25" })
        <br />

        <a class='button form-add' title='MA-Berechtigung hinzufügen' id="bt-employee-add">button employee-add</a>
        @for (int i = 0; i < Model.Employees.Count(); i++)
        {
            @Html.EditorFor(m => m.Employees[i]);
        }

        <input type="submit" name="submit" class="submit form-button" value="Speichern" id="bt-submit-usergroup" />
    </fieldset>
}

Partial View:

@model DAKCrmImport.Web.Models.Employee_UserGroupVM

@{
    ViewBag.Title = "_EmployeeList";
}
<div class="div-employee-add">
    <div class="container-right">
        <a class="button form-remove-employee" title="MA entfernen" id="bt-employee-delete">button ma-remove</a>
    </div>
    <div class="container-left">
        @Html.LabelFor(model => model.SamAccountName)
        @Html.TextBoxFor(model => model.SamAccountName, new { @class = "textbox-samaccountname" })
        @Html.TextBoxFor(model => model.LastnameFirstName, new { @class = "textbox-lastnamefirstname", disabled = "disabled" })
        @Html.LabelFor(model => model.IsAdmin)
        @Html.CheckBoxFor(model => model.IsAdmin, new { @class = "checkbox-isadmin" })
    </div>
</div>

Controller:

public virtual ActionResult BlankEmployeeRow()
{
    return PartialView("EditorTemplates/Employee_UserGroupVM", new Employee_UserGroupVM());
}
public virtual ActionResult Save(UserGroupVM usergroup)
{
    return null;
}

The only thing I noticed so far is that existing items Employees appear in the controller if I don't use a partial view and display its variables through indexing. Because I can't do any indexing in the partial view itself it doesn't work now. I have no clue how to fix it though and it's questionable whether new or edited items will turn up anyways.

I'd really appreciate a little help.

PS I know how to read the model via jQuery, but I want to use MVC's native form submit method wihout additional code.

[Update] I made an EditorTemplate out of my partial view and now the existring Employees get submitted, but additional employees still don't. Even though they appear in the markup ...

Adding new items via jquery/partial view:

$(document).on('click', '#bt-employee-add', function () {
    var lastDiv = $("[class~='div-employee-add']").first();
    var lastTextBox = $(lastDiv).find("[class~='textbox-lastnamefirstname']");

    var url = $("#EmployeeAdd").data('request-url');
    var params = null;

    if (lastTextBox.val() == "") {
        //Notification
    } else {
        $(getJSONfromController(url, params, null, true)).insertBefore($(".div-employee-add").first());
    }
});

Answer 1

Try this:

@Html.Partial("_EmployeeList", Model.Employees, new ViewDataDictionary
{
    TemplateInfo = new System.Web.Mvc.TemplateInfo { HtmlFieldPrefix = "Employees" }
})

The problem is the partial doesn't know the name of the list, so you have to specify it explicitly.

Answer 2

When you're using a simple ViewModel your data is not going to be dynamically updated as your page is not going to poll your server. It will only get the new data on refresh.

You'll either have to use a timer to poll or look into angular, knockout or ember.