Ajax post 控制器归零

Question

我正在尝试 POST 一个带有 Ajax 的整数到我的控制器

Js

<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);
}

但它总是 post 0 作为 id，我尝试用数字代替 provinceId，但它仍然发送 0

Answer 1

当您执行 { id: provinceId } 时，您正在使用属性 id

创建一个对象

在您的控制器中，您只需要一个 ID。您将需要以太币：

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

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

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

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

Answer 2

您应该创建一个 class 具有 Id 属性.

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

用ProvinceIdDto model替换int id

[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>

C#

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

Answer 3

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

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 );
  });

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

Ajax post 控制器归零

Ajax post zero to controller

ajax

asp.net-ajax

asp.net-core