Html.BeginCollectionItem を使用して部分ビューのコレクションを動的に管理する方法

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

部分ビュー内でエンティティのコレクションを動的に作成して送信することができます。 Html.BeginCollectionItem ヘルパーを使用して実現されます。このアプローチを適切に実装する方法は次のとおりです。

ステップ 1: 個別の View Model を作成する

編集するデータを表す新しい View Model を導入します。データ型と検証属性が要件と一致していることを確認します。

ステップ 2: 部分ビューを実装する

Html.BeginCollectionItem ヘルパーを使用して部分ビューを作成し、マークアップ。コレクション内の各項目の入力フィールド、検証メッセージ、ボタンを忘れずに含めてください。

ステップ 3: 部分ビューを返すメソッドを追加します

コントローラー内、部分ビューを返すメソッドを定義します。このメソッドは、View Model の新しいインスタンスをインスタンス化し、それを部分ビューに渡す必要があります。

ステップ 4: メインの GET メソッドを設定する

コレクションを初期化するIEnumerable パラメーターを受け入れる GET アクション メソッドでモデルを表示します。このコレクションには、必要に応じて既存のエンティティを事前に取り込むことができます。

ステップ 5: メイン ビューを作成する

メイン ビューは Html.BeginForm ヘルパーを使用し、部分ビューをレンダリングします。コレクション内の各アイテムごとに。また、項目を動的に追加および削除するためのボタンも含まれています。

ステップ 6: 動的スクリプトを追加する

JavaScript を組み込み、AJAX リクエストをトリガーして項目の動的な追加を処理し、返されたマークアップを DOM に追加します。

ステップ 7: セットアップ削除スクリプト

項目の削除を処理する JavaScript を実装し、ユーザーがコレクションから不要なエンティティを削除できるようにします。

ステップ 8: フォーム POST アクションを定義する

ポストされたビューモデルのコレクションを受け取るために、コントローラー内に対応する POST アクション メソッドを作成します。フォームから戻ります。このメソッドでは、必要に応じてデータを処理して保存できます。

これらの手順に従うことで、部分ビュー内でエンティティのコレクションを効果的に作成して送信でき、Web でのユーザーフレンドリーで効率的なデータ入力エクスペリエンスを提供できます。アプリケーション。

以上がHtml.BeginCollectionItem を使用して部分ビューのコレクションを動的に管理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。