title: MVC client side validation for a Model that has a list of models
body: <p>I have this model that has a list of another model. Then in my view, I have my form that fills a couple of fields for my main Model. But I want this form to also be able to add X models of the other type and to be all wired up and I'm wondering how to properly do this.</p>
  
  <p>So here are my two models:</p>
  
  <pre><code>public class MyMainModel
  {
  
      public int MyMainId { get; set; }
  
      [Required(ErrorMessage = "Groovy name required")]
      [Display(Name = "MyMainModel's groovy name:")]
      public string Name { get; set; }
  
      public List&lt;MySubModel&gt; MySubModels { get; set; }
  
  }
  
  public class MySubModel
  {
  
      public int MySubId { get; set; }
  
      [Required(ErrorMessage = "Cool name required")]
      [Display(Name = "MySubModel's cool name:")]
      public string Name { get; set; }
  
  }
  </code></pre>
  
  <p>When I hit my controller for my "create" view, I go through this action:</p>
  
  <pre><code>public ActionResult SomePageAboutCreating()
  {
      // [...] Some other stuff
      return View(new MyMainModel());
  }
  </code></pre>
  
  <p>Now this sends to my strongly typed view:</p>
  
  <pre><code>@model myFunProject.WebModels.MyMainModel
  
  &lt;div&gt;
      &lt;form id="my-create-form" onsubmit="CreateMyMainModel(this); return false;"&gt;
          @Html.AntiForgeryToken()
          @Html.ValidationSummary()
  
          &lt;div class="result" style="background-color: silver;"&gt;This is the operation result box&lt;/div&gt;
          &lt;img class="loading" src="/Images/ajax-loader.gif" alt="Loading..." width="16" height="16" style="display: none;" /&gt;
  
          &lt;section&gt;
              @Html.LabelFor(m =&gt; m.Name)
              @Html.TextBoxFor(m =&gt; m.Name)
              @Html.ValidationMessageFor(m =&gt; m.Name)
          &lt;/section&gt;
  
          &lt;!-- Here begins the fields for my list of "MySubModel" --&gt;
          @Html.EditorFor(x =&gt; x.MySubModels)
  
          &lt;!-- Here I'm thinking about a javascript that will add the previous fields X times so that the user can create "MyMainModel" as well as x times "MySubModel"... --&gt;
  
          &lt;input type="submit" class="btn-send" id="my-create-form-submit" value="Send" /&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I think I have to use the EditorTemplates here... So I setup in my /Views/EditorTemplates/MySubModels.cshtml (Named against my "MyMainModel"'s property) and then when I write my form in there, I'm confused...</p>
  
  <pre><code>@model myFunProject.WebModels.MyMainModel
  
  @*&lt;section&gt;
      @Html.LabelFor(m =&gt; m.Name)
      @Html.TextBoxFor(m =&gt; m.Name)
      @Html.ValidationMessageFor(m =&gt; m.Name)
  &lt;/section&gt;*@
  </code></pre>
  
  <p>So here I'm not sure what to put in here... I want my Name property there to be the one of "MySubModel". And as the user sees this form, say for example he'll go through this scenario:</p>
  
  <ol>
  <li>Enters a name for the "MyMainModel".</li>
  <li>Goes to the other name box and fills in a name of the first instance of "MySubModel.</li>
  <li>Then he would click a special button that would manipulate dom to append another MySubModel.Name field.</li>
  <li>He would write in the second "MySubModel" name.</li>
  <li>He would click submit.</li>
  </ol>
  
  <p>The ajax call I put in there I'm ok doing the wiring up, but my confusion comes with the code I have to write for the editor template and then I'm kind of also wondering about how I'm going to create a new field (for that second "MySubModel" for example...).</p>
  
  <p>Any help would be appreciated, I've gone through many articles about subjects close to this, but have not found this case yet. Thanks!</p>
  
  <p>EDIT:</p>
  
  <p>I'll add the action (an overly simplified version hehe) that is called by my ajax when the form is submitted.</p>
  
  <pre><code>public ActionResult CreateMyMainModel(MyMainModel myMainModel) {
  
      // [...] Do stuff like save to database...
      // var aGroovyNAme = myMainModel.Name;
  
      foreach(var mySubModel in myMainModel.MySubModels) {
          // Here I would have the sub models available to manipulate...
          // var aCoolName = mySubModel.Name;
      }
      return Content("ok");
  
  }
  </code></pre>