แก้ไข : 31/10/2017
รหัส / วิธีการเดียวกันนี้จะทำงานกับAsp.Net Core 2.0เช่นกัน ความแตกต่างที่สำคัญคือในแกน asp.net ทั้งตัวควบคุมเว็บ api และตัวควบคุม Mvc จะรวมเข้าด้วยกันเป็นแบบตัวควบคุมเดียว ดังนั้นประเภทกลับของคุณอาจจะIActionResultหรือหนึ่งในการดำเนินงานของมัน (Ex: 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"
});
});
ผลลัพธ์
contentTypeproperty บอกเซิร์ฟเวอร์ว่าเรากำลังส่งข้อมูลในรูปแบบ JSON เนื่องจากเราส่งโครงสร้างข้อมูล JSON การเชื่อมโยงโมเดลจะเกิดขึ้นอย่างถูกต้อง
หากคุณตรวจสอบส่วนหัวคำขออาแจ็กซ์, คุณสามารถเห็นได้ว่าค่าถูกกำหนดให้เป็นContent-Typeapplication/json
หากคุณไม่ได้ระบุ contentType อย่างชัดเจนมันจะใช้ประเภทเนื้อหาเริ่มต้นซึ่งก็คือ application/x-www-form-urlencoded;
แก้ไขเมื่อพฤศจิกายน 2558 เพื่อแก้ไขปัญหาอื่น ๆ ที่อาจเกิดขึ้นในความคิดเห็น
การโพสต์วัตถุที่ซับซ้อน
สมมติว่าคุณมีคลาสโมเดลมุมมองที่ซับซ้อนเป็นพารามิเตอร์วิธีการดำเนินการทางเว็บ 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;}
}
และจุดสิ้นสุดของเว็บ 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 ทั้งตัวควบคุมเว็บ 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 :)
});
การรวมโมเดลทำงานได้กับคุณสมบัติบางอย่าง แต่ไม่ใช่ทั้งหมด! ทำไม
หากคุณไม่ได้ตกแต่งพารามิเตอร์เมธอด web api พร้อมกับ[FromBody]แอ็ตทริบิวต์
[HttpPost]
public CreateUserViewModel Save(CreateUserViewModel m)
{
return m;
}
และส่งโมเดล (อ็อบเจ็กต์ raw javascript ไม่ใช่ในรูปแบบ JSON) โดยไม่ระบุค่าคุณสมบัติ contentType
$.ajax({
type: "POST",
data: model,
url: "../product/save"
}).done(function (res) {
console.log('res', res);
});
การรวมโมเดลจะทำงานสำหรับคุณสมบัติแฟล็ตบนโมเดลไม่ใช่คุณสมบัติที่ชนิดเป็นคอมเพล็กซ์ / ชนิดอื่น ในกรณีของเราIdและNameคุณสมบัติจะถูกผูกไว้กับพารามิเตอร์อย่างถูกต้องmแต่Tagsคุณสมบัติจะเป็นรายการที่ว่างเปล่า
ปัญหาเดียวกันนี้จะเกิดขึ้นหากคุณใช้เวอร์ชันย่อ$.postซึ่งจะใช้ประเภทเนื้อหาเริ่มต้นเมื่อส่งคำขอ
$.post("../product/save", model, function (res) {
//res contains the markup returned by the partial view
console.log('res', res);
});