2017-10-13 61 views
4

我想從ajax調用發送對象數組到控制器動作。從ajax獲取數據到mvc動作

在後端側我

容器類:

public class MyContainer 
{ 
    public string Id { get; set; } 
    public Filter[] Filters { get; set; } 
} 

public class Filter 
{ 
    public string Name { get; set; } 
    public string[] Values { get; set; } 
} 

和行動:

public ActionResult MyAction(MyContainer container) 
{ 
    var id = container.Id; 
    foreach(Filter filter in container.Filters) 
    { 
     //Do something 
    } 
} 

在前端側我

$(document).on('click', 'mySelector', function (event) { 

    //Create first object 
    var firstIds = {}; 
    firstIds.Name = "Custom Name 1"; 
    firstIds.Values = GetIds('param1'); //this return an array of strings 

    //Create second object 
    var secondIds = {}; 
    secondIds.Name = "Custome Name 2"; 
    secondIds.Values = GetIds('param2'); //another array 

    var Id = $(this).attr('id'); //id of element 

    //Add objects to array 
    var filters = []; 
    filters.push(firstIds); 
    filters.push(secondIds); 

    $.ajax({ 
     method: "GET", 
     url: baseUrl+"/MyAction", 
     //traditional: true, //I tried with and without that parameter 
     data: 
     { 
      Id: Id, 
      Filters: filters 
     }, 
     contentType: 'application/json', 
     success: function (res) { 
      alert('success') 
     } 
    }); 
}); 

所以如果我在例子中使用它頂部,運行中的容器對象具有Id值並且在過濾器中具有2個元素的數組,但是它們都具有Name和Values作爲null。

將傳統設置爲True,我得到了container.Id set但container.Filters = null。

有什麼建議嗎? 謝謝。

回答

4

在組合使用POST請求與JSON.stringify()方法。

C#

[HttpPost] 
public ActionResult MyAction(MyContainer container) 
{ 
    var id = container.Id; 
    foreach(Filter filter in container.Filters) 
    { 
     //Do something 
    } 
} 

JQUERY

$.ajax({ 
    method: "POST", 
    url: baseUrl+"/MyAction", 
    data:JSON.stringify(
    { 
     Id: Id, 
     Filters: filters 
    }), 
    contentType: 'application/json', 
    success: function (res) { 
     alert('success') 
    } 
}); 

爲什麼你需要JSON.stringify()方法?

contentType是數據要發送的類型,所以application/json;默認爲application/x-www-form-urlencoded; charset=UTF-8.

如果使用application/json,你必須按順序發送JSON對象使用JSON.stringify()

JSON.stringify()變爲一個javascript對象 JSON 文本並將其存儲在一個string

2

您應該使用POST方法而不是GET請求ajax。正在發佈數據。並且你的行爲應該有[HttpPost]裝飾者。

$.ajax({ 
     method: "POST", 
     url: baseUrl+"/MyAction", 
     data: 
     { 
      Id: Id, 
      Filters: filters 
     }, 
     contentType: 'application/json', 
     success: function (res) { 
      alert('success') 
     } 
    });