在 ASP.NET Core 中使用 JSON 将模型发布到控制器答案

【问题标题】：Posting model to controller using JSON in ASP.NET Core在 ASP.NET Core 中使用 JSON 将模型发布到控制器
【发布时间】：2017-07-26 17:22:54
【问题描述】：

我是 ASP.NET Core 的新手，我正在尝试将视图模型发布到我的控制器（我认为）。

型号：

public class ToolModel
{
    public ToolModel() { }
    public string text { get; set; }
    public string type { get; set; }
    public string name { get; set; }
}

控制器

[HttpPost("/Utilities/Tool/{type}/{process}")]
public IActionResult ToolProcess(ToolModel model, string type, string process)
{
    var test = model.text;
    var result = new Services.ToolServices().exec(model, type, process);
    return Ok(result);
}

查看

var model = {
    text: "Test_text",
    type: "test",
    name: "test_name"
}

function post(model) {
    var url = '/Utilities/Tool/Test/Edit';
    $.ajax({
        url: url,
        data: JSON.stringify(model),
        type: 'POST',
        success: function () {
            alert("all good");
        },
        error: function () {
            alert(":(");
        }
    });
}

我目前能够在我的控制器中到达一个断点，但模型值为空。我尝试了此过程的各种组合，包括将 [FromBody] 添加到控制器参数中。当我添加 [FromBody] 时，我根本没有到达断点，请求失败，并且我收到错误：“未找到元素”。

起初我尝试将 ToolModel 模型传递给索引控制器中的视图，但我不知道如何将视图中的数据连接到模型（我尝试设置 @Model.text = "测试” 没有成功）。那没有用，所以我只是将模型复制为 javascript 对象。根据我的阅读，它应该在我发布 json 时自动绑定到我的模型？

我对 ASP.NET Core 太陌生了，我什至不知道该用谷歌搜索什么，而且帖子的每一个变体对我来说都失败了。如何使用我的模型通过 ajax 从我的视图获取数据到我的控制器？每个人的做法似乎都不一样。

【问题讨论】：

使用 [DataContract] 装饰您的 ToolModel 类，并使用 [DataMember] 装饰每个属性。仅在方法签名中的 ToolModel 前面添加 [FromBody]，然后重试。
我已经尝试过了，我得到了同样的“找不到元素”错误和 ajax 错误。

标签： c# json ajax asp.net-core

【解决方案1】：

由于您是通过 POST 请求发送数据，因此数据将在请求正文中发送。因此，您应该指示 MVC 框架从请求正文中读取它。您可以使用[FromBody] 属性来装饰您的参数。

此外，删除 type 参数，因为您的 ToolModel 类具有同名的属性。您也可以将其从属性路由定义中删除。

[HttpPost("/Utilities/Tool/{process}")]
public IActionResult ToolProcess([FromBody] ToolModel model,  string process)
{
    var test = model.text;
    var result = model;
    // to do : Add your custom code here
    return Ok(result);
}

在客户端，您需要指定 contetType 标头，以便服务器知道它正在接收的类型以及如何处理它。在 ajax 调用中指定“application/json”作为 contentType 值。

var url = '/Utilities/Tool/Edit';
$.ajax({
    url: url,
    data: JSON.stringify(model),
    contentType:"application/json",
    type: 'POST',
    success: function (r) {
        alert("all good");
        console.log(JSON.stringify(r));
    },
    error: function () {
        console.log('errr');
    }
});

【讨论】：

谢谢。我可以发誓我试着弄乱 contentType 但这行得通，谢谢。

【解决方案2】：

我看到的是你在 post 函数中有 model 作为 parameter。如果您不提供，它将为 null。

理想情况下，您不需要在 URL 中使用 /Test/Edit，因为它们已经在正文中。

这是我的测试方法 -

<button type="button" onclick="post();">Post Data</button>
<script>
    var model = {
        text: "Test_text",
        type: "test",
        name: "test_name"
    }

    function post() {
        var url = '/Utilities/Tool';
        $.ajax({
            url: url,
            data: JSON.stringify(model),
            type: 'POST',
            contentType: "application/json",
            success: function() {
                alert("all good");
            },
            error: function() {
                alert(":(");
            }
        });
    }
</script>

[HttpPost("/Utilities/Tool")]
public IActionResult ToolProcess([FromBody]ToolModel model)
{
    model.text += "Return From Server";
    return Ok(model);
}

【讨论】：