关于jquery:在Ajax.BeginForm中发送javascript数组

send javascript array in Ajax.BeginForm

我正在研究项目,我需要发送javaScript数组" selectedZonesList",将数据和表单数据一起保存回控制器。我得到了一个使用Ajax.BeginForm的建议...但是我正在努力地将所有部分集结起来,非常感谢...

在局部视图

1
2
3
4
5
6
7
8
9
@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功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <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);
}

控制器

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

您可以使用简单的JQuery AJAX POST进行操作。您可以在单个AJAX JQuery帖子中传递Stirngly Typed模型以及字符串数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="~/Scripts/jquery-1.10.2.min.js">

    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);
            }
        });
    }


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

然后执行控制器操作-

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

当您按下按钮时,您将像这样在服务器端获取值-

enter

1
2
3
4
public class PersonViewModel
{
    public string Name { get; set; }
}


我遇到了将两个数据一起发送的问题,但是感谢ramiramilu guide,我找到了解决方案....

获取SerializeObject插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.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;
};

脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    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) {
        }
    });
}

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

  • 将您的对象分配给表单中的元素,以便您发布表单时,将在控制器中获取该对象。

  • 使用Ajax发布,使用表单数据附加对象并将其发送到服务器。

  • 关于SO

    的类似问题

    通过ajax post

    将JS Array对象发布到mvc