在ASP.NET MVC中使用AJAX发布列表数据

时间:2017-11-28 20:12:50

标签: ajax asp.net-mvc

我借助视图中的循环生成了一个复选框列表

<div id = "MyForm">
    @for (int idx = 0; idx < Model.ListOfAbuseTypes.Count; idx++)
    { 
        @Html.CheckBoxFor(x => x.ListOfAbuseTypes[idx].IsChecked)
        @Html.DisplayFor(x => x.ListOfAbuseTypes[idx].Description)
        @Html.HiddenFor(x => x.ListOfAbuseTypes[idx].Description)       
    }
</div>

后来我试图将ajax发布到控制器

$(document).ready(function () {
    $(function () {
        $('#btnAjax').click(function () {
         var jsondata = $('#MyForm').serialize()
          $.ajax({
            type: 'POST',
            url: '/Case/SaveReportSubstantiation',
            traditional: true,
            data: jsondata,
        })
    })
});

当我调试jquery代码时,变量jsondata中的数据存储为字符串,该字符串看起来像这样。

Id=2028&ClientId=2028&FirstName=Athena&LastName=Balaban&Address.AddressLine1=650+W+Belden+&Address.AddressLine2=&Address.City=Chicago&Address.Zip5=60614&Address.Zip4=&Phone=&SSN=000221794&DOB=7%2F1%2F1933+12%3A00%3A00+AM&ListOfAbuseTypes=System.Collections.Generic.List%601%5BCMS.Models.Intake.viewAbuseType%5D&ClassificationId=0&IfUnableToSubstantiateId=0&DateofSubstantiation=&ListOfAbuseTypes%5B0%5D.Id=1&ListOfAbuseTypes%5B0%5D.Code=01&ListOfAbuseTypes%5B0%5D.IsChecked=false&ListOfAbuseTypes%5B0%5D.Description=Physical&ListOfAbuseTypes%5B1%5D.Id=2&ListOfAbuseTypes%5B1%5D.Code=02&ListOfAbuseTypes%5B1%5D.IsChecked=true&ListOfAbuseTypes%5B1%5D.IsChecked=false&ListOfAbuseTypes%5B1%5D.Description=Sexual&ListOfAbuseTypes%5B2%5D.Id=3&ListOfAbuseTypes%5B2%5D.Code=03&ListOfAbuseTypes%5B2%5D.IsChecked=false&ListOfAbuseTypes%5B2%5D.Description=Emotional&ListOfAbuseTypes%5B3%5D.Id=4&ListOfAbuseTypes%5B3%5D.Code=04&ListOfAbuseTypes%5B3%5D.IsChecked=false&ListOfAbuseTypes%5B3%5D.Description=Deprivation&ListOfAbuseTypes%5B4%5D.Id=5&ListOfAbuseTypes%5B4%5D.Code=05&ListOfAbuseTypes%5B4%5D.IsChecked=false&ListOfAbuseTypes%5B4%5D.Description=Passive+Neglect&ListOfAbuseTypes%5B5%5D.Id=6&ListOfAbuseTypes%5B5%5D.Code=06&ListOfAbuseTypes%5B5%5D.IsChecked=false&ListOfAbuseTypes%5B5%5D.Description=Confinement&ListOfAbuseTypes%5B6%5D.Id=7&ListOfAbuseTypes%5B6%5D.Code=07&ListOfAbuseTypes%5B6%5D.IsChecked=false&ListOfAbuseTypes%5B6%5D.Description=Financial+Exploitation&Summary=&AgencyName=&CompletedBy=&Email="

这是我的控制器,它是一个笨拙的,只是为了检查数据是否来了

[HttpPost]
public PartialViewResult SaveReportSubstantiation(viewReportOfSubstantiation jsonData)
{
    viewReportOfSubstantiation ReportSubstantiation = new viewReportOfSubstantiation();
    return PartialView();
}

当我把光标放在jsondata上时,除了我上面提到的列表中的数据外,一切都会到来。

我的模特

Public  class viewReport
{

    public int Id { get; set; }


    public int ClientId { get; set; }

    [Display(Name = "First Name:")]
    public string FirstName { get; set; }

    [Display(Name = "Last Name:")]
    public string LastName { get; set; }


    public List<viewAbuseType> ListOfAbuseTypes { get; set; }


    public viewReport()
    {
        this.ListOfAbuseTypes = new List<viewAbuseType>();
    }



}

public class viewAbuseType
{

    public int? Id { get; set; }





    [Display(Name = "Code")]

    public string Code { get; set; }


    [Display(Name = "Description")]

    public string Description { get; set; }


    public string DisplayText { get; set; }


    [Display(Name = "Is Delete?")]
    public bool IsDelete { get; set; }


    [Display(Name = "Is Checked?")]
    public bool IsChecked { get; set; }
}   

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

您发送的数据包括

 ...&ListOfAbuseTypes=System.Collections.Generic.List%601%5BCMS.Models.Intake.viewAbuseType%5D&ClassificationId=0&.... 

这只能意味着你视图中的某个地方包含了一个试图绑定到集合的表单控件,例如

 @Html.HiddenFOr(m => m.ListOfAbuseTypes)

您无法将输入绑定到集合(仅集合中每个项目的每个属性),并且正在发生的是DefaultModelBinder尝试将ListOfAbuseTypes的值设置为该字符串(当然失败了。)

检查您查看并删除该输入,您的收藏将正确绑定。

不相关,但是:

  1. 移除$(document).ready(function () {$(function () { 从脚本(两者都意味着相同的事情。
  2. 从ajax选项中删除traditional: true,(仅限于此 适用于发布简单类型的数组
  3. 使用url: '@Url.Action("SaveReportSubstantiation", "Case")', 确保您的网址始终正确生成