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

Question

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

我正在使用 ASP.NET 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 助手 (@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])
    }
}

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

更新

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