为表单创建动态输入答案

【问题标题】：Creating a dynamic input for a form为表单创建动态输入
【发布时间】：2017-05-21 11:49:47
【问题描述】：

我需要动态填充多个任务以响应用户的“添加任务”按钮。我不知道用户将创建多少任务，并且不希望使用隐藏字段设置最大数量，因为这对于数据库存储空间而言效率低下。

可以将任务视为笔记的子元素，并存储在单独的表格中。我已经设法在视图上显示多个任务，但我对前端开发不太自信，并且不确定如何在不调用回发的情况下添加输入字段，从而进入“中流保存”领域。 .

<html>
<div class="container">
  <!-- @using(Html.BeginForm()) { -->
  <div>
    <label asp-for="Note">Note</label>
    <input id="Note" />
    <span asp-validation-for="Note"></span>
    <label asp-for="Task">Task</label>
    <input id="Task" />
    <span asp-validation-for="Task"></span>
  </div>
  <div>
    <button type="button">Add Task</button>
    <input type="submit" value="Save" />
  </div>
  <!-- } -->
</div>

</html>

我还制作了一个小的 jQuery 函数，可以在“添加任务”按钮上创建任务输入，但在将其连接到控制器/模型时收效甚微。

我已经推荐了带有 JSON 的 AJAX 来解决此要求，但我不确定如何在表单中实现它，以及控制器和最终模型如何读取它？

如果它更适合我的解决方案，我愿意设计替代方案。

【问题讨论】：

标签： c# jquery asp.net-core asp.net-core-mvc asp.net-core-webapi

【解决方案1】：

好的，我将在此尝试解释我通常用于解决此类问题的方法，经过一段时间的开发不同的应用程序，它最终成为我的最爱之一。

首先，如果我对您的理解很好，您有一个构建表单的视图，作为客户端交互的一部分，您需要注入取决于表单主要实体的元素（通常作为一对多关系）。我会在这个答案中调用那些“子表单”。

你需要：

A) 管理客户端与添加/修改/替换的元素的交互

B) 将最终数据发送到服务器的控制器，以便将数据持久化到数据库中。

我对这种情况的处理方法是尝试管理客户端中的所有客户端交互，仅在用户按下“保存”按钮后发送最终数据。

显然...这并非对所有情况都有效，因为有时特定要求可能会导致不推荐使用此解决方案。

对于客户端部分：

我以常规方式构建表单的核心，通过标准视图，通常我放置特定的容器来在那里注入“动态”数据的信息。

在“添加任务”按钮上，我添加了一个侦听器，它为子表单的一个元素创建 HTML 并将其附加到容器中。通常此代码包含一个删除按钮，以将其从整个 DOM 中删除。我还有一个监听器来管理这些交互。

好的...所以您现在有了一个表单，其中一些按钮可以添加和删除代表子表单的各个元素的小部分代码。

在您的客户端代码中包含一个表示子表单元素列表的数据结构（我通常使用 JSON 对象）。

当您的用户点击“保存”按钮时，捕获事件并在将数据发送回服务器之前完成以下两件事：

遍历您的子表单结构，读取此时包含的信息并将其存储在您的客户端数据结构（我之前提到的 JSON 对象）中。现在您有了一个包含所有子表单信息的 JSON 对象。
对其进行字符串化并将其存储在表单中发送的隐藏文本组件中。您的所有“子表单”字段都可以在表单之外，因为它们不需要发送，信息会以 JSON 结构的“类实例”返回服务器。

在服务器中：

当您的控制器收到您的表单数据时，将有一个字段存储一个字符串，该字符串表示您的用户通过“子表单”发送的全部信息。

现在您只需要获取此信息并以您喜欢的方式管理它。例如，您可以设计一个类来加载此类信息并通过常用的持久性引擎将其发送到数据库。

请记住，在此包中，您不仅存储添加的元素，还存储自上次编辑以来已更改的元素，因此您可能必须在数据库中查找并修改它们。

这是一堵文字墙，理解这个想法可能不如我想的那么清楚，所以如果你有什么不明白的地方，或者还有什么不够清楚的地方，请随时询问。

【讨论】：