iT邦幫忙

0

如何將巢狀Array打包成JSON送進去ajax,並透過.net MVC取值呢?

  • 分享至 

  • xImage

模擬測試資料如下:

public class InsertGroupA
{
    public string paramA1 { get; set; }
    public string paramA2 { get; set; }
}
public class InsertGroupB
{
    public string paramB1 { get; set; }
    public string paramB2 { get; set; }
}

public class JsonPostModel
{
    List<InsertGroupA> GroupA { get; set; }
    List<InsertGroupB> GroupB { get; set; }
    public string Type { get; set; }
    public string Product { get; set; }
}
let GroupA = [{
    paramA1: 'paramA1',
    paramA2: 'paramA2'
},{ paramA1: 'paramA1',
    paramA2: 'paramA2'
}];
let GroupB = [{
    paramB1: 'paramB1',
    paramB2: 'paramB2'
},{ paramB1: 'paramB1',
    paramB2: 'paramB2'
}];
//3組測試集,內含兩個GroupA和GroupB集合
let MultiJson2 = {
    formPosts: [{
        Type: "TypeA",
        Product: "ProductA",
        GroupA: GroupA,
        GroupB: GroupB
    }, {
        Type: "TypeB",
        Product: "ProductB",
        GroupA: GroupA,
        GroupB: GroupB
    }, {
        Type: "TypeC",
        Product: "ProductC",
        GroupA: GroupA,
        GroupB: GroupB
    }]
};
$.ajax({
    type: "POST",
    url: "@Url.Action("JqueryPost")",
    data: JSON.stringify(MultiJson2),
    contentType: "application/json",
    async: false,
    success: function (result) {
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log(textStatus, errorThrown);
    }
});
[HttpPost]
public ActionResult JqueryPost(List<JsonPostModel> formPosts)
{
    return View("Create");
}

送出後最外層的3組測試LIST值有拿到,各組裡的Product和Type值也都有拿到,但內層的LIST的值為null,也就是物件裡的GroupA和GroupB的List清單拿不到,不知道該如何在MVC可以拿到內層LIST的資料呢?

...(自刪)
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
japhenchen
iT邦超人 1 級 ‧ 2021-02-09 10:13:15

你寫的最上層MultiJson2不是array,改這樣

    let MultiJson2 = [
        {
            Type: "TypeA",
            Product: "ProductA",
            GroupA: GroupA,
            GroupB: GroupB
        }, {
            Type: "TypeB",
            Product: "ProductB",
            GroupA: GroupA,
            GroupB: GroupB
        }, {
            Type: "TypeC",
            Product: "ProductC",
            GroupA: GroupA,
            GroupB: GroupB
        }
    ];
fillano iT邦超人 1 級 ‧ 2021-02-09 11:35:08 檢舉

他的問題好像是JsonPostModel有收到,但是GroupA跟GroupB這兩個List沒收到。

但我測試的結果是有,只是嵌套的結構跟MVC的class不同,List<T>不該以 { } 來包而是 [ ]

leo226 iT邦新手 4 級 ‧ 2021-02-13 11:14:39 檢舉

japhenchen
Json改成Array開頭來接就可以囉,但好以物件起始{},和以陣列起始[],這樣的操作先排除在MVC接口的問題,在資料架構的安排上會有什麼差異呢?
物件:包一組(例:人有很多屬性)
陣列:很多組資料包一起(例:有很多人,有一群人,所以用陣列去管理)
所以依我的需求應該是物件包陣列好像比較適合~
而陣列包物件的用法還沒想到如何應用~
Model

public class RootContainer3
{
    public string Title { get; set; }
    public string Content { get; set; }
    public List<Photo> photos { get; set; }
    public List<Comment> comments { get; set; }
}

JS

