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

时间:2011-06-15 21:20:29

标签: c# jquery ajax asp.net-mvc-3

我正在尝试将模型发送到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)
        {

如何正确使用Days alog? 我通过执行警报(postData.Days)并警告“1,5”

来测试数组

3 个答案:

答案 0 :(得分:4)

您可以使用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)
    
  3. JSON.stringify方法在现代浏览器中原生实现。对于所有其他遗留内容,您需要包含json2.js

答案 1 :(得分: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);             
    }         
}); 

答案 2 :(得分:2)

尝试在contentType: 'application/json'来电中设置$.ajax()