Uma Vista Parcial passando uma coleção usando o auxiliar Html.BeginCollectionItem

Fiz um pequeno projeto para entender a resposta de Stephen Muecke aqui:Enviar a mesma Vista Parcial chamada dados várias vezes para o controlador?

Quase tudo funciona. O javascript adiciona novos campos da Vista parcial, e posso dizer que eles estão vinculados ao modelo pelos valores "temp" inseridos pelo método do controlador para a vista parcial.

No entanto, quando envio os novos campos, o método AddRecord () lança uma exceção, mostrando que o modelo não está sendo passado ("Referência de objeto não definida para uma instância de um objeto").

Além disso, quando visualizo a origem da página, o auxiliar BeginCollectionItem está inserindo uma marca oculta como deveria em torno da tabela na visualização principal que exibe registros preexistentes, mas não em torno dos novos campos adicionados pelo javascript.

O que estou fazendo errado? Eu sou muito novo nisso, obrigado por sua paciência!

Minha visão principal:

@model IEnumerable<DynamicForm.Models.CashRecipient>

@using (Html.BeginForm("AddDetail", "CashRecipients", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    <div id="CSQGroup">
    </div>
}

<div>
    <input type="button" value="Add Field" id="addField" onclick="addFieldss()" />
</div>

<script>
    function addFieldss()
    {   
        //alert("ajax call");
        $.ajax({
            url: '@Url.Content("~/CashRecipients/RecipientForm")',
            type: 'GET',
            success:function(result) {
                //alert("Success");
                var newDiv = document.createElement("div"); 
                var newContent = document.createTextNode("Hi there and greetings!"); 
                newDiv.appendChild(newContent);  
                newDiv.innerHTML = result;
                var currentDiv = document.getElementById("div1");  
                document.getElementById("CSQGroup").appendChild(newDiv);
            },
            error: function(result) {
                alert("Failure");
            }
        });
    }
</script>

Minha visão parcial:

@model DynamicForm.Models.CashRecipient
@using HtmlHelpers.BeginCollectionItem

@using (Html.BeginCollectionItem("recipients"))
{
    <div class="editor-field">
        @Html.LabelFor(model => model.Id)
        @Html.LabelFor(model => model.cashAmount)
        @Html.TextBoxFor(model => model.cashAmount)
        @Html.LabelFor(model => model.recipientName)
        @Html.TextBoxFor(model => model.recipientName)
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>
}

Meu modelo:

public class CashRecipient
{
    public int Id { get; set; }
    public string cashAmount { get; set; }
    public string recipientName { get; set; }  
}

No meu controlador:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult AddDetail([Bind(Include = "Id,cashAmount,recpientName")] IEnumerable<CashRecipient> cashRecipient)
{
    if (ModelState.IsValid)
    {
        foreach (CashRecipient p in cashRecipient) {
            db.CashRecipients.Add(p);
        }
        db.SaveChanges();
        return RedirectToAction("Index");

    }

    return View(cashRecipient);
}

public ActionResult RecipientForm()
{
    var data = new CashRecipient();
    data.cashAmount = "temp";
    data.recipientName = "temp";
    return PartialView(data);
}

questionAnswers(1)

yourAnswerToTheQuestion