title: Binding ViewModels with Dynamic Nested Collections in ASP.NET MVC4 Model Binder
body: <p>I am building a simple web application where users can vote on topics that the admins set. Each topic, can have two or more options, for example a Yes or No style vote topic, will have two options, where as a voting topic of "What is the best restaurant in Kensington?" can have many options.</p>
  
  <p>Here is my current ViewModel:</p>
  
  <pre><code>public class NewTopicVM
  {
      [Required]
      [Display(Name = "Topic Title")]
      public string TopicTitle { get; set; }
  
      [Required]
      [Display(Name = "Topic Description")]
      public string TopicDescription { get; set; }
  
      [Display(Name = "Topic Image")]
      public byte[] TopicImage { get; set; }
      public List&lt;NewOptionVM&gt; TopicOptions { get; set; }
  }
  
  public class NewOptionVM
  {
      public string OptTitle { get; set; }
      public string OptDescription { get; set; }
  }
  </code></pre>
  
  <p>Note the list of <code>NewOptionVM</code> in the <code>NewTopicVM</code>. Thanks Iko's answer, I have managed to bind the non-dynamically generated inputs, however my dynamically generated ones are not getting bound for some reason !</p>
  
  <p>Here's the jQuery code that creates the Option input fields:</p>
  
  <pre><code>var index = 1;
  
  function generateOptMarkup() {
      var container = $('&lt;div /&gt;');
  
      var optionInputsBlock = $('&lt;div /&gt;');
      optionInputsBlock.addClass('optionInputsBlock');
  
      var inputTitleBlock = $('&lt;div /&gt;');
      inputTitleBlock.addClass('inputBlock');
  
      var inputDescBlock = $('&lt;div /&gt;');
      inputDescBlock.addClass('inputBlock');
  
      var optTitleLbl = $('&lt;label /&gt;');
      optTitleLbl.attr('for', 'TopicOptions_' + ++index + '__OptTitle');
      optTitleLbl.text('Option Title');
  
      var optDescLbl = $('&lt;label /&gt;');
      optDescLbl.attr('for', 'TopicOptions_' + index + '__OptDescription');
      optDescLbl.text('Option Description');
  
      var optTitleInpt = $('&lt;input type="text" /&gt;');
      optTitleInpt.addClass('text-box single-line');
      optTitleInpt.attr('name', 'TopicOptions_' + index + '__OptTitle');
      optTitleInpt.attr('id', 'TopicOptions_' + index + '__OptTitle');
      optTitleInpt.attr('data-val-required', 'The Option Title field is required.');
      optTitleInpt.attr('data-val', 'true');
  
      var optDescInpt = $('&lt;input type="text" /&gt;');
      optDescInpt.addClass('text-box single-line');
      optDescInpt.attr('name', 'TopicOptions_' + index + '__OptDescription');
      optDescInpt.attr('id', 'TopicOptions_' + index + '__OptDescription');
      optDescInpt.attr('data-val-required', 'The Option Description field is required.');
      optDescInpt.attr('data-val', 'true');
  
      inputTitleBlock.append(optTitleLbl).append(optTitleInpt);
      inputDescBlock.append(optDescLbl).append(optDescInpt);
  
      optionInputsBlock.append(inputTitleBlock).append(inputDescBlock);
  
      container.append(optionInputsBlock);
  
      return container.html();
  }
  
  
  $('div.buttons &gt; a').click(function () {
      $('div.topicOptionsBlock').append(generateOptMarkup());
  });
  </code></pre>
  
  <p>I start at <code>Index = 1</code> because I already have 2 options displayed. Here is a screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/warWW.png" alt="enter image description here"></p>
  
  <p>The first two boxes get bound fine, but the third one which is dynamically added after clicking the [Add Option] button does not!</p>
  
  <p>What am I doing wrong? I have ensured the indexing is correct, yet it isn't working :(</p>