从JavaScript到控制器的数据传递错误

Question

我正在ASP.NET MVC项目上工作，我想获取位置下拉列表的选定值，并据此将值加载到City下拉列表，我实现了以下代码和位置下拉列表onselect事件，分别调用javascript函数和javascript函数调用控制器方法，但执行控制器方法locationId为null时，我调试javascript和locationID直到该行data: JSON.stringify({ locationId: +locationId })为止data: JSON.stringify({ locationId: +locationId }) ，此后javascript返回error.but控制器方法被命中但locationId空值

下拉代码

  <div class="row">
    <div class="col-sm-4">
        @Localizer["Locations"]
        <select id="locationDropDown"  class="selectpicker form-control" asp-for="selectedLocation" onchange="getCityList()">
            <option value="0">&lt;None&gt;</option>
            @foreach (var item in Model.LocationList)
            {
                <option value="@item.Id">@item.Name</option>
            }
        </select>
    </div>
</div>
<div class="row">
    <div class="col-sm-4">
        @Localizer["KioskGroup"]
        <select id="cityDropDown" class="selectpicker form-control">
            <option>---Select City---</option>
        </select>
    </div>
</div>

JavaScript代码

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
                ($('<option></option>').val(null).html("---Select City---"));
                $.each($.parseJSON(result), function (i, zone) 
                { $("#cityDropDown").append($('<option></option>').val(zone.Id).html(zone.Name)) })

            },
            error: function(){alert("Whooaaa! Something went wrong..")},
        });

控制器方式

  public ActionResult GetZoneListBYlocationID(string locationID)
        {
            List<Zone> lstZone = new List<Zone>();
            long locationId = long.Parse(locationID);

            var zones = _zoneRepository.GetZonesByLocationId(locationId);

            return Json(JsonConvert.SerializeObject(zones));
        }

Answer 1

为什么要对数据进行stringify处理。下面的一项无需stringify工作

data: { locationId: +locationId },

Answer 2

您当前的代码正在请求正文中发送json字符串{"locationId":101} ，因为您将contentType指定为application/json 。 当您要发送具有多个属性的对象并且您的操作方法参数是DTO / POCO类类型时，这很有用。 模型绑定器将从请求主体中读取并将其映射到参数。

就您而言，您要发送的只是一个值。 因此，请勿发送JSON字符串。 只需创建一个js对象并将其用作data属性值即可。 还要删除contentType: application/json因为我们没有将复杂的js对象作为json字符串发送。

此外， application/json也不是dataType属性的有效选项。 您可以使用json 。 但是jQuery很聪明，可以从服务器返回的响应标头中猜测此处所需的值。 因此，您可以将其删除。

function getCityList() {

    var locationId = $("#locationDropDown").val();
    $.ajax({
        url: '/Kiosk/GetZoneListBYlocationID',
        type: 'POST',
        data: { locationID: locationId },
        success: function (result) {
           console.log(result);
           // populate dropdown
        },
        error: function () { alert("Whooaaa! Something went wrong..") },
    });

}

现在，此数据将以locationID=101形式在表单数据中发送，并且Content-Type标头值作为application/x-www-form-urlencoded ，并将正确映射到您的操作方法参数。

您应该使用正确的类型。 在您的操作方法中，您使用string作为参数，然后尝试将其转换为long 。 为什么不使用long作为参数类型？ 同样，如果zones变量是Zone对象的列表，则可以将其直接传递给Json方法。 无需在两者之间创建string版本。

 public ActionResult GetZoneListBYlocationID(long locationId)
 {
    var zones = _zoneRepository.GetZonesByLocationId(locationId);
    return Json(zones);
 }

Answer 3

我面临着同样的问题。 之后，我尝试了以下解决方案。 希望对您有帮助。

ajax调用如下：

          $.ajax({
                type: 'POST',
                url: "/Account/GetCities",
                dataType: 'json',
                data: { id: $("#StateID").val() },
                success: function (states) {
                    $.each(states, function (i, state) {
                       $("#CityID").append('<option value="' + state.Value + '">' + state.Text + '</option>');
                    });
                },
                error: function (ex) {
                    alert('Failed to retrieve cities.' + ex);
                }
            });

控制器代码如下：

public List<CityModel> GetCities(int id)
{
        //your code
}

您可以在应用程序中执行以下操作：

function getCityList()
        {

            var locationId = $("#locationDropDown").val();
            console.log(locationId)
        $.ajax({
            url: '/Kiosk/GetZoneListBYlocationID',
            type: 'POST',
            dataType: 'json',
            data: { locationId: locationId },
            success: function (result) {
                $("#cityDropDown").html("");
                $("#cityDropDown").append
                ($('<option></option>').val(null).html("---Select City---"));
                $.each($.parseJSON(result), function (i, zone) 
                { $("#cityDropDown").append($('<option></option>').val(zone.Id).html(zone.Name)) })

            },
            error: function(){alert("Whooaaa! Something went wrong..")},
        });
}

您的控制器将与您所做的相同。