Html.BeginCollectionItem を使用して動的に追加されたフィールドをモデルに適切にバインドする方法

Html.BeginCollectionItem ヘルパーを使用してコレクションを渡す部分ビュー

問題

Html.BeginCollectionItem ヘルパーを利用するプロジェクトで、JavaScript によって生成された新しいフィールドがフォームの送信中にモデルにバインドされません。さらに、BeginCollectionItem ヘルパーは、新しいフィールドの非表示タグをレンダリングしませんでした。

Solution

1。ビュー モデルの作成:

適切なデータ注釈を付けて、編集するデータを表すビュー モデル (例: CashRecipientVM) を定義します。

2.部分ビューの作成:

BeginCollectionItem ヘルパーを使用して、必要なラベル、テキスト ボックス、削除ボタンを含む部分ビュー (_Recipient.cshtml) を作成します。

3 。部分ビューを返すメソッドの実装:

部分ビューを返すメソッド (例: Recipient()) をコントローラーに実装します。

4. GET メソッドの更新:

メイン ビューの GET メソッドで、ビュー モデルの初期リストを作成します。

5.メイン ビューの更新:

メイン ビューで、foreach ループを使用して既存のオブジェクトを表示し、BeginCollectionItem ヘルパーを使用して部分ビューを追加します。

6.項目を追加するための JavaScript の実装:

ボタンをクリックしたときに新しいビュー モデルの HTML をフォームに追加する JavaScript を記述します。

7.項目を削除するための JavaScript を実装する:

削除ボタンをクリックしたときに項目を削除する JavaScript を記述し、サーバーに対して適切な AJAX リクエストを作成します。

8. POST メソッドの更新:

ビュー モデルのコレクションを受け取るメソッドにポストバックするようにフォームを更新します (例: Create(IEnumerable 受信者))。

追加メモ:

• スクリプトを確認してください項目を追加するには、受信者メソッドの正しい URL を使用します。
• データ アノテーションを使用して、クライアント側でデータを検証します。
• パフォーマンスを向上させるには、代わりに、knockout.js または MVVM フレームワークの使用を検討してください。データ バインディング用の JavaScript 。

以上がHtml.BeginCollectionItem を使用して動的に追加されたフィールドをモデルに適切にバインドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。