通過JQuery發送數組到ASP.NET MVC模型Ajax

Question

我想發送一個模型到ASP.NET MVC控制器的動作，但由於某種原因，我沒有得到正確的數組。

的JavaScript代碼，該陣列是 「天」

var days = []; 
     var i = 0; 
     $('input[name="Days[]"]:checked').each(function(){ 
      days[i] = $(this).val(); 
      i++; 
     }); 

     var postData = { 
      listId: listId,      
      Quantity: $('select[name="@Html.NameFor(x=> x.Quantity)"]').val(), 
      Item: $('input[name="@Html.NameFor(x=> x.Item)"]').val(), 
      RepeatingType: $('select[name="@Html.NameFor(x=> x.RepeatingType)"]').val(), 
      IntervalDaily: $('select[name="@Html.NameFor(x=> x.IntervalDaily)"]').val(), 
      IntervalWeekly: $('select[name="@Html.NameFor(x=> x.IntervalWeekly)"]').val(), 
      IntervalMonthly: $('select[name="@Html.NameFor(x=> x.IntervalMonthly)"]').val(), 
      IntervalYearly: $('select[name="@Html.NameFor(x=> x.IntervalYearly)"]').val(), 
      Days: days, 
      Time: $('input[name="@Html.NameFor(x=> x.Time)"]').val(), 
      StartsOn: $('input[name="@Html.NameFor(x=> x.StartsOn)"]').val(), 
      EndType: $('select[name="@Html.NameFor(x=> x.EndType)"]').val(), 
      EndsOn: $('input[name="@Html.NameFor(x=> x.EndsOn)"]').val(), 
      EndOccurrences: $('select[name="@Html.NameFor(x=> x.EndOccurrences)"]').val() 
     }; 

     alert(postData.Days); 
     $.ajax({ 
      type: "POST", 
      url: "/List/AddRepeatingItem/", 
      dataType: "json", 
      data: postData, 
      success: function(data) { 
       if (data) { 
        alert("Success"); 
       } 
      }, error: function(xhr, status, error) { 
        DisplayError("Error!!! " + xhr); 
      } 
     }); 
     return false; 

模型我試圖發送

public class NewRepeatingItemModel 
{ 
    [Required] 
    [DisplayName("Quantity")] 
    [Integer] 
    public int Quantity { get; set; } 

    [Required] 
    [DisplayName("Item")] 
    [StringLength(50, MinimumLength = 3, ErrorMessage = "Item name can not be less then 3 or greater then 50")] 
    public string Item { get; set; } 

    [Required] 
    [DisplayName("Type")] 
    public int RepeatingType { get; set; } 

    [DisplayName("Repeat every")] 
    public int IntervalDaily { get; set; } 
    [DisplayName("Repeat every")] 
    public int IntervalWeekly { get; set; } 
    [DisplayName("Repeat every")] 
    public int IntervalMonthly { get; set; } 
    [DisplayName("Repeat every")] 
    public int IntervalYearly { get; set; } 

    [DisplayName("Repeat on")] 
    public IList<int> Days { get; set; } 

    [Required] 
    [DisplayName("Time")] 
    public TimeSpan Time {get; set;} 

    [DisplayName("Starts On")] 
    [DataAnnotationsExtensions.Date] 
    public DateTime StartsOn {get; set;} 

    [Required] 
    [DisplayName("End Type")] 
    public int EndType { get; set; } 

    [DisplayName("Ends On")] 
    public DateTime EndsOn {get; set;} 

    [DisplayName("Occurrences")] 
    public int EndOccurrences { get; set; } 
} 

和動作

public JsonResult AddRepeatingItem(int listId, NewRepeatingItemModel model) 
     { 

我能做些什麼正確使用Days alog？ 我已通過執行警報（postData.Days）測試了該陣列，並警告「1,5」

Answer 1

你可以使用一個JSON請求：

$.ajax({ 
    type: "POST", 
    url: "/List/AddRepeatingItem/", // <-- never hardcode urls like this or this code might bite you very badly once you ship 
    contentType: 'application/json; charset=utf-8', 
    dataType: "json", 
    data: JSON.stringify(postData), 
    success: function(data) { 
     if (data) { 
      alert("Success"); 
     } 
    }, 
    error: function(xhr, status, error) { 
     DisplayError("Error!!! " + xhr); 
    } 
}); 

注意以下修改您的AJAX請求：

1. 設置JSON請求的內容類型：

   contentType: 'application/json; charset=utf-8' 
   

2. 發送JSON：

   data: JSON.stringify(postData) 
   

JSON.stringify方法原生在現代瀏覽器中實現。對於所有其他遺留的東西，你需要包括json2.js。

Answer 2

嘗試在您的$.ajax()調用中設置contentType: 'application/json'。

Answer 3

設置Ajax請求的傳統設置爲true：

$.ajax({    
    type: "POST",    
    url: "/List/AddRepeatingItem/",    
    dataType: "json",   
    traditional: true, //###THIS SETTING 
    data: postData,    
    success: function(data) {     
     if (data) {      
      alert("Success");     
     }    
    }, 
    error: function(xhr, status, error) {      
     DisplayError("Error!!! " + xhr);    
    }   
});