Question

我正在ASP.NET MVC项目上，我想获取位置下拉列表中的选定值，并据此，我需要将值加载到“城市”下拉列表中，我在onselect事件中实现了以下代码和位置下拉列表，调用javascript函数和javascript函数调用控制器方法，但是当执行控制器方法locationId为null时，我调试javascript，并且locationID一直存在，直到此行data: JSON.stringify({ locationId: +locationId })，之后javascript返回错误。但是控制器方法被命中但locationId为null

下拉菜单代码

  <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..")},
        });
}

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

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

3 个答案: