通过jQuery ajax函数传递javaScript数组和表单

pass javaScript array together with form through jQuery ajax function

本文关键字：javaScript 数组 表单 jQuery ajax 函数 通过      更新时间：2023-09-26

我用的是ASP。我有JavaScript数组'selectElementList'，持有多个数据，我正试图使用AJAX JQuery函数将数据与表单值一起发布。在控制器中，我得到表单值，但得到数组的空值。我想我错过了一些东西。

JavaScript全局数组

var selectElementList = [];   // I want to send this array to controller..
添加并确认函数
$("#ElementTable").on("click", ".k1-grid-confirm", function () {
        var E_RecordId = $(this).data("id");
        var E_MarkingSchemeTitle = $("#" + E_RecordId + "_EMST").val();
        var E_AvailableMark = $("#" + E_RecordId + "_AM").val();
        var E_PassMark = $("#" + E_RecordId + "_PM").val();
        var E_MeritMark = $("#" + E_RecordId + "_MM").val();
        var E_DistinctionMark = $("#" + E_RecordId + "_DM").val();
        //add data to array//
        selectElementList.push({ ElementIndex: E_RecordId, ElementMarkingSchemeTitle: E_MarkingSchemeTitle, ElementAvailableMark: E_AvailableMark, ElementPassMark: E_PassMark, ElementMeritMark: E_MeritMark, ElementDistinctionMark: E_DistinctionMark });   
        for (var i = 0; i <= selectElementList.length - 1; i++) {
            alert(selectElementList[i].ElementIndex + "  " + selectElementList[i].ElementMarkingSchemeTitle + " " + selectElementList[i].ElementAvailableMark + " " + selectElementList[i].ElementPassMark + " " + selectElementList[i].ElementMeritMark + " " + selectElementList[i].ElementDistinctionMark);
        }
});

提交功能
 //QualificationElementsAndComponents ???????
 function submit_createNewQualification()
{
    //alert(JSON.stringify($("#NewQualificationForm").serializeObject()));
    $.ajax({
        type: "Post",
        url: "/Qualification/CreateNewQualification",
        dataType: "json",
        contentType: "application/json; charset=utf-8",       
        data: JSON.stringify({ QualificationElementsAndComponents: selectElementList, newQualificationData: $("#NewQualificationForm").serializeObject() }),            
        success: function (data) {
            if (data == true) {
                window.location = "/Qualification/QualificationHome";
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
    });
}

控制器方法
[HttpPost]
public ActionResult CreateNewQualification(QualificationViewModel newQualificationData, int [] QualificationElementsAndComponents)
    {

我找到了解决方案，首先我创建了我希望传递给控制器的变量映射类…

 public class QualificationElementComponents_ViewModel
{
    public int ElementIndex { get; set; }
    public string ElementMarkingSchemeTitle { get; set; }
    public int ElementAvailableMark { get; set; }
    public int ElementPassMark { get; set; }
    public int ElementMeritMark { get; set; }
    public int ElementDistinctionMark { get; set; }
    public IList<ElementComponent> _ElementComponent { get; set; }
}

则在控制器方法中，将上述类引用作为参数

传递
 public ActionResult CreateNewQualification(QualificationViewModel newQualificationData, IList<QualificationElementComponents_ViewModel> ElementComponentList)
    {
       .......

和View中使用ajax jquery发布数据，数据是JSON.stringify

   $.ajax({
                type: "Post",
                url: "/Qualification/CreateNewQualification",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ElementComponentList:selectElementList, newQualificationData: $("#NewQualificationForm").serializeObject() }),
                success: function (data) {
                    if (data == true) {
                         window.location = "/Qualification/QualificationHome";
                      }
                 },
                error: function (jqXHR, textStatus, errorThrown) {
                    }
                });
    });

需要确保JavaScript数组和模型类中的变量名相同....即ElementComponentList

相关文章：