使用 Ajax 向控制器发送 post 请求时模型与列表 <Model>

Question

我一直在尝试使用 ajax 将列表模型发送到控制器，但它似乎根本不起作用

型号

public string MyModel {
   public string myfieldName {get;set;}
}

控制器

 public JsonResult Create(List<myModel> list)
    {

        return Json("Success");


    }

post请求

 $("body").on("click", "#btnSave", function () {

    var list= new Array();
    list = [{ myfieldName: 'ABC' }, { myfieldName: 'DEF' }];


    //Send the JSON array to Controller using AJAX.
    $.ajax({

        type: "POST",
        url: "/Project/Create",
        data: JSON.stringify({ list }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            alert(r + " record(s) inserted.");
        }
    });
});

所以当我发送这个时，我检查浏览器，我可以看到请求负载是用 json 对象列表发送的但是，当我转到控制器时，列表根本没有绑定它，所以我检查 http.context 以检查那里的请求有效负载，它都是空的。另一方面，当我像下面这样更改控制器时

正在发送仅包含模型的请求

public JsonResult Create(myModel data)
{

    return Json("Success");


}

并用以下

更改 js

 $("body").on("click", "#btnSave", function () {

var data ={};
data.myfieldName= "test";



//Send the JSON array to Controller using AJAX.
    $.ajax({

        type: "POST",
        url: "/Project/Create",
        data: data,
        success: function (r) {
            alert(r + " record(s) inserted.");
        }
    });
});

这里唯一的区别是我不作为 json 发送，所以我的问题是发送模型与使用 ajax 的模型列表之间的区别是什么我可以更改什么以使控制器绑定数据或接受模型数据列表注意我正在使用 .Net 核心 2.0

谢谢

Answer 1

我通常使用这种方法将我的 Model 作为 List 发送到我的 Controller 方法。我将尝试向您展示您的场景，以及如何执行此操作：

AJAX:

 $("body").on("click", "#btnSave", function () {

    var list= new Array();
    list = [{ myfieldName: 'ABC'}, { myfieldName: 'DEF'}];


    //Send the JSON array to Controller using AJAX.
        $.ajax({        
            type: "POST",
            url: "@Url.Action("Create","Project")",
            data:{"json": JSON.stringify(list)},
            dataType: "json",
            success: function (r) {
                alert(r + " record(s) inserted.");
            }
        });
    });

并且您可以在 Create 方法中像这样接收 Model：确保导入 System.Web.Script.Serialization 命名空间：

using System.Web.Script.Serialization

[HttpPost]
public JsonResult Create(string json)
{
    var serializer = new JavaScriptSerializer();
    dynamic jsondata = serializer.Deserialize(json, typeof(object));
    List<string> myfieldName=new List<string>();
    //Access your array now
    foreach (var item in jsondata)
    {
      myfieldName.Add(item["myfieldName"]);
    }

    //Do something with the list here
    return Json("Success");
}

希望对您有所帮助。

Answer 2

另一种方法是使用不显眼的 AJAX。您只需要从 Nuget 包管理器安装 Microsoft jQuery unobtrusive AJAX。

然后，在您看来，调用以下内容：

@{using (Ajax.BeginForm("Create", "ControllerName", null, new AjaxOptions()
     {
          HttpMethod = "POST",
          // ...
     }
}))
{
     // Html code goes here
}

还要确保将其包含在视图底部：

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

然后，您可以为您的控制器设置一个正常的 ActionResult（而不是 JsonResult）并接受 List 列表的参数。

使用 Ajax 向控制器发送 post 请求时模型与列表 <Model>

Model vs List<Model> when sending post request to controller using Ajax

.net

javascript

c#

asp.net-mvc

asp.net-ajax