title: MVC How can I dynamicaly add input fields to a view model
body: <p>Hi I have a form that uses the following viewmodel</p>
  
  <pre><code>    public class MainViewModel
      {
          public int Id { get; set; }
  
          public List&lt;LotViewModel&gt; Lots { get; set; }
  
          [DisplayName("Number of Lots")]
          public int NumberOfFields { get; set; }
      }
  </code></pre>
  
  <p>NumberOfFields is used in a for loop to render LotViewModels. The user selects a number from 1 -> 4 from a drop down. There is a JS function that then uses AJAX that calls a Controller method to render a partial view containing the correct number of fields. This JS function is triggered when the drop down changes.</p>
  
  <p>This is the controller method</p>
  
  <pre><code>[HttpPost]
  public PartialViewResult AddLotFields(int numberOfFields)
  {
      var viewModel = new MainViewModel
      {
          Lots = new List&lt;LotViewModel&gt;(),
          NumberOfFields = numberOfFields
      };
      return PartialView("~/Areas/Admin/Views/MainController/_LotForm.cshtml", viewModel);
  }
  </code></pre>
  
  <p>And this is the Javascript</p>
  
  <pre><code>$(function() {
  $("#numberOfLotsDD").change(function(event) {
      $.ajax({
          url: window.g_baseUrl + "MainController/AddLotFields/",
          data: {
              numberOfFields: $(this).val()
          },
          cache: false,
          type: "POST",
          dataType: "html",
  
          success: function(data, textStatus, XMLHttpRequest) {
              $("#LotFields").html(data);
          }
      });
  });
  });
  </code></pre>
  
  <p>This works fine but when you submit the form the viewModel doesn't contain any elements in Lots.</p>
  
  <p>The partial view that renders the input fields is </p>
  
  <pre><code>@model MainViewModel
  
  @for (var i = 0; i &lt; Model.NumberOfFields; i++)
  {
      Model.Lots.Add(new LotViewModel());
      &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="form-group "&gt;
                  @Html.LabelFor(model =&gt; model.Lots.Last().BatchIdLocation)
                  @Html.TextBoxFor(model =&gt; model.Lots.Last().BatchIdLocation, new { @class = "form-control", @placeholder = "Enter Batch Id tag" })
                  @Html.ValidationMessageFor(model =&gt; model.Lots.Last().BatchIdLocation)
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="form-group "&gt;
                  @Html.LabelFor(model =&gt; Model.Lots.Last().QuantityLocation)
                  @Html.TextBoxFor(model =&gt; Model.Lots.Last().QuantityLocation, new { @class = "form-control", @placeholder = "Enter Quantity tag" })
                  @Html.ValidationMessageFor(model =&gt; Model.Lots.Last().QuantityLocation)
              &lt;/div&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>I've messed around with a few ways of trying to save this form but none of it has worked. </p>
  
  <p>I know if I'm really stuck I could use JQuery to send the form input values to my controller. But I would like to avoid that if possible and keep the solution confined to c# and razor</p>