2

我目前正在尝试将我的视图中的 JSON 对象发布到 MVC 3 应用程序中的控制器,并且我期望来自请求的数据绑定到我的控制器操作的模型参数。但是,当我检查 HTTP POST 请求时,看起来数据是作为查询字符串传递的,我不确定为什么(这一切都很新)。

这是我的 POST 请求:

    $.ajax({
        type: 'POST',
        url: "Test/Add",
        data: { Name: name, Age: age },
        success: function (data) {
            console.log("success");
        },
        error: function (xhr, data, message) {
            console.log(data + ": " + message);
        },
        dataType: "json"
    });

这是我的控制器中的代码,然后是我尝试绑定到的模型的代码:

    [HttpPost]
    public ActionResult Add(PersonModel person)
    {
        System.Threading.Thread.Sleep(1000);

        return View();
    }

    // person model:
    public class Person {

        public string Name {get;set;}
        public int Age {get;set;}

    }

这是提琴手的要求 - 我已经强调了我不确定的部分:

在此处输入图像描述

我认为内容类型将是“应用程序/json”,并且数据看起来不像查询字符串 - 我认为它看起来像这样:

{
    Name: "James",
    Age: 13
}

最终的问题是,如果我在控制器操作中设置断点,我希望看到一个填充的 Person 对象,但它始终为空。如果我将签名替换为类似的东西,(object name, object age)那么我会得到参数的值(两者的字符串数组 - 所以 name 是一个字符串数组,其中 1 个元素等于“James”)。

有什么想法我哪里出错了吗?

哦,仅供参考,我实际上不是 13 岁!这些是我捣碎的第一个数字。

谢谢!

詹姆士

4

2 回答 2

2

@David 是正确的,因为您需要将 contentType 设置为“application/json”。但是您还需要发送 JSON。您正在发送一个对象。要将其转换为 JSON,请使用 JSON.stringify。我尝试将其作为具有此 contentType 设置的对象发送并收到服务器错误。我实际上在不设置 contentType 的情况下让它正常工作。即使请求是“Name=James&Age=13”,MVC 也能够将其转换为对象。我修改了您的测试以将结果回显为 JSON 并显示它们。

这是修改后的控制器

        [HttpPost]
    public string Add(PersonModel person)
    {
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        string result = serializer.Serialize(person);

        return result;
    }

    // person model:
    public class PersonModel
    {

        public string Name { get; set; }
        public int Age { get; set; }

    }

修改后的 Javascript 和 HTML 如下所示:

<input id="doAjax" type="button"  value="Send Json..."/>
<br />
Results:<br />
<textarea id="results" cols="30" rows="3"></textarea>
<script type="text/javascript">

 $( document ).ready( function () {
    $( "#doAjax" ).click( sendJson );
} );

function sendJson() {
    var name = "James";
    var age = "13";
    var person = { Name: name, Age: age };
    var personJson = JSON.stringify( person );
    $.ajax( {
        type: 'POST',
        url: "Test/Add",
        data: personJson,
        contentType: 'application/json',
        success: function ( data ) {
            var jsonStr = JSON.stringify( data );
            $( "#results" ).val( jsonStr );
        },
        error: function ( xhr, data, message ) {
            var jsonStr = JSON.stringify( data );
            $( "#results" ).val( jsonStr + ": " + message );
        },
        dataType: "json"
    } );
}

以下是一些测试的结果:

数据=人;contentType = 未设置;请求=“姓名=詹姆斯&年龄=13”;响应 = "{"姓名":"詹姆斯","年龄":13}"

数据=人Json;contentType = 未设置;请求 = "{"姓名":"詹姆斯","年龄":"13"}"; 响应 = "{"姓名":null,"年龄":0}"

数据=人;contentType = '应用程序/json'; 请求=“姓名=詹姆斯&年龄=13”;response = "System.ArgumentException: 无效的 JSON 原语:名称"

数据=人Json;contentType = '应用程序/json'; 请求 = "{"姓名":"詹姆斯","年龄":"13"}"; 响应 = "{"姓名":"詹姆斯","年龄":"13"}"

请注意,如果未设置 contentType,则默认为 'application/x-www-form-urlencoded'

于 2012-04-05T13:31:51.700 回答
1

dataType传递给的$.ajax是预期的响应类型。您需要添加contentType以指定有效负载类型。

$.ajax({
    type: 'POST',
    url: "Test/Add",
    data: { Name: name, Age: age },
    contentType: 'application/json' //*********
    success: function (data) {
        console.log("success");
    },
    error: function (xhr, data, message) {
        console.log(data + ": " + message);
    },
    dataType: "json"
});

这是 jQuery 文档.ajax()它表明默认的 contentType 是 'application/x-www-form-urlencoded'

于 2012-04-05T12:08:19.053 回答