title: Issue passing back dynamic string array
body: <p>I have a form inside a modal popup, The user can enter text in a text box and click a plus button which dynamically adds the text they have typed in to a div so they can then proceed to add another one.</p>
  
  <pre><code> &lt;div class="form-group"&gt;
      &lt;label class="control-label col-sm-4" for="prefix"&gt;
         Cast &lt;span style="color:red"&gt;*&lt;/span&gt;
      &lt;/label&gt;
      &lt;div class="col-sm-5"&gt;
        &lt;input type="text" class="form-control col-sm-5" id="Cast" /&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-1"&gt;
        &lt;button type="button" id="btnNewCast" class="btn btn-default"&gt;+&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;label class="control-label col-sm-4" for="prefix"&gt;&lt;/label&gt;
     &lt;div class="col-sm-6" id="newCast"&gt;
  
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As shown here:</p>
  
  <p><img src="https://i.stack.imgur.com/GoUtb.png" alt="enter image description here"></p>
  
  <p>The NewCast is where I display the entered value by jquery.</p>
  
  <p>When they click btnNewCast the following script is called</p>
  
  <pre><code>  $("#btnNewCast").click(function () {
              $("#newCast").append("&lt;span class='label label-success label-as-badge custom-line-height' id='cast[]'&gt;&lt;i class='glyphicon glyphicon-tag'&gt;&lt;/i&gt; "+ $("#Cast").val() + "&lt;/span&gt;&lt;br/&gt;");
  
              $("#Cast").val('');
          });
  </code></pre>
  
  <p>Which looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/zWwgK.png" alt="enter image description here"></p>
  
  <p>The HTML is as follows:</p>
  
  <pre><code>&lt;span id="cast[]" class="label label-success label-as-badge custom-line-height"&gt;
  &lt;i class="glyphicon glyphicon-tag"&gt;&lt;/i&gt;
       They Appear Here    
  &lt;/span&gt;
  </code></pre>
  
  <p>When they press submit on on the form I pass the values back as shown here:</p>
  
  <pre><code> $("#btnAddMovie").click(function() {
  
                  $.ajax({
                      url: '/Movies/Add',
                      //data: $('NewMovie').serialize(),
                      data: { "Title": $("#Title").val(), "Classification": $("#Classification").val(), "Rating": $("#Rating").val(), "ReleaseDate": $("#ReleaseDate").val(), "Cast": $("#Cast").val() },
                      cache: false,
                      type: "POST",
                      success: function (result) {
                          if (result.success) {
  
                          }
                      },
                      error: function (result) {
                          alert("Error");
                      }
                  });
          });
  </code></pre>
  
  <p>Which get mapped to my Model, and is working correctly.</p>
  
  <p>Controller:</p>
  
  <pre><code>    [HttpPost]
      public ActionResult Add(Movie model)
      {
  
  
          return View();
      }
  </code></pre>
  
  <p>My Model is declared like this:</p>
  
  <pre><code>public int MovieId { get; set; }
  public int Rating { get; set; }
  public int ReleaseDate { get; set; }
  public string Title { get; set; }
  public string Classification { get; set; }
  public string Genre { get; set; }
  public string[] Cast { get; set; }
  </code></pre>
  
  <p>The issue I have is as you can see Cast is a string array, the items the user enters (which is shown in the pictures) I'm trying to map them all to the Cast string array when they post. </p>
  
  <p>I have tried </p>
  
  <pre><code>"Cast": $("#cast[]").val()
  </code></pre>
  
  <p>But I get a jquery error when posting, unrecognized expression</p>
  
  <p>I can't get it to map correctly..</p>
  
  <p>** Update** Complete post method</p>
  
  <pre><code>$("#btnAddMovie").click(function () {
  
              var stringArr = $('span[data-id="cast[]"]').map(function() {
                  return $(this).text().trim();
              });
  
              $.ajax({
                  url: '/Movies/Add',
                  //data: $('NewMovie').serialize(),
                  data: { "Title": $("#Title").val(), "Classification": $("#Classification").val(), "Rating": $("#Rating").val(), "ReleaseDate": $("#ReleaseDate").val(), "Cast": stringArr },
                  cache: false,
                  type: "POST",
                  success: function (result) {
                      if (result.success) {
  
                      }
                  },
                  error: function (result) {
                      alert("Error");
                  }
              });
  
  
          });
  </code></pre>