一个ASP.带有带有动态输入数的视图的.NET MVC

好吧，这是一个复杂的问题，我是新手，也许我甚至不知道如何正确地问。

我正在使用ASP构建一个应用程序。净MVC。我有一个视图，其中包含一个表单，该表单有一个文本框输入，要求用户将接收者命名为遗嘱的遗产。在输入下面，我想要一个按钮("添加另一个收件人")，用于向表单添加另一个输入。

下面是我如何使用Javascript模拟这一点(点击"是"，然后点击"现金"，看看我在说什么):https://jsfiddle.net/cinerobert/409k27ot/7/

<p>Would you like to leave specific gift in your will?</p>
<p>
  <button onclick="q1AnswerYes()">Yes</button>
  <button onclick="q1AnswerNo()">No</button>
</p>
<br />
<!-- If answer to Q1 is Yes show this block -->
<div id="q1AnswerYesBlock" style="display:none; text-align:center;
margin:auto;">
  <div>What specific gifts would you like to leave?</div>
  <hr>
  <div>
    <button onclick="q2AnswerCash('q2AnswerCashDisp')">Cash</button>
    <button>Car</button>
    <button>Real Estate</button>
    <button>Jewelry</button>
    <button>Other</button>
  </div>
  <div id="q2AnswerCashDisp">
    <!-- Recipient forms get added here -->
  </div>
  <div style="text-align:center;
margin:auto; display:inline">
    <button id="addCashRecipient" style="display:none" onclick="addCashRecipientForm('q2AnswerCashDisp')">Add another recipient</button>
  </div>
</div>
<!-- If answer to Q1 is No show this block -->
<div id="q1AnswerNoBlock" style="display:none">
  <p>Some other crap</p>
</div>
<div id="testFormHTML" style="display:none">
  <form id="testFormId" method="get" style="border-syle:none">
    <fieldset id="fieldsetid" style="border-style:none">
      <div class="formPrompt">
        Amount:
      </div>
      <input type="text">
      <div class="formPrompt">
        Recipient:
      </div>
      <input onblur="submit()" type="text" name="recipient">
      <input style="display:none" class="testFormParamInputId" name="testFormParam" value="">
      <br>
      <br>
    </fieldset>
  </form>
</div>
<script>
var cashRecipientNum = 1;
function q1AnswerYes() {
  document.getElementById("q1AnswerYesBlock").style.display = "block";
  document.getElementById("q1AnswerNoBlock").style.display = "none";
}
function q1AnswerNo() {
  document.getElementById("q1AnswerYesBlock").style.display = "none";
  document.getElementById("q1AnswerNoBlock").style.display = "block";
}
function q2AnswerCash(blockId) {
  if (cashRecipientNum == 1) {
    addForm(blockId, "testForm", cashRecipientNum++);
    document.getElementById("addCashRecipient").style = "display:inline";
  };
}
function addCashRecipientForm(blockId) {
  addForm(blockId, "testForm", cashRecipientNum++);
}
// Function to add a new form with unique action argument to the document.
function addForm(blockId, formArg, numInstance) {
  var formHTML = formArg + "HTML";
  var formId = formArg + "Id";
  var formParamInputId = formArg + "ParamInputId";
  var newFormId = formArg + "Id" + numInstance;
  var div = document.getElementById(formId),
    clone = div.cloneNode(true); // true means clone all childNodes and all eventhandlers
  clone.id = newFormId;
  clone.style = "border-style:none";
  document.getElementById(blockId).appendChild(clone);
  var x = document.getElementById(newFormId).getElementsByClassName(formParamInputId);
  x[0].value = numInstance;
  console.log(x[0].class);
  console.log("here");
}    
</script>

我不明白的是:

• 因为我使用硬编码的html表单(使用标签)而不是html助手(如@Html.TextBoxFor)，每个输入都不绑定到模型中的任何东西。我可以使用FormCollection读取输入，但是当表单提交时，我不知道如何使用用户输入的值重新发布表单。

• 如果我使用html helper (@Html.TextBoxFor)并将每个输入绑定到模型中的属性，那么我不明白如何允许表单添加无限数量的输入字段

我已经搜索了动态视图的例子，但我发现的例子都与响应模型变化的视图有关。我还没有发现一个涉及到根据用户操作添加无限数量的输入字段。

我知道这个问题有点难懂，但如果有人能帮我指出正确的方向，我将非常感激。提前感谢你对一个新手的耐心。

public class WillRecipientsViewModel
{
    public List<string> Recipients { get; set; }
}

// Controller
public ActionResult SetWillRecipients()
{
    // Added this to force at least 1 text box into the view
    WillRecipientsViewModel model = new WillRecipientsViewModel
    {
        Recipients = new List<string> { "" };
    };
    return View(model);
}
[HttpPost]
public ActionResult SetWillRecipients(WillRecipientsViewModel model)
{
    // Business logic
    // Go back to the view if an error occurs
    return View(model);
}
// View
@model WillRecipientsViewModel
@using(Html.BeginForm("SetWillRecipients"))
{
    @Html.DisplayFor(model => model.Recipients)
    for (int i = 0; i < Model.Recipients.Count; i++)
    {
        // Generate the textboxes for any values that were previously submitted
        Html.InputFor(model => model.Recipients[i])
    }
}