Having a bit of a hairy issue when submitting data over a jquery ajax call. Basically, form values of form fields which have been dynamically added to the screen into a tubular grid using jquery are not updating on a batch save command.
通过jquery ajax调用提交数据时遇到一些毛茸茸的问题。基本上,使用jquery动态添加到屏幕的管理网格的表单字段的表单值不会在批处理保存命令上更新。
Basically I have a grid listing which displays all current rows saved to the database with each column containing form fields. I then have a form at the top of the page, which is your typical add another detail form. You type your values, press "add" this is saved to the database via a jquery json ajax call, and your form data is added and reflected in a new row in the listings table. (this part works)
基本上我有一个网格列表,显示保存到数据库的所有当前行,每列包含表单字段。然后我在页面顶部有一个表单,这是您典型的添加另一个详细信息表单。键入值,按“添加”,通过jquery json ajax调用将其保存到数据库中,并添加表单数据并将其反映在listing表的新行中。 (这部分有效)
My problem lies with when you wish to change the form values within the newly added jquery table row. When the save button is pressed, only any of the already built table row's will be re-saved. Your dynamic row form data does not save. The update call uses jquery ajax and ASP.NET MVC model binding. On the "add" I am returning an asp.net mvc "partial view" to my jquery ajax response and it is being added to a grid listing table using $("#tablename tr:last").after(result).
我的问题在于您希望在新添加的jquery表行中更改表单值。按下保存按钮时,只会重新保存任何已构建的表格行。您的动态行表单数据不会保存。更新调用使用jquery ajax和ASP.NET MVC模型绑定。在“添加”中,我将一个asp.net mvc“局部视图”返回到我的jquery ajax响应,并使用$(“#tablename tr:last”)。after(result)将其添加到网格列表中。
What I have deduced already is, as said, the new dynamically added row does not update. I have an IList<Item> set returned in my MVC model binding list to my controller action method which contains the entire list of items, minus the newly created jquery dynamic-added form field rows. This is the problem and why when you perform a page refresh, the rows are back to the original form values entered on initial add.
我已经推断出,如上所述,新动态添加的行不会更新。我在我的MVC模型绑定列表中返回了一个IList
Any ideas why my IList<Item>'s would not include these dynamically added rows? Inspecting in Firebug they use the same naming convent in their name attribute and all should be fine.
我的IList
Graham.
Update 1 May 11:00 GMT+10: I do receive the values when changing the Model Binding from IList to FormCollection. I do not want to have to use FormCollection rather than model binding, but it begs the question if I can get it correctly through FormCol, why not IList model binder? I have compared the array entry to a working item, and they all fit the same criteria and values.
更新1月5日11:00 GMT + 10:我确实在将模型绑定从IList更改为FormCollection时收到了值。我不想使用FormCollection而不是模型绑定,但是如果我可以通过FormCol正确地获取它,那么它会引起问题,为什么不使用IList模型绑定器?我已将数组条目与工作项进行比较,它们都符合相同的标准和值。
3 个解决方案
#1
I'm not an ASP programmer, but I do a heck of a lot of jquery work. If I understand your problem correctly, your dynamically generated rows are not being bound to the callback functions that will perform your update operations.
我不是一个ASP程序员,但我做了很多jquery工作。如果我正确理解您的问题,则动态生成的行不会绑定到将执行更新操作的回调函数。
You can bind the dynamically generated elements to a callback by either using the jQuery 'live' function (as Wikidkaka was trying to tell you) or you can bind the newly created elements manually in the callback function that is fired when the ajax call returns.
您可以通过使用jQuery“live”函数(如Wikidkaka试图告诉您)将动态生成的元素绑定到回调,或者您可以在ajax调用返回时触发的回调函数中手动绑定新创建的元素。
I would recommend using the native live function that was added in (I believe) the latest release of jQuery. It will save you from having to write additional lines to manually bind the callbacks and makes code maintenance easier.
我建议使用在(我相信)最新版本的jQuery中添加的本机实时函数。它将使您不必编写额外的行来手动绑定回调并使代码维护更容易。
So change:
$('div.your-save-buttons').click(updateFunction);
to
$('div.your-save-buttons').live(updateFunction);
#2
Use the plugin livequery for what you are trying to do. You can find it here - http://docs.jquery.com/Plugins/livequery
使用插件livequery来做你想做的事情。你可以在这里找到它 - http://docs.jquery.com/Plugins/livequery
This does not work on most dynamically added elements:
这对大多数动态添加的元素不起作用:
$("select something").onSomeEvent("do something");
$(“选择某事”)。onSomeEvent(“做某事”);
But with livequery plugin you can make it work by changing your JS code to something like below:
但是使用livequery插件,您可以通过将JS代码更改为以下内容来使其工作:
$("select something").livequery('event name','do something');
$(“select something”)。livequery('event name','做某事');
#3
If the property on your Model is a list of integers, you can use IEnumerable<int> to get automatic model binding. This works both for an Action method whose parameter is an IEnumerable<int> and an Action method whose parameter is a Model that has a property which is an IEnumerable<int>. For example, like this:
如果Model上的属性是整数列表,则可以使用IEnumerable
<%= Html.Hidden("myField", 1) %>
<%= Html.Hidden("myField", 1) %>
and
public ActionResult Update(IEnumerable<int> myField) { }
or
public ActionResult Update(MyModel myModel) { }
public class MyModel {
public IEnumerable<int> myField { get; set; }
}
#1
I'm not an ASP programmer, but I do a heck of a lot of jquery work. If I understand your problem correctly, your dynamically generated rows are not being bound to the callback functions that will perform your update operations.
我不是一个ASP程序员,但我做了很多jquery工作。如果我正确理解您的问题,则动态生成的行不会绑定到将执行更新操作的回调函数。
You can bind the dynamically generated elements to a callback by either using the jQuery 'live' function (as Wikidkaka was trying to tell you) or you can bind the newly created elements manually in the callback function that is fired when the ajax call returns.
您可以通过使用jQuery“live”函数(如Wikidkaka试图告诉您)将动态生成的元素绑定到回调,或者您可以在ajax调用返回时触发的回调函数中手动绑定新创建的元素。
I would recommend using the native live function that was added in (I believe) the latest release of jQuery. It will save you from having to write additional lines to manually bind the callbacks and makes code maintenance easier.
我建议使用在(我相信)最新版本的jQuery中添加的本机实时函数。它将使您不必编写额外的行来手动绑定回调并使代码维护更容易。
So change:
$('div.your-save-buttons').click(updateFunction);
to
$('div.your-save-buttons').live(updateFunction);
#2
Use the plugin livequery for what you are trying to do. You can find it here - http://docs.jquery.com/Plugins/livequery
使用插件livequery来做你想做的事情。你可以在这里找到它 - http://docs.jquery.com/Plugins/livequery
This does not work on most dynamically added elements:
这对大多数动态添加的元素不起作用:
$("select something").onSomeEvent("do something");
$(“选择某事”)。onSomeEvent(“做某事”);
But with livequery plugin you can make it work by changing your JS code to something like below:
但是使用livequery插件,您可以通过将JS代码更改为以下内容来使其工作:
$("select something").livequery('event name','do something');
$(“select something”)。livequery('event name','做某事');
#3
If the property on your Model is a list of integers, you can use IEnumerable<int> to get automatic model binding. This works both for an Action method whose parameter is an IEnumerable<int> and an Action method whose parameter is a Model that has a property which is an IEnumerable<int>. For example, like this:
如果Model上的属性是整数列表,则可以使用IEnumerable
<%= Html.Hidden("myField", 1) %>
<%= Html.Hidden("myField", 1) %>
and
public ActionResult Update(IEnumerable<int> myField) { }
or
public ActionResult Update(MyModel myModel) { }
public class MyModel {
public IEnumerable<int> myField { get; set; }
}