使用 jQuery 将数组从视图发布到控制器

Question

function myItemsViewModel(ItemID, GroupID, ItemName, Quantity) {
this.ItemID = ItemID;
this.GroupID = GroupID;
this.ItemName = ItemName;
this.Quantity = Quantity;

}

我有下面的代码post连接到控制器

 var CreateRecord = function () {
    var Name = $.trim($("#divCreate").find("#txtName").val());
    var Department  = $.trim($("#divCreate").find("#txtDepartment").val());

    var ItemsList = [];
    $('#myDynamicTable').find('tr').each(function () {
        var row = $(this);
        var itemName = $.trim(row.find(".itemName input").val());
        var itemQty = $.trim(row.find(".itemQty input").val());

        var myItems = new myItemsViewModel("", "", itemName, itemQty);
        ItemsList.push(myItems);
    });

    var obj = new myRecordEntryViewModel("", Name, Department, ItemsList);
    var viewmodel = JSON.stringify(obj);    
                $.ajax({
                    type: 'POST',
                    cache: false,
                    dataType: 'html',
                    data: viewmodel,
                    headers: GetRequestVerificationToken(),
                    contentType: 'application/json; charset=utf-8',
                    url: '/' + virtualDirectory + '/RecordEntry/Save',
                    success: function (data) {
                        $("#divMaster").html(data);
                        return false;
                    },
                    error: function (msg) {
                        alert("Error Submitting Record Request!");
                    }
                });
            }

在 var viewmodel = JSON.stringify(obj); 行，viewmodel 在 ItemsList 数组变量中包含我想要的所有值。

问题是我的 ItemsList 数组在控制器中为 null。名称和部门正在通过正确的传递值。

下面是我的控制器代码。

Class

 public class myRecordEntryViewModel 
    {
        public  long ID { get; set; }
        public  string Name { get; set; }
        public string Department { get; set; }
        public string[] ItemsList { get; set; }
    }

保存操作

    [ActionName("Save")]
    [NoCache]
    public ActionResult Save(myRecordEntryViewModel viewModel)
    {
            //here viewModel.ItemsList is null, what could i be missing
            if (this.SaveEntry(viewModel.Name,viewModel.Department,viewModel.ItemsList))
            {

            }
        return this.View();
    }

我想知道为什么 viewModel.ItemsList 在控制器中为空，但它在 jQuery 的 post 期间有值。

Answer 1

你的代码有几个问题...

1) class 中的 ItemList 和 javascript 代码不一样 - 第一个是字符串数组，第二个是对象数组

2) 在您的操作方法中，您应该更改参数类型，如下所示：

public ActionResult Save(string viewModel)

3) 在操作方法的主体中，您应该反序列化 json 字符串 (viewModel) 并从中创建模型对象。下面是一个例子...

Answer 2

您应该为项目列表中的项目创建一个 class（在 C# 中）

public class Item {
    public string ItemName { get; set; }
    public int Quantity { get; set; }
}

然后更改视图模型class

 public class myRecordEntryViewModel 
{
    public  long ID { get; set; }
    public  string Name { get; set; }
    public string Department { get; set; }
    //public string[] ItemsList { get; set; }
    public List<Item> ItemsList {get ; set;}
}

控制器无法将您请求的项目列表映射到模型中，因为一个是字符串列表，另一个是对象列表。

Answer 3

试试下面的代码，看看你的模型是否得到了值。 如果您遇到任何问题请告诉我，因为我已经在我的一个项目中实现了它

var CreateRecord = function () {
    var Name = $.trim($("#divCreate").find("#txtName").val());
    var Department  = $.trim($("#divCreate").find("#txtDepartment").val());
    var model="";
    var ItemsList = [];
    $('#myDynamicTable').find('tr').each(function () {
        var row = $(this);
        var itemName = $.trim(row.find(".itemName input").val());
        var itemQty = $.trim(row.find(".itemQty input").val());

        var myItems = new myItemsViewModel("", "", itemName, itemQty);
        ItemsList.push(myItems);
    });
    model = ['Name' : Name , 'Department' : Department , 'ItemsList' :ItemsList];
       $.ajax({
                    type: 'POST',
                    cache: false,
                    dataType: 'html',
                    data: JSON.stringify(model),
                    headers: GetRequestVerificationToken(),
                    contentType: 'application/json; charset=utf-8',
                    url: '/' + virtualDirectory + '/RecordEntry/Save',
                    success: function (data) {
                        $("#divMaster").html(data);
                        HideLoader();
                        return false;
                    },
                    error: function (msg) {
                        alert("Error Submitting Record Request!");
                        HideLoader();
                    }
                });
            }

使用 jQuery 将数组从视图发布到控制器

Posting an array from view to controller using jQuery

c#

jquery

asp.net-mvc-4