通过JQuery Ajax将数组发送到ASP.NET MVC模型

Question

我试图将一个模型发送到ASP.NET MVC控制器操作，但由于某些原因，我无法正确地获取数组。

在Javascript代码中，该数组名为“Days”。

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)
        {

我该怎么做才能正确获取天数？我已经通过alert(postData.Days)测试了数组，它会弹出"1,5"。

- Androme

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. Set a JSON request content type:

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

2. Send JSON:

   data: JSON.stringify(postData)
   

JSON.stringify 方法在现代浏览器中已经内置实现。但是，对于所有其他遗留的东西，您需要包含 json2.js。

- Darin Dimitrov

Answer 2

将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);             
    }         
}); 

- Chandu

Answer 3

尝试在您的$.ajax()调用中设置contentType: 'application/json'。

- David Wick