使用Ajax将复杂对象发送到控制器

问题描述 投票:0回答:1

我有一个MVC应用程序,我试图通过ajax调用提交表单,同时还要传递另一个复杂的对象。这意味着我要将2个复杂的对象传递回控制器:表单数据和对象数组。问题是,如果我将contentType设置为“ application / x-www-form-urlencoded”,但是对象数组以null形式出现,则表单数据使其对控制器正常。如果将contentType设置为“ application / json”,则对象数组使其对控制器正常,但表单数据为null。所以我想我基本上需要将表单数据转换为json对象。这是我所拥有的:

ViewModel:

Public FOO foo
{
     public ObjectBar BarObject {get; set;}
     public string BarString {get; set;}
     // more properties
}

控制器:

[HTTPPost]
Public ActionResult Submit(Foo viewModel, OtherObject[] dataSet)
{
     //do stuff
}

查看:

// bunch of fields

<script>

    function submitForm(e) {
        debugger;
        var dataSets = getGridData();
        var form = $("#formName").serialize();
        var data = JSON.stringify({ viewModel: form, dataSet: dataSets }); //this is close, need to convert form data to json

        return $.ajax({
            type: "POST",
            url: '@Url.Action("Submit", "Report")',
            data: data,
            contentType: 'application/json',
            processData: false,
        });
    }

    //some more javascript stuff
</script>

搜索堆栈溢出,似乎我需要做的所有工作将表单数据转换为json都是类似的

var jsonForm = JSON.parse(JSON.stringify(form));

但是由于某些原因,即使我只是尝试将jsonForm仅传递给viewForm参数,也无法正常工作。我应该使用其他东西来进行转换,还是我只是想念东西?

javascript asp.net ajax model-view-controller
1个回答
0
投票

在堆栈溢出中此答案提供了一些帮助:

Convert form data to JavaScript object with jQuery

我发现了这句话:

$('form')。serializeArray()。map(function(x){this [x.name] = x.value; return this;}。bind({}))[0]

所以我更新了我的代码并完成了:

function submitForm(e) {
    debugger;
    var dataSets = getGridData();
    var form = $("#formName").serializeArray().map(function (x) { this[x.name] = x.value; return this; }.bind({}))[0];
    var data = JSON.stringify({ viewModel: form, dataSets: dataSets }); //this is close, need to convert form to json... now this works!


    return $.ajax({
        type: "POST",
        url: '@Url.Action("Submit", "Report")',
        data: data,
        contentType: 'application/json; charset=utf-8',
        processData: true,
    });
© www.soinside.com 2019 - 2024. All rights reserved.