Comment lier correctement les champs ajoutés dynamiquement à un modèle à l'aide de Html.BeginCollectionItem ?

Collection de transmission de vues partielles à l'aide de l'assistant Html.BeginCollectionItem

Problème

Dans un projet utilisant l'assistant Html.BeginCollectionItem, de nouveaux champs générés par JavaScript étaient ne lie pas le modèle lors de la soumission du formulaire. De plus, l'assistant BeginCollectionItem n'a pas rendu les balises masquées pour les nouveaux champs.

Solution

1. Créer un modèle de vue :

Définissez un modèle de vue (par exemple, CashRecipientVM) pour représenter les données à modifier, avec les annotations de données appropriées.

2. Créer une vue partielle :

Créez une vue partielle (_Recipient.cshtml) à l'aide de l'assistant BeginCollectionItem, comprenant les étiquettes nécessaires, les zones de texte et un bouton de suppression.

3 . Implémentez une méthode pour renvoyer la vue partielle :

Implémentez une méthode dans le contrôleur pour renvoyer la vue partielle (par exemple, Destinataire()).

4. Mettre à jour la méthode GET :

Dans la méthode GET de la vue principale, créez une liste initiale de modèles de vue.

5. Mettre à jour la vue principale :

Dans la vue principale, utilisez une boucle foreach pour afficher les objets existants et ajoutez la vue partielle à l'aide de l'assistant BeginCollectionItem.

6. Implémentez JavaScript pour ajouter des éléments :

Écrivez du JavaScript pour ajouter le code HTML d'un nouveau modèle de vue au formulaire en cliquant sur un bouton.

7. Implémentez JavaScript pour supprimer des éléments :

Écrivez du JavaScript pour supprimer un élément en cliquant sur le bouton Supprimer, en effectuant une requête AJAX appropriée au serveur.

8. Mettre à jour la méthode POST :

Mettez à jour le formulaire pour publier vers une méthode recevant une collection de modèles de vue (par exemple, Create(IEnumerable destinataires)).

Notes supplémentaires :

• Assurez-vous que le script permettant d'ajouter des éléments utilise l'URL correcte pour la méthode Destinataire.
• Utilisez des annotations de données pour valider les données côté client.
• Pour améliorer les performances, envisagez d'utiliser un framework knockout.js ou MVVM au lieu de JavaScript pour les données reliure.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!