$('#Test3').on('click', function () {
    let photoData = [{
        Title: 'TestTitleAA',
        UserName: 'TestContentA',
        Description: "DescriptionA"
    }, {
        Title: 'TestTitleBB',
        UserName: 'TestContentB',
        Description: "DescriptionB"
    }, {
        Title: 'TestTitleCC',
        UserName: 'TestContentC',
        Description: "DescriptionC"
    }];

    let commentData = [];
    commentData.push({ Subject: "subjectA", Body: "bodyA", UserName: "UserNameA" });
    commentData.push({ Subject: "subjectB", Body: "bodyB", UserName: "UserNameB" });
    let MultiJson3 = [{
        Title: "titleA",
        Content: "contentA",
        photos: photoData,
        comments: commentData
    }, {
        Title: "titleB",
        Content: "contentB",
        photos: photoData,
        comments: commentData
    }, {
        Title: "titleC",
        Content: "contentC",
        photos: photoData,
        comments: commentData
    }];
    $.ajax({
        type: "POST",
        url: "@Url.Action("myTest3")",
        data: JSON.stringify(MultiJson3),
    contentType: "application/json",
    async: false,
    success: function (result) {
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log(textStatus, errorThrown);
    }
});
[HttpPost]
//public ActionResult JqueryPost(string type, List<Photo> model, List<Comment> comment)
public ActionResult myTest3(List<RootContainer3> RootContainer3)
{
    return View("Create");
}
1
fillano
iT邦超人 1 級 ‧ 2021-02-09 13:09:30
public class JsonPostModel
{
    List<InsertGroupA> GroupA { get; set; }
    List<InsertGroupB> GroupB { get; set; }
    public string Type { get; set; }
    public string Product { get; set; }
}

可能少了兩個public,改成:

public class JsonPostModel
{
    public List<InsertGroupA> GroupA { get; set; }
    public List<InsertGroupB> GroupB { get; set; }
    public string Type { get; set; }
    public string Product { get; set; }
}

試試看。

leo226 iT邦新手 4 級 ‧ 2021-02-13 10:52:38 檢舉

C# Model

public class RootContainer
{
    public List<GroupA> groupA { get; set; }
    public List<GroupB> groupB { get; set; }
}

public class GroupA
{
    public string product { get; set; }
    public string type { get; set; }
    public List<DataTableA> dataTableA { get; set; }
    public List<DataTableB> dataTableB { get; set; }
}
public class DataTableA
{
    public string AParam1 { get; set; }
    public string AParam2 { get; set; }
}
public class DataTableB
{
    public string BParam1 { get; set; }
    public string BParam2 { get; set; }
}

public class GroupB
{
    public string model { get; set; }
    public string type { get; set; }
    public string version { get; set; }
    public List<DataTableC> dataTableC { get; set; }
    public List<DataTableD> dataTableD { get; set; }
}
public class DataTableC
{
    public string CParam1 { get; set; }
    public string CParam2 { get; set; }
}
public class DataTableD
{
    public string DParam1 { get; set; }
    public string DParam2 { get; set; }
}

JS

$('#Test2').on('click', function () {
    let dataTableA = [{
        Aparam1: 'param1',
        Aparam2: 'param2'
    }, {
        Aparam1: 'param3',
        Aparam2: 'param4'
    }, {
        Aparam1: 'param5',
        Aparam2: 'param6'
    }];

    let dataTableB = [{
        Bparam1: 'param1',
        Bparam2: 'param2'
    }, {
        Bparam1: 'param3',
        Bparam2: 'param4'
    }, {
        Bparam1: 'param5',
        Bparam2: 'param6'
    }];

    let dataTableC = [{
        Aparam1: 'param1',
        Aparam2: 'param2'
    }, {
        Aparam1: 'param3',
        Aparam2: 'param4'
    }, {
        Aparam1: 'param5',
        Aparam2: 'param6'
    }];

    let dataTableD = [{
        Bparam1: 'param1',
        Bparam2: 'param2'
    }, {
        Bparam1: 'param3',
        Bparam2: 'param4'
    }, {
        Bparam1: 'param5',
        Bparam2: 'param6'
    }];
    let dataTableE = [{
        Aparam1: 'param1',
        Aparam2: 'param2'
    }, {
        Aparam1: 'param3',
        Aparam2: 'param4'
    }, {
        Aparam1: 'param5',
        Aparam2: 'param6'
    }];

    let dataTableF = [{
        Bparam1: 'param1',
        Bparam2: 'param2'
    }, {
        Bparam1: 'param3',
        Bparam2: 'param4'
    }, {
        Bparam1: 'param5',
        Bparam2: 'param6'
    }];

    let RootContainer = {
        GroupA: [{
            product: "productA",
            type: "typeA",
            dataTableA: dataTableA,
            dataTableB: dataTableB
        }, {
            product: "productB",
            type: "typeB",
            dataTableA: dataTableC,
            dataTableB: dataTableD
        }, {
            product: "productC",
            type: "typeC",
            dataTableA: dataTableE,
            dataTableB: dataTableF
        }]
    };

    console.log(JSON.stringify(RootContainer));

    $.ajax({
        type: "POST",
        url: "@Url.Action("myTest2")",
        data: JSON.stringify(RootContainer),
    contentType: "application/json",
    async: false,
    success: function (res) {
        //debugger;
        //console.log(res);
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log(textStatus, errorThrown);
    }
});

Controller

[HttpPost]
public ActionResult myTest2(RootContainer rootContainer)
{
    return View("Create");
}

fillano
重新規劃一下自己的範例與架構,目前這個架構測試可以接到值了,之前的測試範例在Model裡可能少了一層RootContainer來包下面的GroupA List,應該是Model架構上有錯誤。
這樣要再綁一個GroupB的資料集進去應該也不是問題了。
主要是為了解決將分散在各地的Table資料,一次性的更新DB,如果其中一個環節有錯就rollback,目前想到好像只能用這樣的方法。
因為rollback好像只能在一次呼叫裡處理,各別呼叫的方法只能處理各別的rollback~

我要發表回答

立即登入回答