title: MVC 5 Ajax partial form validation
body: <p>I'm using an <code>Ajax.BeginForm</code> in a strongly typed view. Within this form I have a few panels which hold model properties which in turn use their own models and editor templates. I want to post the whole model with Ajax back to the server at the end but before doing that I'm going from panel to panel and need to validate each of them before progressing to another one.</p>
  
  <p>How do I do a partial (server side) validation (in controller action) of each panel and each model property on clicking Next button?</p>
  
  <p>Can I call somehow a controller action on clicking each Next button and how do I pass the values of the particular tab I'm validating? All without refreshing the page.</p>
  
  <p>The models:</p>
  
  <pre><code>public class OrderItem
  {
      public int ItemId { get; set; }
      public ItemBasic BasicDetails { get; set; }
      public ItemSpecifics Specification { get; set; }
  }
  
  public class ItemBasic
  {
      [Required]
      public string Type { get; set; }
  
      [Required]
      [StringLength(30)]
      public string SerialNumber { get; set; }
  }
  </code></pre>
  
  <p>The view:</p>
  
  <pre><code>@model OrderItem
  
  @Ajax.BeginForm(...)
  {
      @Html.AntiForgeryToken()
      @Html.HiddenFor(x =&gt; x.ItemId)
      &lt;div class="tab"&gt;
          @Html.EditorFor(x =&gt; x.ItemBasics)
          &lt;input type="button" value="Next" /&gt;
      &lt;/div&gt;
      &lt;div class="tab"&gt;
          @Html.EditorFor(x =&gt; x.ItemSpecifics)
          &lt;input type="button" value="Next" /&gt;
      &lt;/div&gt;
      &lt;input type="submit" value="Add to order" /&gt;
  }
  </code></pre>
  
  <p>The whole page is much more complicated than that, I just simplified it for the sake of this question.</p>
  
  <p>Previously I used PartialViews for each property (instead of editor templates) but with PartialView the parent model can't see the property models when posting the form at the end.</p>
  
  <p>Also I need to load more data into some panels depending on the user input/ selection in a field and that needs to be loaded from server, so in essence I need to call an action on certain fields and populate other with the action result.</p>
  
  <p>Eg. in the item specific panel the user adds a few items to its model List property, they display as list of rows in the panel which then each can be edited or deleted by calling a controller action.</p>
  
  <p>With <code>PartialView</code> I just performed an action, added user input which added new <code>ItemSpecific</code> item to the List and returned the whole <code>ItemSpecifics</code> model as <code>PartialViewResult</code> to the given panel only displaying the list of added <code>ItemSpecific</code> items in the panel.</p>
  
  <pre><code>public class ItemSpecifics
  {
      public string Name { get; set; }
      public string Description { get; set;}
      public string Ref { get; set;}
      public IEnumerable&lt;ItemSpecifics&gt; Items { get; set;}
  }
  </code></pre>