title: Data passing error from javascript to controller
body: <p>I'm working on ASP.NET MVC project , I want to get location dropdown  selected value and according to that i need to  load values to City  dropdown  , i implemented following code and location dropdown onselect event call the javascript function  and javascript function call the controller method  but when executing controller  method locationId is  null ,and i debug javascript and locationID is there till the this  line  <code>data: JSON.stringify({ locationId: +locationId })</code>, after that javascript  returns error.but  controller method get hit but locationId null</p>
  
  <p>code for dropddowns</p>
  
  <pre><code>  &lt;div class="row"&gt;
      &lt;div class="col-sm-4"&gt;
          @Localizer["Locations"]
          &lt;select id="locationDropDown"  class="selectpicker form-control" asp-for="selectedLocation" onchange="getCityList()"&gt;
              &lt;option value="0"&gt;&amp;lt;None&amp;gt;&lt;/option&gt;
              @foreach (var item in Model.LocationList)
              {
                  &lt;option value="@item.Id"&gt;@item.Name&lt;/option&gt;
              }
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-sm-4"&gt;
          @Localizer["KioskGroup"]
          &lt;select id="cityDropDown" class="selectpicker form-control"&gt;
              &lt;option&gt;---Select City---&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript code </p>
  
  <pre><code>function getCityList()
          {
          debugger;
              var locationId = $("#locationDropDown").val();
              console.log(locationId)
          $.ajax({
              url: '/Kiosk/GetZoneListBYlocationID',
              type: 'POST',
              datatype: 'application/json',
              contentType: 'application/json',
              data: JSON.stringify({ locationId: +locationId }),
              success: function (result) {
                  $("#cityDropDown").html("");
                  $("#cityDropDown").append
                  ($('&lt;option&gt;&lt;/option&gt;').val(null).html("---Select City---"));
                  $.each($.parseJSON(result), function (i, zone) 
                  { $("#cityDropDown").append($('&lt;option&gt;&lt;/option&gt;').val(zone.Id).html(zone.Name)) })
  
              },
              error: function(){alert("Whooaaa! Something went wrong..")},
          });
  </code></pre>
  
  <p>controller method</p>
  
  <pre><code>  public ActionResult GetZoneListBYlocationID(string locationID)
          {
              List&lt;Zone&gt; lstZone = new List&lt;Zone&gt;();
              long locationId = long.Parse(locationID);
  
              var zones = _zoneRepository.GetZonesByLocationId(locationId);
  
              return Json(JsonConvert.SerializeObject(zones));
          }
  </code></pre>