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; } |
当您按下按钮时,您将像这样在服务器端获取值-
我使用的样本模型是PersonViewModel-
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