title: MVC - My form is not passing my select dropdown's selected option
body: <p>I'm trying to post my dropdown values to my controller using an ajax post.  All of the form values are passing just fine except for my dropdown select list.  When I look at the select element using the browser's devtools it has the name <code>SortByList</code>.</p>
  
  <p><strong>Model</strong></p>
  
  <pre><code>public IList&lt;SortBy&gt; SortByList { get; set; }
  
  public class SortBy
  {
      public string Text { get; set; }
      public bool Selected { get; set; }
  }
  </code></pre>
  
  <p><strong>View Dropdown List</strong></p>
  
  <pre><code>@using (Html.BeginForm("FDCLSubmit", "Reports", FormMethod.Post, new { id = 
  "reportForm", @class = "report-form col-9" }))
  {
  &lt;div class="row"&gt;
      &lt;b class="col-2" style="padding-top: 5px;"&gt;Sort By&lt;/b&gt;
      &lt;select asp-for="SortByList" class="form-control col-3"&gt;
          @for (var x = 0; x &lt; Model.SortByList.Count; x++)
          {
              &lt;option value="@Model.SortByList[x].Text"&gt;@Model.SortByList[x].Text&lt;/option&gt;
          }
      &lt;/select&gt;
  &lt;/div&gt;
  (saveSubmit button partial view here)
  }
  </code></pre>
  
  <p><strong>Ajax Post</strong></p>
  
  <pre><code>$('#saveSubmit').on('click', function (evt) {
      var report = $('form').serialize();
      var form = new Object();
      form.report = report;
      form.EnteredCriteriaName = $('#EnteredCriteriaName').val();
  
      //Ajax form post
      $.ajax({
          type: 'POST',
          data: form.report,
          contentType: dataType,
          url: '@Url.Action("FDCLCheckIfExists", "Reports")',
          success: function (data) {
              if (data.exists == true) {
                  //Toggle the error modal and display messages
                  $('#existsModal').modal('toggle');
                  $('#modalYes').on('click', function () {
                      //User selected to replace report criteria
                      $.ajax({
                          type: 'POST',
                          data: form.report,
                          contentType: dataType,
                          url: '@Url.Action("SaveFDCLCriteria", "Reports")',
                          success: function (data) {
                              console.log(data);
                              if (data.success) {
                                  window.location.href = data.url;
                              } else {
                                  //Toggle the error modal and display messages
                                  $('#errorsModal').modal('toggle');
                                  //Add &lt;br&gt; tags when there is a linebreak in the string.  This will add the line breaks into the HTML.
                                  $('#errorsModal .modal-body p').html(data.message.replace(/(?:\r\n|\r|\n)/g, '&lt;br&gt;'));
                              }
                          }
                      });
                  });
              }
          }
      });
  });
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <p>I set my breakpoint in this controller, and this is where the <code>SortByList</code> property of my <code>report</code> comes up as null.</p>
  
  <pre><code>public ActionResult FDCLCheckIfExists(FirstDollarCreditListing report, string EnteredCriteriaName)
  {
      var criteria = report.ConvertToCriteria(report);
      criteria.CriteriaName = EnteredCriteriaName;
      var rep = new ReportFirstDollarCreditListing();
      var exists = rep.DoesCriteriaNameAlreadyExist(criteria);
      return Json(new { exists = exists });
  }
  </code></pre>