jquery ajax呼び出しを介して動的テーブル行が更新されない
-
03-07-2019 - |
質問
jquery ajax呼び出しを介してデータを送信するときに、少々厄介な問題を抱えています。基本的に、jqueryを使用してスクリーンに動的に追加されたフォームフィールドのフォーム値は、バッチ保存コマンドで更新されません。
基本的に、データベースに保存されているすべての現在の行を表示するグリッドリストがあり、各列にはフォームフィールドが含まれています。次に、ページの上部にフォームを作成します。これは、通常の別の追加詳細フォームです。値を入力して、<!> quot; add <!> quot;を押します。これはjquery json ajax呼び出しを介してデータベースに保存され、フォームデータが追加され、リストテーブルの新しい行に反映されます。 (この部分は機能します)
問題は、新しく追加されたjqueryテーブルの行内でフォームの値を変更する場合にあります。保存ボタンを押すと、すでに構築されているテーブル行のいずれかのみが再保存されます。動的な行フォームデータは保存されませんしない。更新呼び出しは、jquery ajaxとASP.NET MVCモデルバインディングを使用します。 <!> quot; add <!> quot; asp.net mvc <!> quot; partial view <!> quot;を返しています。 jquery ajaxレスポンスに追加し、$("#tablename tr:last").after(result)
を使用してグリッドリストテーブルに追加しています。
すでに推測したとおり、動的に追加された新しい行は更新されません。 MVCモデルバインディングリストで、コントローラーアクションメソッドにIList<Item>
セットが返されます。これは、アイテムのリスト全体から、新しく作成されたjquery動的に追加されたフォームフィールド行を除いたものです。これが問題であり、ページの更新を実行すると、行は最初の追加時に入力された元のフォーム値に戻ります。
これらの動的に追加された行が私の<=>に含まれない理由は何ですか? Firebugで検査すると、name属性で同じ命名規則を使用しており、すべて問題ありません。
グラハム。
Update 1 May 11:00 GMT + 10:Model BindingをIListからFormCollectionに変更するときに値を受け取ります。モデルバインディングではなくFormCollectionを使用する必要はありませんが、FormColを介して正しく取得できるかどうか、なぜIListモデルバインダーを使用しないのでしょうか?配列エントリを作業項目と比較しましたが、すべて同じ基準と値に適合しています。
解決
私はASPプログラマーではありませんが、多くのjquery作業を行っています。問題を正しく理解している場合、動的に生成された行は、更新操作を実行するコールバック関数にバインドされていません。
動的に生成された要素をコールバックにバインドするには、jQueryの「ライブ」関数を使用するか(Wikidkakaが伝えようとしているように)、ajax呼び出しが戻ります。
jQueryの最新リリースに追加された(と思われる)ネイティブのライブ関数を使用することをお勧めします。コールバックを手動でバインドするために追加の行を記述する必要がなくなり、コードのメンテナンスが容易になります。
変更:
$('div.your-save-buttons').click(updateFunction);
to
$('div.your-save-buttons').live(updateFunction);
他のヒント
やろうとしていることのためにプラグインlivequeryを使用します。ここで見つけることができます- http://docs.jquery.com/Plugins/livequery
これは、ほとんどの動的に追加された要素では機能しません:
$("select something").onSomeEvent("do something");
ただし、livequeryプラグインを使用すると、JSコードを次のように変更することで機能させることができます。
$("select something").livequery('event name','do something');
モデルのプロパティが整数のリストである場合、IEnumerable<int>
を使用して自動モデルバインディングを取得できます。これは、パラメータが<=>であるActionメソッドと、パラメータが<=>であるプロパティを持つモデルであるActionメソッドの両方で機能します。たとえば、次のようになります。
<%= Html.Hidden("myField", 1) %>
<%= Html.Hidden("myField", 1) %>
and
public ActionResult Update(IEnumerable<int> myField) { }
または
public ActionResult Update(MyModel myModel) { }
public class MyModel {
public IEnumerable<int> myField { get; set; }
}