重复表单的 AJAX 保存答案

【问题标题】：AJAX saving with duplicated forms重复表单的 AJAX 保存
【发布时间】：2021-08-16 22:23:26
【问题描述】：

信息和代码：

我正在开发一个 asp.NET 代码 Web 应用程序。我的 UI 允许用户通过输入表单来创建动态数量的对象。因此，可以同时存在多个相同的形式。

例如，假设存在以下许多基本形式：

<div class="Text example div">    
    <div class="form-group">
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

当“名称”字段发生更改时，我想使用 ajax 保存此对象，使用如下内容：

   $("#Name").change(function () {
        //Do stuff
    });

ajax 应该将对象保存到数据库中，并且会有视觉上的变化，在本例中由代码 sn-p 中的“文本示例 div”表示。问题是，由于此 UI 的动态特性，技术上存在许多#Name。我想确保我不仅要保存预期的文本，而且能够调整与它们相关的适当文本，而不是更改所有文本。

请记住，这些 div 是通过复制基本 div 动态生成的，因此它们都以相同的信息开头。

我尝试过的：

我曾尝试创建循环以在创建时更改所有对象的 ID，但每次都必须这样做并考虑到这使得代码非常笨拙，所以我希望有更好的选择。

我已经尝试寻找方法来获取更改后的#Name 对象的父对象

注意：我已尝试强硬地解释和演示该问题，如果您需要更多信息，我将很乐意尽我所能提供帮助

【问题讨论】：

标签： javascript ajax asp.net-core asp.net-web-api asp.net-ajax

【解决方案1】：

动态 AJAX 和事件委托：

鉴于相关 div 的动态特性，原始 AJAX 将不会应用于它们。要解决此问题，请将您希望拥有 ajax 侦听器的所有 dom 放入各种容器中（例如：具有 id: 容器的 div）。

从这里，将 AJAX 选择设置为目标容器，并使用“on”功能搜索您需要的对象的类/ID。在上面的帖子中，它看起来像这样：

$("#container").on("change", '#Name', function () {
     //do something 
});

其中更改应替换为您要处理的操作，名称应替换为您要查找的 dom 的 Id/类。如果有人需要这方面的更多信息，请查看关于 AJAX 或 JQuery 的“事件委托”。

获取特定项目：

为了确保您获得正确的对象（如果它们具有相同或相似的 ID/类名）（这是一种不鼓励的做法，请尽量避免），您可以查询 $(this) 以获取已更改。

如果需要，您可以使用它作为基础来获取周围的对象（例如，在嵌套 div 的示例中。如果需要向下，可以通过 children 数组或 childNode 完成，如果需要，可以通过 parentNode上去等等。还有其他方式，比如查询选择器，这只是一个想法。

针对这种情况的提示，虽然在实践中可能根据设置实现起来很复杂，但在问题中描述的节点的重复上，更改相关部分的 id 以确保唯一性。

【讨论】：