JS硬编码ajax数据：参数有效。 JS Variable没有

Question

======================

第2部分

如果我使用JSON.stringify（MyDdata），MVC控制器的field1总是具有null（Post（[FromBody] TestModel field1））null值。即使是最简单的JSON字符串。

我使用XML转换为JSON以确保我的JSON数据正确无误。 （我仍然需要了解JSON。）我认为MVC控制器很容易使用以下内容，但输入参数field1为null。至少，TestStrng＆amp; TestStrng2应该有值。

控制器没有崩溃，但它也不了解JSON。

为什么MVC Controler不知道JSON类？

//JavaScript
var MyDdata = 
{
    "TestModel": {
        "TestStrng": "Scott",
        "TestStrng2": "SomethingElse",
        "Usr": { "UsrToken": "aaaa" },
        "LstSubClass": {
            "SubClass": [
            { "FirstName": "Beth" },
            { "FirstName": "Julie" },
            { "FirstName": "John" }
            ]
        }
    }
}
sdata = JSON.stringify(MyDdata);
$.ajax({
    type: 'post',
    url: serviceUrl,
    cache: false,
    data: sdata,
    dataType: "json",
}).done(function (data) {


//C# Class
public class Usr
{
    public string UsrToken { get; set; }
}
public class SubClass
{
    public string FirstName { get; set; }
}
public class TestModel // Main\Master Class
{
    public string TestStrng { get; set; }
    public string TestStrng2 { get; set; }

    public List<SubClass> LstSubClass = new List<SubClass>();

    private Usr _Usr = new Usr();
    public Usr oUsr
    {
        get { return _Usr; }
        set { _Usr = value; }
    }
}

//MVC Controller
[System.Web.Http.Description.ResponseType(typeof(TestModel))]
public HttpResponseMessage Post([FromBody] TestModel field1)
{
// ...
}

//XML Data
<TestModel>
    <TestStrng>Scott</TestStrng>
    <TestStrng2>SomethingElse</TestStrng2>
    <Usr>
        <UsrToken>aaaa</UsrToken>
    </Usr>
    <LstSubClass>
        <SubClass><FirstName>Beth</FirstName></SubClass>
        <SubClass><FirstName>Julie</FirstName></SubClass>
        <SubClass><FirstName>John</FirstName></SubClass>
    </LstSubClass>
</TestModel>

JSON Data
{
  "TestModel": {
    "TestStrng": "Scott",
    "TestStrng2": "SomethingElse",
    "Usr": { "UsrToken": "aaaa" },
    "LstSubClass": {
      "SubClass": [
        { "FirstName": "Beth" },
        { "FirstName": "Julie" },
        { "FirstName": "John" }
      ]
    }
  }
}

======================

第1部分

我正在尝试用C＃学习Web API，并且花了一天时间研究这个问题。问题出在JavaScript "data: ..."。

硬编码可以正常使用

Ajax数据：{'TestStrng': 'one', 'TestStrng2': 'two' }

在控制器的下方，正如预期的那样，p_TestModel包含值'one'＆amp; 'two'。     public HttpResponseMessage Post(TestModel p_TestModel) 但 如果我使用像data: sdata这样的变量，那么数据不会从JS传递给Controller。

我已经尝试过几十种方式而且很多我都不好意思写：

var sdata = "'TestStrng': 'one', 'TestStrng2': 'two'";
sdata = "'TestStrng': 'one'";
var jsonString = JSON.stringify(sdata);
JSON.stringify(sdata); {
  'TestStrng': 'one',
  'TestStrng2': 'two'
}, {
  'TestStrng': 'one',
  'TestStrng2': 'two'
}, {
  field1: "hello"
},
data: {
    sdata
  },
  'TestStrng': 'onetwo'
},
"{ 'TestModel': { 'TestStrng': 'one', 'TestStrng2': 'two' } }",
JSON.stringify(sdata),
  sdata,
  sdata = "'TestStrng': 'one', 'TestStrng2': 'two'";
data: {
  TestModel,
  sdata
},

问题

我做错了什么？ 为什么JS变量不会发送数据，所以控制器可以看到它好像是硬编码的？

C＃class

public class TestModel {
  public string TestStrng { get; set; }
  public string TestStrng2 { get; set; }
}

MVC控制器

[System.Web.Http.Description.ResponseType(typeof(TestModel))]
public HttpResponseMessage Post(TestModel p_TestModel)
{
   // p_TestModel has correct values if hardcoded in JS.
   // It is ALWAYS null if JS uses a variable (sData) to send it.
   ...
}

的JavaScript

$.ajax({
    type: 'post',
    url: serviceUrl,
    cache: false,
    dataType: "json",
    data: sdata, <<<<<<<<<<????
}).done(function (data) {

Answer 1

创建一个javascript对象并使用它。这应该有用。

var sdata= { TestStrng :"Scott",TestStrng2:"SomethingElse" };
$.ajax({
    type: 'post',
    url: serviceUrl,      
    data: sdata
}).done(function (data) { console.log(data) });

如果您的视图模型是没有任何复杂导航属性的平面视图模型，则上述代码将正常工作。但是，如果视图模型上有复杂的属性，则需要将js对象转换为JSON字符串并设置contentType属性

var model= { Name:"S",Address: { City:"Detroit"} };
$.ajax({
    type: 'post',
    url: serviceUrl,      
    data: JSON.stringify(model),
    contentType: "application/json"
}).done(function (data) { console.log(data) });

查看this answer，解释从客户端js代码向您的web api端点发送数据的不同方法。