如何将JSON POST数据作为对象传递给Web API方法?


304

ASP.NET MVC4 Web API应用程序定义了发布方法以节省客户。客户在POST请求正文中以json格式传递。post方法中的Customer参数包含属性的空值。

如何解决此问题,以便过帐的数据将作为客户对象传递?

如果可能的话,应该使用Content-Type:application / x-www-form-urlencoded,因为我不知道如何在发布表单的javascript方法中更改它。

控制器:

public class CustomersController : ApiController {

  public object Post([FromBody] Customer customer)
        {
            return Request.CreateResponse(HttpStatusCode.OK,
            new
            {
                customer = customer
            });
        }
    }
}

public class Customer
    {
        public string company_name { get; set; }
        public string contact_name { get; set; }
     }

请求:

POST http://localhost:52216/api/customers HTTP/1.1
Accept: application/json, text/javascript, */*; q=0.01
X-Requested-With: XMLHttpRequest
Content-Type: application/x-www-form-urlencoded; charset=UTF-8

{"contact_name":"sdfsd","company_name":"ssssd"}

Answers:


525

编辑:31/10/2017

同样的代码/方法也适用于Asp.Net Core 2.0。主要区别在于,在asp.net核心中,Web api控制器和Mvc控制器都合并在一起成为单个控制器模型。所以,你的返回类型可能是IActionResult或它的实现之一(例如:OkObjectResult


采用

contentType:"application/json"

JSON.stringify发送时,您需要使用方法将其转换为JSON字符串,

然后,模型绑定器会将json数据绑定到您的类对象。

下面的代码可以正常工作(经过测试)

$(function () {
    var customer = {contact_name :"Scott",company_name:"HP"};
    $.ajax({
        type: "POST",
        data :JSON.stringify(customer),
        url: "api/Customer",
        contentType: "application/json"
    });
});

结果

在此处输入图片说明

contentType属性告诉服务器我们正在以JSON格式发送数据。由于我们发送了JSON数据结构,因此模型绑定将正确进行。

如果检查ajax请求的标头,则可以看到该Content-Type值设置为application/json

如果未明确指定contentType,它将使用默认的内容类型,即 application/x-www-form-urlencoded;


编辑于2015年11月以解决评论中提出的其他可能问题

发布复杂对象

假设您有一个复杂的视图模型类作为您的Web api操作方法参数,如下所示

public class CreateUserViewModel
{
   public int Id {set;get;}
   public string Name {set;get;}  
   public List<TagViewModel> Tags {set;get;}
}
public class TagViewModel
{
  public int Id {set;get;}
  public string Code {set;get;}
}

和您的Web API端点就像

public class ProductController : Controller
{
    [HttpPost]
    public CreateUserViewModel Save([FromBody] CreateUserViewModel m)
    {
        // I am just returning the posted model as it is. 
        // You may do other stuff and return different response.
        // Ex : missileService.LaunchMissile(m);
        return m;
    }
}

在撰写本文时,ASP.NET MVC 6是最新的稳定版本,并且在MVC6中,Web api控制器和MVC控制器都从Microsoft.AspNet.Mvc.Controller基类继承。

要将数据从客户端发送到方法,以下代码应该可以正常工作

//Build an object which matches the structure of our view model class
var model = {
    Name: "Shyju",
    Id: 123,
    Tags: [{ Id: 12, Code: "C" }, { Id: 33, Code: "Swift" }]
};

$.ajax({
    type: "POST",
    data: JSON.stringify(model),
    url: "../product/save",
    contentType: "application/json"
}).done(function(res) {       
    console.log('res', res);
    // Do something with the result :)
});

模型绑定适用于某些属性,但并非全部!为什么呢

如果您不使用[FromBody]属性修饰Web api方法参数

[HttpPost]
public CreateUserViewModel Save(CreateUserViewModel m)
{
    return m;
}

并在不指定contentType属性值的情况下发送模型(原始javascript对象,非JSON格式)

$.ajax({
    type: "POST",
    data: model,
    url: "../product/save"
}).done(function (res) {
     console.log('res', res);
});

模型绑定将对模型的平面属性起作用,不适用于类型为复杂/另一种类型的属性。在我们的示例中,IdName属性将正确绑定到参数m,但是Tags属性将是一个空列表。

如果您使用的是简短版本,则会发生相同的问题,该简短版本$.post在发送请求时将使用默认的Content-Type。

$.post("../product/save", model, function (res) {
    //res contains the markup returned by the partial view
    console.log('res', res);
});

4
不知道我做了什么,但是我今天早上回来了,回到了同一条船上。控制器中的对象为null。在这里,我们又去了大声笑
Grayson

1
确保在使用提琴手时将内容类型写为“ Content-Type:application / json”。干杯!
ioWint 2015年

1
你干脆解决了我一天的工作!!!这个小小的功能“ JSON.stringify(data)”成功了!
吉尔·艾伦

1
请记住,如果执行此操作(更改Content-Type标头),并且正在发出CORS请求,则jQuery将开始在服务器必须处理的POST之前添加预检OPTIONS请求。
仲裁人2015年

1
由于复杂类型的问题,我认为仅指定'contentType:'application / json;'是一个习惯 和json对js对象进行字符串化处理,则无需使用[FromBody]属性。
BornToCode '16

69

在webapi中使用POST可能很棘手!想要添加到已经正确的答案。

由于处理GET是微不足道的,因此将特别关注POST。我认为没有人会四处寻找解决webapis GET问题的方法。无论如何..

如果您的问题是-在MVC Web Api中,如何-使用除通用HTTP动词之外的自定义操作方法名称?-执行多个帖子?-发布多种简单类型?-通过jQuery发布复杂类型?

然后,以下解决方案可能会有所帮助:

首先,要在Web API中使用自定义操作方法,请添加以下Web API路由:

public static void Register(HttpConfiguration config)
{
    config.Routes.MapHttpRoute(
        name: "ActionApi",
        routeTemplate: "api/{controller}/{action}");
}

然后,您可以创建以下操作方法:

[HttpPost]
public string TestMethod([FromBody]string value)
{
    return "Hello from http post web api controller: " + value;
}

现在,从浏览器控制台中启动以下jQuery

$.ajax({
    type: 'POST',
    url: 'http://localhost:33649/api/TestApi/TestMethod',
    data: {'':'hello'},
    contentType: 'application/x-www-form-urlencoded',
    dataType: 'json',
    success: function(data){ console.log(data) }
});

其次,要执行多个发布,这很简单,创建多个操作方法并使用[HttpPost]属性进行修饰。使用[ActionName(“ MyAction”))分配自定义名称,等等。下面的第四点将介绍jQuery。

第三,首先,不可能在一个动作中发布多个SIMPLE类型。此外,还有一种特殊的格式可以发布单个简单类型(除了以查询字符串或REST样式传递参数之外)。这就是我用Rest Clients(例如Fiddler和Chrome的Advanced REST客户扩展)动脑筋,并在网上搜寻了将近5个小时的事实,最终,以下URL被证明是有帮助的。会引用相关内容的链接可能会死掉!

Content-Type: application/x-www-form-urlencoded
in the request header and add a = before the JSON statement:
={"Name":"Turbo Tina","Email":"na@Turbo.Tina"}

PS:是否注意到了特殊的语法

http://forums.asp.net/t/1883467.aspx?+I+try+to+Post+to+my+Web+Api++

无论如何,让我们克服这个故事。继续:

第四,通过jQuery 发布复杂类型,当然,$ .ajax()会迅速发挥作用:

假设操作方法接受一个具有id和名称的Person对象。因此,从javascript:

var person = { PersonId:1, Name:"James" }
$.ajax({
    type: 'POST',
    url: 'http://mydomain/api/TestApi/TestMethod',
    data: JSON.stringify(person),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(data){ console.log(data) }
});

动作看起来像:

[HttpPost]
public string TestMethod(Person person)
{
    return "Hello from http post web api controller: " + person.Name;
}

以上所有,为我工作!干杯!


2
我似乎每隔几个月就会遇到这个问题,大多数时候我最终都会解决它,但是这次我放弃了。上面的技巧都没有为我解决,因此我决定将其作为一种方法。如果很难做到正确,为什么要麻烦呢?无论如何,这只是一种方便-只需将内容作为字符串输入,然后使用newtonsoft对其进行转换即可。做完了 尝试了大约一个小时的“简单”方法后,花了30秒钟解决了“困难”方法。我对这种方法并不陌生,但是它有根本的问题吗?
Kinetic 2015年

PS:在WebApi2中,我们现在可以使用路由装饰器。因此,主要解决此问题。 asp.net/web-api/overview/web-api-routing-and-actions/...
Vaibhav的

2
想添加一个观察。有时,在传递复杂类型(例如:DTO)时,模型绑定在WebAPI端失败(空)的原因是模型中的一个或多个属性将不兼容(或无法解析)。例如。为Guid属性分配了无效的GUID。在这种情况下,请尝试对所有对象属性使用默认/空值,然后重试。
Vaibhav

10

我一直在玩这个游戏,发现了一个相当奇怪的结果。假设您在C#中的类具有公共属性,如下所示:

public class Customer
{
    public string contact_name;
    public string company_name;
}

那么您必须按照Shyju的建议执行JSON.stringify技巧,并按以下方式调用它:

var customer = {contact_name :"Scott",company_name:"HP"};
$.ajax({
    type: "POST",
    data :JSON.stringify(customer),
    url: "api/Customer",
    contentType: "application/json"
});

但是,如果您像这样在类中定义getter和setter:

public class Customer
{
    public string contact_name { get; set; }
    public string company_name { get; set; }
}

那么您可以更简单地调用它:

$.ajax({
    type: "POST",
    data :customer,
    url: "api/Customer"
});

这使用HTTP标头:

Content-Type:application/x-www-form-urlencoded

我不太确定这里发生了什么,但它看起来像框架中的错误(功能?)。可能是不同的绑定方法调用了不同的“适配器”,而用于application / json的适配器一种使用公共属性,而用于表单编码数据的适配器则没有。

我不知道这将是最佳实践。


6
属性与字段是其与众不同的原因。属性是最佳做法。在第一个示例中,您所谓的属性实际上是字段。当您对它们进行获取/设置时,它们将具有一个自动创建的后备字段,该字段使它们成为属性。
paqogomez,2015年

这是真的,很奇怪。只有字段的普通类不会绑定到表单发布,但是属性会绑定到表单发布。顺便说一句:仍然没有解释为什么会这样...?我只能猜测内部逻辑只会将JSON数据绑定到字段,并将发布数据形成到属性,仅此而已...?
詹姆斯·威尔金斯

1
之所以如此,是因为该代码仅查找属性。由于使用公共领域是不是最好的做法,MS队决定不让没有最佳实践的情况,很不错的理由恕我直言。
Erik Philips

1

使用JSON.stringify()获取JSON格式的字符串,请确保在进行AJAX调用时传递以下提到的属性:

  • contentType:“ application / json”

下面是给出jquery代码以对asp.net Web API进行ajax发布:

var product =
    JSON.stringify({
        productGroup: "Fablet",
        productId: 1,
        productName: "Lumia 1525 64 GB",
        sellingPrice: 700
    });

$.ajax({
    URL: 'http://localhost/api/Products',
    type: 'POST',
    contentType: 'application/json',
    data: product,
    success: function (data, status, xhr) {
        alert('Success!');
    },
    error: function (xhr, status, error) {
        alert('Update Error occurred - ' + error);
    }
});


2
不需要dataType。
Erik Philips

0

确保您的WebAPI服务期望使用结构与您传递的JSON匹配的强类型对象。并确保您对要发布的JSON进行字符串化。

这是我的JavaScript(使用AngluarJS):

$scope.updateUserActivity = function (_objuserActivity) {
        $http
        ({
            method: 'post',
            url: 'your url here',
            headers: { 'Content-Type': 'application/json'},
            data: JSON.stringify(_objuserActivity)
        })
        .then(function (response)
        {
            alert("success");
        })
        .catch(function (response)
        {
            alert("failure");
        })
        .finally(function ()
        {
        });

这是我的WebAPI控制器:

[HttpPost]
[AcceptVerbs("POST")]
public string POSTMe([FromBody]Models.UserActivity _activity)
{
    return "hello";
}

0

以下代码返回json格式的数据,而不是xml -Web API 2:-

将以下行放入Global.asax文件中

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
        GlobalConfiguration.Configuration.Formatters.Remove(GlobalConfiguration.Configuration.Formatters.XmlFormatter);

0
@model MVCClient.Models.ProductDetails

@{
    ViewBag.Title = "ProductDetails";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("#Save").click(function () {
            var ProductDetails = new Object();
            ProductDetails.ProductName =  $("#txt_productName").val();
            ProductDetails.ProductDetail = $("#txt_desc").val();
            ProductDetails.Price= $("#txt_price").val();
            $.ajax({
                url: "http://localhost:24481/api/Product/addProduct",
                type: "Post",
                dataType:'JSON',
                data:ProductDetails, 

                success: function (data) {
                    alert('Updated Successfully');
                    //window.location.href = "../Index";
                },
                error: function (msg) { alert(msg); }
            });
        });
    });
    </script>
<h2>ProductDetails</h2>

<form id="form1" method="post">
    <fieldset>
        <legend>ProductDetails</legend>


        <div class="editor-label">
            @Html.LabelFor(model => model.ProductName)
        </div>
        <div class="editor-field">

            <input id="txt_productName" type="text" name="fname">
            @Html.ValidationMessageFor(model => model.ProductName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProductDetail)
        </div>
        <div class="editor-field">

            <input id="txt_desc" type="text" name="fname">
            @Html.ValidationMessageFor(model => model.ProductDetail)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Price)
        </div>
        <div class="editor-field">

            <input id="txt_price" type="text" name="fname">
            @Html.ValidationMessageFor(model => model.Price)
        </div>



        <p>
            <input id="Save" type="button" value="Create" />
        </p>
    </fieldset>

</form>
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>

</form>



@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}


0

1)在您的客户端,您可以通过以下字符串向您发送http.post请求

var IndexInfo = JSON.stringify(this.scope.IndexTree);
this.$http.post('../../../api/EvaluationProcess/InsertEvaluationProcessInputType', "'" + IndexInfo + "'" ).then((response: any) => {}

2)然后在您的Web api控制器中可以反序列化它

public ApiResponce InsertEvaluationProcessInputType([FromBody]string IndexInfo)
    {
var des = (ApiReceivedListOfObjects<TempDistributedIndex>)Newtonsoft.Json.JsonConvert.DeserializeObject(DecryptedProcessInfo, typeof(ApiReceivedListOfObjects<TempDistributedIndex>));}

3)您的ApiReceivedListOfObjects类应如下所示

public class ApiReceivedListOfObjects<T>
    {
        public List<T> element { get; set; }

    }

4)在第2步中的JsonConvert.DeserializeObject命令之前,确保序列化的字符串(此处为IndexInfo)类似于以下结构

var resp = @"
    {
        ""element"": [
        {
            ""A"": ""A Jones"",
            ""B"": ""500015763""
        },
        {
            ""A"": ""B Smith"",
            ""B"": ""504986213""
        },
        {
            ""A"": ""C Brown"",
            ""B"": ""509034361""
        }
        ]
    }";
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.