在Ajax.BeginForm中发送JavaScript数组

Question

我正在处理一个项目，并且有一个需求需要将存储在JavaScript数组“selectedZonesList”中的数据与表单数据一起发送回控制器。我收到了一个建议，可以使用Ajax.BeginForm……但我很难将所有部分组合在一起，非常感谢……

在局部视图中

@using (Html.BeginForm("CreateNewFeeScheme", "Qualification", FormMethod.Post, new { id = "NewFeeSchemeForm" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

   //rest of code to take user input for all variables ..

<input type="submit" value="Create" class="btn btn-default" />
}

Javascript函数

 <script type="text/javascript">

 var selectedZonesList = new Array();

 function AddFeeZoneToScheme(e)
 {

    var entityGrid = $("#FeeZoneGrid_02").data("kendoGrid");

    var selectedZone = entityGrid.dataItem(entityGrid.select());

    selectedZone = selectedZone.FeeZoneID;

    selectedZonesList.push(selectedZone); 
}

</script>

Controller

  [HttpPost]
    public ActionResult CreateNewFeeScheme(FeeScheme newSchemeData, ??????)
    {

- K.Z

Answer 1

你可以使用简单的JQuery AJAX POST来实现。你可以在一次AJAX JQuery的POST请求中传递强类型模型和字符串数组。

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    function submitForm() {
        var roles = ["role1", "role2", "role3"];

        var model = new Object();
        model.Name = "Rami";

        jQuery.ajax({
            type: "POST",
            url: "@Url.Action("AddUser")",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ Roles: roles, person: model }),
            success: function (data) { alert(data); },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
    }
</script>

<input type="button" value="Click" onclick="submitForm()"/>

然后是控制器操作 -

    public ActionResult AddUser(string[] Roles, PersonViewModel person)
    {
        return null;
    }

当你点击按钮时，你会在服务器端得到如下数值 - 我使用的样本模型是PersonViewModel -

public class PersonViewModel
{
    public string Name { get; set; }
}

- ramiramilu

---

非常感谢，这真的很有帮助...成功传递了JavaScript数组值，但现在无法传递表单值...我正在尝试使用以下数据： JSON.stringify({ newFeeSchemeData: $("#NewFeeSchemeForm").serialize(), ZonesList: selectedZonesList }) - K.Z

在你的例子中，你硬编码了人名而不是从提交的表单中获取。 - K.Z

@toxic，你可以使用$("#控件的ID").val()来获取表单数据，并将其分配给属性。 - ramiramilu

为什么要使用JQuery的Serialize()方法，它只支持标准的URL编码格式。但是我们需要Json。 - ramiramilu

Answer 2

我遇到了同时发送数据的问题，但多亏了ramiramilu的指导，我找到了解决方案...

获取SerializeObject插件

$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
   if (o[this.name]) {
       if (!o[this.name].push) {
           o[this.name] = [o[this.name]];
       }
       o[this.name].push(this.value || '');
   } else {
       o[this.name] = this.value || '';
   }
});
return o;
};

脚本

    function submit_createNewFeeScheme()
{

    $.ajax({
        type: "Post",
        url: "/Qualification/CreateNewFeeScheme",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ ZonesList: selectedZonesList, newFeeSchemeData:  $("#NewFeeSchemeForm").serializeObject() }),
        success: function (data) {
            alert(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
    });
}

- K.Z

Answer 3

你可以通过两种方式将JavaScript对象传递到服务器。

1. 将对象分配给表单中的元素，这样当您提交表单时，控制器中就会得到该对象。

2. 使用Ajax post，将对象附加到表单数据中并将其发送到服务器。

类似的SO问题

通过ajax post发布JS数组对象到mvc

- Sakthivel