Bagaimana untuk lulus json data POST ke Web metode API sebagai objek?

ASP.NET MVC4 Web API aplikasi mendefinisikan metode post untuk menyimpan pelanggan. Pelanggan yang berlalu dalam format json di POSTING permintaan tubuh. Pelanggan parameter dalam metode post berisi nilai null untuk properti.

Cara untuk memperbaiki kesalahan ini sehingga diposting data akan dilewatkan sebagai objek pelanggan ?

Jika mungkin Content-Type: application/x-www-form-urlencoded harus digunakan karena saya tidak tahu bagaimana untuk mengubahnya dalam javascript metode yang posting form.

Controller:

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

Permintaan:

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"}
Larutan

EDIT : 31/10/2017

Kode yang sama/pendekatan yang akan bekerja untuk Asp.Net Core 2.0 juga. Perbedaan utama adalah, Di asp.net core, web api Mvc controller dan controller yang bergabung bersama-sama untuk satu model kontroler. Begitu anda kembali jenis mungkin IActionResult atau salah satu dari itu's pelaksanaan (Ex :OkObjectResult)


Gunakan

contentType:"application/json"

Anda perlu menggunakan JSON.stringify metode untuk mengubahnya menjadi JSON string ketika anda mengirimkannya,

Dan model pengikat akan mengikat json data untuk kelas objek.

Kode di bawah ini akan bekerja dengan baik (diuji)

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

Hasil

contentType properti memberitahu server bahwa kita mengirim data dalam format JSON. Sejak kami mengirim JSON data, struktur,model mengikat akan terjadi dengan benar.

Jika anda memeriksa ajax request's header, anda dapat melihat bahwa Content-Type nilai diatur sebagai application/json.

Jika anda tidak menentukan contentType secara eksplisit, Ia akan menggunakan default jenis konten yang application/x-www-form-urlencoded;


Edit pada Nov 2015 ke alamat lain yang mungkin isu-isu yang diangkat dalam komentar

Posting obyek yang kompleks

Let's mengatakan anda memiliki kompleks lihat model kelas sebagai web api tindakan parameter metode seperti ini

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

dan web api end point adalah seperti

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

Pada saat tulisan ini dibuat, ASP.NET MVC 6 adalah versi stabil terbaru dan di MVC6, Web api MVC controller dan controller yang mewarisi dari Microsoft.AspNet.Mvc.Controller kelas dasar.

Untuk mengirim data ke metode dari sisi klien, kode di bawah ini harus bekerja dengan baik

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

Model mengikat bekerja untuk beberapa sifat, tapi tidak semua ! Mengapa ?

Jika anda tidak menghiasi web api metode dengan parameter [FromBody] atribut

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

Dan mengirim model(mentah objek javascript, tidak dalam format JSON) tanpa menentukan contentType nilai properti

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

Model mengikat akan bekerja untuk televisi properties pada model, bukan sifat yang mana tipe yang lebih kompleks/tipe lain. Dalam kasus kami, Id dan Nama properties akan benar-benar terikat dengan parameter m, Tapi Kategori properti akan daftar kosong.

Masalah yang sama akan terjadi jika anda menggunakan versi pendek, $.posting yang akan menggunakan default Content-Type saat mengirim permintaan.

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

Bekerja dengan POSTING di webapi dapat menjadi rumit! Ingin menambah sudah jawaban yang benar..

Akan fokus secara khusus pada POSTING seperti berurusan dengan MENDAPATKAN sepele. Saya don't pikir banyak orang akan mencari di sekitar untuk menyelesaikan masalah dengan MENDAPATKAN dengan webapis. Lagian..

Jika pertanyaan anda - Dalam MVC Web Api, cara - Menggunakan tindakan kustom metode nama lain dari generik HTTP kata kerja? - Melakukan beberapa posting? - Posting beberapa jenis yang sederhana? - Posting jenis kompleks melalui jQuery?

Maka berikut solusi yang mungkin membantu:

Pertama, untuk menggunakan Khusus Tindakan Metode dalam Web API, tambahkan web api rute sebagai:

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

Dan kemudian anda dapat membuat tindakan metode seperti:

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

Sekarang, api jQuery berikut dari konsol browser anda

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

Kedua, untuk melakukan beberapa posting, Itu adalah sederhana, membuat beberapa tindakan metode dan menghias dengan [HttpPost] attrib. Gunakan [ActionName("MyAction")] untuk menetapkan nama kustom, dll. Akan datang ke jQuery di keempat titik di bawah ini

