MVC 3 - Client validation of list

I've got the following Model

public class ProductLang
{
  public int productID { get; set; }

  public int langID { get; set; }

  [Required, StringLength(150)]
  public string name { get; set; }

  [AllowHtml]
  public string description { get; set; }
}

Controller

public ActionResult Edit(int id)
{
  return View(_db.Products.FirstOrDefault(p => p.id.Equals(id)).ProductLangs);
}

View

@model IEnumerable<ProductLang>

@using (Html.BeginForm()) {
  @Html.ValidationSummary(true)
  @Html.Hidden("id", Model.FirstOrDefault().productID)

  @foreach (var productLang in Model) {
    <div>
      @Html.Hidden("prodLang.Index", productLang.idLingua)
      @Html.Hidden("prodLang[" + productLang.langID + "].productID", productLang.productID)
      @Html.Hidden("prodLang[" + productLang.langID + "].langID", productLang.langID)

      <div class="editor-label">
        @Html.Label("prodLang" + productLang.langID + "__nome", "Name")
      </div>
      <div class="editor-field">
        @Html.TextBox("prodLang[" + productLang.langID + "].name", productLang.name)
        @Html.ValidationMessage("prodLang[" + productLang.langID + "].name")
      </div>
      <div class="editor-label">
        @Html.Label("prodLang" + productLang.langID + "__description", "Description")
      </div>
      <div class="editor-field">
        @Html.TextArea("prodLang[" + productLang.langID + "].description", productLang.description)
      </div>
    </div>
  } 

  <input type="submit" value="EDIT" />
}

I've got others view and controller where jquery unobstrusive validation works, but not here. I assume beca开发者_高级运维use I've got a List. In fact, if I made a view with only one object, works.

How can I bind jquery unobstrusive validation to a list?

Instead of writing those ugly foreach loops and trying to find suitable names for your inputs in your view you could consider using an editor template as it will make your view much more simpler:

@model IEnumerable<ProductLang>
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    @Html.Hidden("id", Model.FirstOrDefault().productID)
    @Html.EditorForModel()
    <input type="submit" value="EDIT" />
}

and then inside the corresponding editor template (~/Views/Home/EditorTemplates/ProductLang.cshtml):

@model ProductLang
<div>
    @Html.HiddenFor(x => x.idLingua)
    @Html.HiddenFor(x => x.productID)
    @Html.HiddenFor(x => x.langID)

    <div class="editor-label">
        @Html.LabelFor(x => x.name, "Name")
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(x => x.name)
        @Html.ValidationMessageFor(x => x.name)
    </div>
    <div class="editor-label">
        @Html.LabelFor(x => x.description, "Description")
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(x => x.description)
    </div>
</div>

Now you will find out that everything auto-magically comes to its place: correct naming convention so that when you postback the default model binder will be able to reconstruct the view model, client and server side validation working, clean views, happy users :-)