Question

我要求动态填充多个任务以响应用户添加任务＆＃39;按钮。我不知道用户将创建多少任务，并且不希望使用隐藏字段设置最大数量，因为这对数据库存储空间来说效率低。

可以将任务视为注释的子元素，并将其存储在单独的表中。我已经设法在视图上显示多个任务，但我对前端开发的信心不足，并且不确定如何在不调用回发的情况下添加输入字段，从而进入＆＃39;中流保存＆＃39;境..

<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来满足此要求，但我不确定如何在表单中实现这一点以及控制器和最终模型可以如何读取它？

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

Answer 1

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

首先，如果我很了解你，你就有了构建表单的视图，作为客户端交互的一部分，你需要注入依赖于表单主体的元素（通常作为一对多的关系）。我会打电话给那些＆＃34;子表格＆＃34;在这个答案中。

你需要：

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

B）将最终数据发送到服务器的控制器，以便数据可以保存到数据库中。

我对这种情况的处理方法是尝试管理客户端中的所有客户端交互，仅在用户推送＆＃34; Save＆＃34;之后发送最终数据。按钮。

显然......这对于每种情况都无效，因为有时特定的要求可能会使这个解决方案不被推荐。

对于客户部分：

我通过标准视图以正常方式构建表单的核心，通常我会放置特定的容器来注入＆＃34; dinamyc＆＃34;数据。

在＆＃34;添加任务＆＃34;按钮我添加一个监听器，为子窗体的一个元素创建HTML并将其附加到容器。通常这段代码包含一个删除按钮，以便从整个DOM中删除它。我也有一个倾听者来管理这些互动。

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

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

当您的用户点击＆＃34;保存＆＃34;按钮，捕获事件，然后在将数据发送回服务器之前做出这两件事：

1）遍历您的子表单结构，读取此时包含的信息，并将其存储在客户端数据结构（我之前参考的JSON对象）中。现在，您有一个JSON对象，其中包含所有子表单信息。

2）对其进行字符串化并将其存储在表单中发送的隐藏文本组件中。你所有的＆＃34;子表格＆＃34;字段可以在表单之外，因为它们不需要发送，信息在＆＃34;类实例中返回到服务器＆＃34;作为JSON结构。

在服务器中：

当您的控制器收到您的表单数据时，会有一个字段存储一个字符串，表示您的用户通过＆＃34;子表单发送的整个信息＆＃34;。

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

请记住，在这个包中，您不仅要存储添加的元素，还要包含自上次编辑以来已更改的元素，因此您可能需要在数据库中查找它们并进行修改。 / p>

这是一个充满文字的墙，而且理解这个想法可能不像我想的那么清楚，所以请随意问你是否理解某些东西或那里是任何不够清楚的事情。

为表单创建动态输入

1 个答案: