动态表行未通过 jquery ajax 调用更新

Question

通过 jquery ajax 调用提交数据时遇到一些棘手的问题。 基本上，使用 jquery动态添加到屏幕上的管状网格中的表单字段的表单值不会在批量保存命令上更新。

基本上我有一个网格列表，它显示保存到数据库的所有当前行，每列包含表单字段。 然后，我在页面顶部有一个表单，这是典型的添加另一个详细信息表单。 您键入您的值，按“添加”，这将通过 jquery json ajax 调用保存到数据库，并且您的表单数据将被添加并反映在列表中的新行中。 （这部分有效）

我的问题在于当您希望更改新添加的 jquery 表行中的表单值时。 当按下保存按钮时，只有任何已构建的表行将被重新保存。 您的动态行表单数据不会保存。 更新调用使用 jquery ajax 和 ASP.NET MVC 模型绑定。 在“添加”上，我将 asp.net mvc“部分视图”返回到我的 jquery ajax 响应，并使用 $("#tablename tr:last").after(result) 将其添加到网格列表中）。

正如我所说，我已经推断出，新的动态添加的行不会更新。 我的 MVC 模型绑定列表中有一个 IList 集返回到我的控制器操作方法，其中包含整个项目列表，减去新创建的 jquery 动态添加的表单字段行。 这就是问题所在，也是为什么当您执行页面刷新时，行会返回到初始添加时输入的原始表单值。

知道为什么我的 IList 不包含这些动态添加的行吗？ 在 Firebug 中检查，它们在名称属性中使用相同的命名约定，一切都应该没问题。

格雷厄姆.

5 月 1 日 11:00 GMT+10 更新：将模型绑定从 IList 更改为 FormCollection 时，我确实收到了这些值。 我不想使用 FormCollection 而不是模型绑定，但它引出了一个问题，如果我可以通过 FormCol 正确获取它，为什么不使用 IList 模型绑定器呢？ 我已将数组条目与工作项进行了比较，它们都符合相同的标准和值。

Answer 1

我不是 ASP 程序员，但我做了很多 jquery 工作。 如果我正确理解您的问题，则动态生成的行不会绑定到将执行更新操作的回调函数。

您可以使用 jQuery“live”函数（正如 Wikidkaka 试图告诉您的那样）将动态生成的元素绑定到回调，也可以在 ajax 调用返回时触发的回调函数中手动绑定新创建的元素。

我建议使用（我相信）最新版本的 jQuery 中添加的本机 live 函数。 它将使您不必编写额外的行来手动绑定回调，并使代码维护更容易。

所以改变

$('div.your-save-buttons').click(updateFunction);

：

$('div.your-save-buttons').live(updateFunction);

Answer 2

使用插件 livequery 来完成您想要做的事情。 您可以在这里找到它 - http://docs.jquery.com/Plugins/livequery

这不适用于大多数动态添加的元素：


$("选择某事").onSomeEvent("做某事");


但是使用 livequery 插件，您可以通过将 JS 代码更改为如下所示来使其工作：


$("选择某事").livequery('事件名称','做某事');


Answer 3

如果模型上的属性是整数列表，则可以使用 IEnumerable来获取自动模型绑定。 这适用于参数为 IEnumerable 的 Action 方法和参数为具有 IEnumerable 属性的 Model 的 Action 方法。 例如，像这样：

<%= Html.Hidden("myField", 1) %>
<%= Html.Hidden("myField", 1) %>

和

public ActionResult Update(IEnumerable<int> myField) { }

或

public ActionResult Update(MyModel myModel) { }
public class MyModel {
    public IEnumerable<int> myField { get; set; }
}