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

Question

我正在研究 ASP.NET MVC 项目，我想获取位置下拉列表的选定值，根据我需要将值加载到城市下拉列表，我实现了以下代码和位置下拉列表 onselect 事件调用javascript 函数和 javascript 函数调用控制器方法但是当执行控制器方法时 locationId 为空，我调试 javascript 并且 locationID 一直存在直到这一行 data: JSON.stringify({ locationId: +locationId })，之后javascript returns 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

我遇到了同样的问题。之后，我尝试了以下解决方案。希望对你有所帮助。

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

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

Answer 2

为什么你是 stringify data.Below 应该没有 stringify

data: { locationId: +locationId },

Answer 3

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

在您的情况下，您发送的只是一个值。所以不要发送 JSON 字符串。只需创建一个 js object 并将其用作 data 属性值。还要删除 contentType: application/json，因为我们不会将复杂的 js object 作为 json 字符串发送。

此外 application/json 不是 dataType 属性的有效选项。您可以使用 json。但是 jQuery 足够聪明，可以从服务器返回的响应 header 中猜测这里需要的值。所以你可以删除它。

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 header 值作为 application/x-www-form-urlencoded 在表单数据中发送，并将正确映射到您的操作方法参数。

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

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

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

Data passing error from javascript to controller

javascript

asp.net-mvc

asp.net-mvc-4