Sending Array to ASP.NET MVC Model through JQuery Ajax

Question

I am trying to send a model to ASP.NET MVC controller action, but for some reason do i not get the array along properly.

The Javascript code, the array is "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;

The model i am trying to send

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

And the action

public JsonResult AddRepeatingItem(int listId, NewRepeatingItemModel model)
        {

What can i do to get the Days alog properly? I have tested the array by doing a alert(postData.Days) and that alerts "1,5"

Answer 1

You could use a JSON request:

$.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);
    }
});

Notice the following modifications to your AJAX request:

1. Set a JSON request content type:

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

2. Send JSON:

   data: JSON.stringify(postData)
   

The JSON.stringify method is natively implemented in modern browsers. For all the other legacy stuff you need to include json2.js.

Answer 2

Set the traditional setting of the ajax request to 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);             
    }         
}); 

Answer 3

try setting contentType: 'application/json' in your $.ajax() call.