jQuery effacé Ajax ne fonctionne pas dans le scénario «par rangée»

Question

J'essaie d'avoir une table modifiable, où chaque ligne est une vue qui peut être soumise individuellement, afin de récolter tous les avantages de la validation du modèle etc.

Voici ce que j'ai:
Modèle:

public class PeopleGroup 
{ 
    public string Name { get; set; } 
    public ICollection<PersonModel> People { get; set; } 
} 

public class PersonModel 
{ 
    [Required] 
    public uint Id { get; set; } 

    [Required] 
    [RegularExpression("[\\w\\s]{2,100}")] 
    [StringLength(100)] 
    public string FirstName { get; set; } 

    [Required] 
    [RegularExpression("[\\w\\s]{2,100}")] 
    [StringLength(100)] 
    public string LastName { get; set; } 
} 

Liste:

@model Mvc4TestApp.Models.PeopleGroup 
@{ 
    ViewBag.Title = "People"; 
} 

<h2>@Model.Name</h2> 
<table> 
    @foreach (var item in Model.People) 
    { 
    <tr id="@string.Format("Person-{0}", item.Id)"> 
     @Html.Partial("EditorSingle", item) 
    </tr> 
    } 
</table> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 

Row (partiel) Vue:

@model Mvc4TestApp.Models.PersonModel 
@using (Ajax.BeginForm("Edit", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = string.Format("Person-{0}", Model.Id) })) 
{ 
    <td>@Html.EditorFor(x => x.FirstName)</td> 
    <td>@Html.EditorFor(x => x.LastName)</td> 
    <td> 
     <input type="submit" value="OK" /> 
     @Html.HiddenFor(x => x.Id) 
    </td> 
} 

Voici un contrôleur:

public class PeopleController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(new PeopleGroup() 
     { 
      Name = "Presidents", 
      People = GetPeople() 
     }); 
    } 

    public ActionResult Edit(PersonModel model) 
    { 
     if (ModelState.IsValid) 
     { 
      var people = GetPeople(); 
      var original = people.Where(x => x.Id == model.Id).SingleOrDefault(); 
      if (original != null) 
       people.Remove(original); 
      people.Add(model); 
     } 
     return PartialView("EditorSingle", model); 
    } 

    public ICollection<PersonModel> GetPeople() 
    { 
     ICollection<PersonModel> collection = Session["people"] as ICollection<PersonModel>; 
     if (collection == null) 
     { 
      collection = new List<PersonModel>() { 
       new PersonModel() { Id = 0, FirstName = "George", LastName = "Washington"}, 
       new PersonModel() { Id = 1, FirstName = "Abraham", LastName = "Lincoln"}, 
       new PersonModel() { Id = 2, FirstName = "Thomas", LastName = "Jefferson"} 
      }; 
      Session["people"] = collection; 
     } 
     return collection; 
    } 
} 

J'ai testé la chose comme une liste (tableau -> ul, tr -> li, td -> div) qui fonctionne, pas de problème! Mais en tant que table, cela ne fonctionne qu'avec le premier submit. Dès que je soumets à nouveau la même rangée, rien ne se passe. Je l'ai débogué, et le problème semble, il n'y a tout simplement pas d'événement de soumission de formulaire lancé pour le formulaire qui vient par ajax. Je suis assez confiant que cela n'a rien à voir avec asp mvc. Je dirais que ça doit être un problème de placer un formulaire directement dans un tr.

Quelqu'un a-t-il déjà eu ce problème? Connaissez-vous des solutions de contournement?

Merci!

Answer 1

Je dirais que ce doit être un problème de placer une forme directement dans une tr

Yeap, il est exactement cela. Vous avez besoin d'un nested table:

@model Mvc4TestApp.Models.PersonModel 
<td colspan="3"> 
    @using (Ajax.BeginForm("Edit", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = string.Format("Person-{0}", Model.Id) })) 
    { 
     <table> 
      <tr> 
       <td>@Html.EditorFor(x => x.FirstName)</td> 
       <td>@Html.EditorFor(x => x.LastName)</td> 
       <td> 
        <input type="submit" value="OK" /> 
        @Html.HiddenFor(x => x.Id) 
       </td> 
      </tr> 
     </table> 
    } 
</td>