将 javascript 动态添加的元素提交到控制器方法，如 Stackoverflow

Submit javascript dynamically added elements to controller method like Stackoverflow

本文关键字：方法 控制器 Stackoverflow 提交 动态 javascript 添加 元素      更新时间：2023-09-26

简单地说：我想让用户在JS中选择一些标签并将其提交给我的控制器。以下是我的建议：

  • 使用命名约定为每个插入的标签创建一个隐藏输入：Tag123（123 = 此标签的唯一标识符），并在 my action 方法中循环访问FormCollection以找出选择了哪些标签。缺点很明显：使用 FormCollection 而不是ViewModel并遍历FormCollection来获取我想要的数据对我来说似乎很糟糕。
  • 创建一个隐藏的输入，并将每个选定的标签附加到其中。这在删除标签时可能会变得混乱，因为我应该从输入的当前值中找到正确的 id 并将其删除。但是Pro是我只有一个元素，可以将其放在视图模型中以在控制器操作中访问它。
  • 好奇是否有人知道SO是如何做到的。他们现在有点定义标准。很想知道他们是怎么做到的。

谢谢。

我有一个网站正在运行，可以选择添加标签，就像 SO 一样。
然而，我解决这个问题的方法导致我为每个添加的标签创建一个输入字段，并在每次添加新输入时递增一个 javascript 索引变量，然后利用 ViewModel 绑定IList<TagDTO> tags { get; set; }（无论如何，表单往往会随着时间的推移而变得复杂，所以视图模型几乎总是一个好方法）。以下是在页面中创建的 html 隐藏输入的示例：

name=tags.Index, value=0
name=tags[0].tagid, value=201
name=tags.Index, value=2
name=tags[2].tagid, value=307

这对我来说有一个很大的优势：国际化标签，并可能不允许不存在的标签。
我的意思是每个标签都有一个 ID，在数据库中的"标签"表中，我支持的每种语言都有一列用于此标签的名称。如： 

tagid | name_ptBR   | name_en
 201  | animais     | animals
 307  | educacional | educational

这只是我解决问题的方法，但到目前为止效果很好。

Stack Overflow 只有一个文本输入字段，通过 JavaScript 的自动完成功能增强了该字段。当它被发送到服务器时，字段被空格分割，相应的标签按名称查找。我建议您这样做，因为它是所有选项中最容易访问的。

相关文章：