Dans MVC4, comment enregistrer plusieurs modifications de ligne simultanément?

Vous pouvez utiliser un EditorTemplates pour cela. L’exemple ci-dessous montre l’exemple de publication de formulaire normal. Vous pouvez l’ajaxifier si nécessaire en utilisant la méthode serialize et en envoyant des valeurs de formulaire.

En supposant que vous deviez modifier la liste des noms d’étudiants pour un cours. Créons donc quelques modèles de vue pour cela

 public class Course { public int ID { set;get;} public ssortingng CourseName { set;get;} public List Students { set;get;} public Course() { Students=new List(); } } public class Student { public int ID { set;get;} public ssortingng FirstName { set;get;} } 

Désormais, dans votre méthode d’action GET , vous créez un object de notre modèle de vue, initialisez la collection Students et l’envoyez à notre vue fortement typée.

 public ActionResult StudentList() { Course courseVM=new Course(); courseVM.CourseName="Some course from your DB here"; //Hard coded for demo. You may replace this with DB data. courseVM.Students.Add(new Student { ID=1, FirstName="Jon" }); courseVM.Students.Add(new Student { ID=2, FirstName="Scott" }); return View(courseVM); } 

Créez maintenant un dossier appelé EditorTemplates sous Views / YourControllerName . Créez ensuite une nouvelle vue sous Student.cshtml avec le contenu ci-dessous.

 @model Student @{ Layout = null; }   @Html.HiddenFor(x => x.ID) @Html.TextBoxFor(x => x.FirstName )   

Maintenant, dans notre vue principale (StudentList.cshtml), utilisez la méthode d’aide HTML EditorTemplate pour amener cette vue.

 @model Course 
@Model.CourseName
 @using(Html.BeginForm()) {  @Html.EditorFor(x=>x.Students)   } 

Cela amènera toute l’interface utilisateur avec chacun des noms d’étudiants dans une zone de texte contenue dans une ligne. Désormais, lorsque le formulaire est publié, la liaison de modèle MVC aura toutes les valeurs de zone de texte dans la propriété Students de notre modèle de vue.

 [HttpPost] public ActionResult StudentList(Course model) { //check for model.Students collection for each student name. //Save and redirect. (PRG pattern) } 

Solution Ajaxifiée

Si vous souhaitez ajuster cela, vous pouvez écouter le clic sur le bouton d’envoi, obtenir le formulaire, le sérialiser et l’envoyer à la même méthode post-action. Au lieu de redirect après la sauvegarde, vous pouvez renvoyer un code JSON indiquant le statut de l’opération.

 $(function(){ $("#btnSave").click(function(e){ e.preventDefault(); //prevent default form submit behaviour $.post("@Url.Action("StudentList",YourcontrollerName")", $(this).closest("form").serialize(),function(response){ //do something with the response from the action method }); }); }); 

Vous avez juste besoin de spécifier le bon modèle, la liste d’exemples, et d’envoyer à ajax avec des informations sur chaque ligne (élément du tableau), de le lire côté serveur et de mettre à jour chaque élément en conséquence. Pour cet objective, vous utilisez Post request. Il suffit de passer la liste des éléments en tant que parameters dans le contrôleur et de la transmettre à l’aide de ajax.

Par exemple, votre contrôleur pourrait être défini comme:

 public ActionResult Update(List list) { ... } public class MyEntity { public ssortingng Name {get; set;} public int Count {get; set;} } 

et JavaScript pourrait être comme:

 var myList = new Array(); // fill the list up or do something with it. $.ajax( { url: "/Update/", type: "POST", data: {list: myList} } ); 

Et bien sûr, votre bouton “Enregistrer” a un gestionnaire d’événements click qui appellera cette fonctionnalité avec l’appel ajax.

Pour votre commodité, vous pouvez envisager d’utiliser KnockoutJS ou d’autres infrastructures MVVM pour lier les données au DOM du côté client.