Ketiga, Pertama-tama, posting beberapa SEDERHANA jenis dalam satu tindakan adalah tidak mungkin. Selain itu, ada format khusus untuk posting bahkan tunggal sederhana type (terlepas dari passing parameter dalam string query atau SISA style). Ini adalah titik yang telah saya membenturkan kepala saya dengan Istirahat Klien (seperti Fiddler dan Chrome's Canggih ISTIRAHAT klien ekstensi) dan berburu seluruh web selama hampir 5 jam ketika akhirnya, URL berikut terbukti bisa membantu. Akan mengutip konten yang relevan untuk link bisa menghidupkan orang mati!

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: Melihat aneh sintaks?

http://forums.asp.net/t/1883467.aspx?The+menerima+nilai+adalah+null+ketika+I+mencoba+untuk+Pos+untuk+saya+Web+Api

Lagian, mari kita dapatkan dari cerita itu. Bergerak di:

Keempat, posting jenis kompleks melalui jQuery, ofcourse, $.ajax() akan segera datang dalam peran:

Mari kita mengatakan tindakan metode yang menerima objek Orang yang memiliki id dan nama. Jadi, dari 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) }
});

Dan tindakan akan terlihat seperti:

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

Semua hal di atas, bekerja untuk saya!! Cheers!

Komentar (3)

I've hanya telah bermain dengan dan menemukan yang agak aneh hasilnya. Katakanlah anda memiliki properti umum di kelas dalam C# seperti ini:

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

maka anda harus melakukan JSON.stringify trik seperti yang disarankan oleh Shyju dan menyebutnya seperti ini:

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

Namun, jika anda menentukan getter dan setter pada kelas anda seperti ini:

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

kemudian anda dapat menyebutnya jauh lebih sederhana:

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

Ini menggunakan HTTP header:

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

I'm tidak yakin apa yang's terjadi di sini tapi sepertinya bug (fitur?) dalam rangka. Agaknya berbeda mengikat metode ini adalah panggilan yang berbeda "adapter", dan sementara adapter for application/json satu karya dengan sifat umum, satu untuk bentuk data dikodekan doesn't.

Saya tidak tahu apa yang akan dianggap praktek terbaik sekalipun.

Komentar (4)

Gunakan JSON.stringify() untuk mendapatkan string dalam format JSON, memastikan bahwa sementara membuat panggilan AJAX anda lulus di bawah ini disebutkan atribut-atribut:

  • contentType: 'application/json'

Di bawah ini adalah memberikan kode jquery untuk membuat ajax post panggilan untuk asp.net web api:

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);
    }
});
Komentar (1)

Pastikan bahwa anda WebAPI layanan mengharapkan sangat diketik objek dengan struktur yang sesuai dengan JSON bahwa anda lewat. Dan pastikan bahwa anda stringify JSON yang anda POSTing.

Berikut ini adalah JavaScript saya (menggunakan 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 ()
        {
        });

Dan di sini adalah saya WebAPI Controller:

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

Berikut kode untuk mengembalikan data dalam format json ,bukan xml -Web API 2 :-

Masukan baris berikut di file Global.asax

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
        GlobalConfiguration.Configuration.Formatters.Remove(GlobalConfiguration.Configuration.Formatters.XmlFormatter);
Komentar (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>



        ProductDetails

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



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



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

Microsoft memberi contoh yang baik untuk melakukan ini:

https://docs.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part-1

Pertama memvalidasi permintaan

if (ModelState.IsValid)

dan daripada menggunakan serial data.

Content = new StringContent(update.Status)

Berikut ini 'Status' sebuah lapangan di kompleks jenis. Serialisasi dilakukan oleh .BERSIH, tidak ada perlu khawatir tentang itu.

Komentar (0)

1)Di sisi client, anda dapat mengirim anda http.posting permintaan dalam string seperti di bawah ini

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

2)Kemudian di web api controller anda dapat deserialize

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

3)Anda ApiReceivedListOfObjects kelas harus menjadi seperti di bawah ini

public class ApiReceivedListOfObjects
    {
        public List element { get; set; }

    }

4)pastikan bahwa serial string (IndexInfo di sini) menjadi seperti di bawah struktur sebelum JsonConvert.DeserializeObject perintah pada langkah 2

var resp = @"
    {
        ""element"": [
        {
            ""A"": ""A Jones"",
            ""B"": ""500015763""
        },
        {
            ""A"": ""B Smith"",
            ""B"": ""504986213""
        },
        {
            ""A"": ""C Brown"",
            ""B"": ""509034361""
        }
        ]
    }";
Komentar (0)