ASP.NET MVC，其视图具有动态输入数量

Question

好吧，这是一个复杂的问题，我对此很陌生，也许我什至不知道如何正确地提出这个问题。

我正在使用 ASP.NET MVC 构建应用程序。我有一个视图，其中包含一个表单，该表单具有一个文本框输入，要求用户为他们的遗嘱命名一个接收者。在输入下方，我想要一个按钮 ("Add another recipient")，用于向表单添加另一个输入。

以下是我使用 Javascript 进行模拟的方式（单击 "Yes"，然后单击 "Cash" 以查看我在说什么）：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 助手 (@Html.TextBoxFor) 并将每个输入绑定到模型中的属性，那么我不明白如何允许表单添加无限数量的输入字段

我四处搜索了动态视图的示例，但我发现的示例与响应模型更改的视图有关。我还没有找到涉及根据用户操作添加无限数量的输入字段的方法。

我知道这是一个很棘手的问题，但如果有人能帮助我指出正确的方向，我将不胜感激。预先感谢您对新手有耐心。

Answer 1

您所描述的场景让视图模型尖叫起来。即使像这样简单的一个也会有所帮助

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])
    }
}

这会将表单中的值绑定到 Model 对象，这将使事情变得更容易。然后您只需要确保您的视图使用 <input type="text" name="Recipients" /> 来捕获 post 中的 model 对象中的数据。我还建议尽最大努力使 input 名称属性与视图模型的大小写紧密匹配，以避免发生冲突

已更新

我包含了更多代码来举例说明如何将以前的收件人拉入界面

ASP.NET MVC，其视图具有动态输入数量

An ASP.NET MVC with a view with a dynamic number of inputs

javascript

forms

asp.net-mvc

html-helper

input

已更新