Question

我正在学习ajax，让我的生活更容易前进。我能够按照一个例子获得一个常量数组，以便正常地发送到我的控制器。

现在我正在尝试从html表单中获取数据，我在控制器中得到一个空数组。

使用.serialize()我得到[0] = "item=teststring1&item=teststring2"

使用.serializeArray()我得到一个长度为2（正确大小）的数组，两个值都为null。

我已经了解了serializeArray()的问题以及它如何需要某些标记。

如何解决向控制器发送空数组的问题？

JS

// #EditDate is form id
var data = $('#EditDate').serializeArray();  

        $.ajax({
                url: '@Url.Action("Index", "TrainingDates")',
                type: "POST",
                dataType: "json",
                data: {'dates' : data},
                success: function (result) {
                    alert("success" + result);
                },
                error: function (result) {
                    alert("failure" + result);
                }
        });

        $(element).val('Edit');

HTML

@model List<string>
@{
    ViewBag.Title = "Dates";
}
@using (Html.BeginForm("Index", "TrainingDates", FormMethod.Post, new { @id = "EditDate", @class = "collapse" }))
        {
            foreach (var item in Model)
            {
                <tr>
                    <td>
                        <input type="button" class="btn btn-primary btn-sm" style="width:inherit" onclick="editable('@item', this)" value="Edit">
                    </td>
                    <td>
                            @Html.TextBoxFor(m => item, new { @id = item, name = item, @class = "form-control", @readonly = "readonly" })
                    </td>
                </tr>
            }
        }

控制器

[HttpPost]
public ActionResult Index(List<string> dates)
{
        if(dates != null)
        {
            var json = new { success = true };
            return Json(json);
        }
        return Json(false);
 }

Answer 1

您的操作方法参数是字符串列表。所以基本上对于正确工作的模型绑定，你应该从你的ajax调用发送这样的数组

["12-12-2011","10-10-2011"]

您当前的代码使用jquery serializeArray方法，该方法将创建一个项目数组，每个项目都具有name和value属性。所以基本上你的代码在ajax请求中发送这样的东西。

dates[0][name]:item
dates[0][value]:12-12-2011
dates[1][name]:item
dates[1][value]:10-10-2011

默认模型绑定器无法将其映射到字符串列表。

您需要做的就是向服务器发送一个字符串（或日期）数组。您可以简单地使用jQuery map方法从输入字段值创建数组。

这应该有用。

var d = $.map($("[name='item']"), function(v, k) {
    return v.value;
});              

$.ajax({
    url: '@Url.Action("Index", "TrainingDates")',
    type: "POST",
    data: JSON.stringify(d),
    contentType: "application/json",
    success: function (result) {
        console.log("success" , result);
    },
    error: function (result) {
        alert("failure" + result);
    }
});

我还强烈建议使用正确的数据类型。如果您正在处理日期，为什么不使用DateTime类而不是string？创建DateTime类来处理这样的用例：）

[HttpPost]
public ActionResult Index(List<DateTime> dates)
{
  // to do  : return something
}

Answer 2

您发布的数据与控制器中的变量名称和数据类型不匹配。做出这些微小的调整： Javascript - 删除dataType: "json"并直接将数据传递为form-url-encoded data: $('#EditDate').serializeArray()。无需转换为JSON格式。

$.ajax({
                url: '@Url.Action("Index", "TrainingDates")',
                type: "POST",
                data: $('#EditDate').serializeArray(),
                success: function (result) {
                    alert("success" + result);
                },
                error: function (result) {
                    alert("failure" + result);
                }
        });

控制器 - 更改变量名称＆＃34;日期＆＃34;到＆＃34;项目＆＃34;匹配你的JavaScript ajax调用。

[HttpPost]
public ActionResult Index(List<string> item)
{
        if(item != null)
        {
            var json = new { success = true };
            return Json(json);
        }
        return Json(false);
 }

Ajax Post上的数据为空

2 个答案: