Ajax 将零发送到控制器答案

【问题标题】：Ajax post zero to controllerAjax 将零发送到控制器
【发布时间】：2020-11-14 02:25:40
【问题描述】：

我正在尝试将 POST 与 Ajax 的 int 连接到我的控制器

<script>
    function FillCity() {
        var provinceId = $(provinces).val();
        $.ajax({
            url: "FillCity",
            type: "POST",
            data: { id: provinceId },
            dataType: "json",
            traditional: true,
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $("#cities").html(""); // clear before appending new list
                $.each(data, function (i, city) {
                    $("#cities").append(
                        $('<option></option>').val(city.Id).html(city.Name));
                });
            }
        });
    }
</script>

我的控制器中的代码：

[HttpPost]
public ActionResult FillCity(int id)
{
    var cities = _context.City.Where(c => c.ProvinceId == 5);
    return Json(cities);
}

但它总是将 0 作为 id 发布，我尝试使用数字而不是 ProvinceId，但它仍然发送 0

【问题讨论】：

标签： ajax asp.net-core asp.net-ajax

【解决方案1】：

你能验证这个语句有值吗：

var provinceId = $(provinces).val();

可能没有找到您要查找的内容，并且因为您将类型 int 作为参数，所以它默认为“0”。

您不需要将其更改为 GET 并且您的 MVC 方法就可以了。可以从JQuery's own sample it should work看到：

$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });

我认为它可能没有成功找到输入字段。

【讨论】：

我说我用5这样的数字测试过，还是不行
尝试删除传统的：true 因为我做了一些类似于你所拥有但没有的事情。同样根据附加的链接，您可能想要使用 dataType，而不是 contentType，因为您要返回 JSON：stackoverflow.com/questions/18701282/…。

【解决方案2】：

您应该创建一个具有Id 属性的类。

public class ProvinceIdDto 
{
    public int Id { get; set; }
}

将int id 替换为ProvinceIdDto model 实际操作

[HttpPost]
public ActionResult FillCity(ProvinceIdDto model)
{
    var cities = _context.City.Where(c => c.ProvinceId == model.Id);
    return Json(cities);
}

将{ id: provinceId } 替换为JSON.stringify({ Id: provinceId }),

<script>
    function FillCity() {
        var provinceId = $(provinces).val();
        $.ajax({
            url: "FillCity",
            type: "POST",
            data: JSON.stringify({ Id: provinceId }),
            dataType: "json",
            traditional: true,
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $("#cities").html(""); // clear before appending new list
                $.each(data, function (i, city) {
                    $("#cities").append(
                        $('<option></option>').val(city.Id).html(city.Name));
                });
            }
        });
    }
</script>

另一种选择是您可以将 HttpPost 方法替换为 HttpGet 并将 id 传递给这样的操作。

将type: "POST", 更改为type: "GET",

<script>
    function FillCity() {
        var provinceId = $(provinces).val();
        $.ajax({
            url: "FillCity?id="+provinceId,//<-- NOTE THIS
            type: "GET",//<-- NOTE THIS
            dataType: "json",
            traditional: true,
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $("#cities").html(""); // clear before appending new list
                $.each(data, function (i, city) {
                    $("#cities").append(
                        $('<option></option>').val(city.Id).html(city.Name));
                });
            }
        });
    }
</script>

[HttpGet]
public ActionResult FillCity(int id)
{
    var cities = _context.City.Where(c => c.ProvinceId == id);
    return Json(cities);
}

【讨论】：

再次感谢您，因为第二个解决方案也正确

【解决方案3】：

当您执行{ id: provinceId } 时，您正在创建一个具有属性id 的对象

在您的控制器中，您只需要一个 id。你需要以太：

A将其作为查询参数传递url: "FillCity?id=" + provinceId

B创建一个从请求正文中解析的对象。

public class Payload {
   public int Id {get;set;}
}

并像这样使用它 public ActionResult FillCity([FromBody] Payload payload)

【讨论】：

仍然发布 null:(