使用 Javascript 在 MVC 中为 Post 方法创建一个 ViewModel

我正在尝试创建一个局部视图，它是用于创建新的 ProductionGoal 模型的提交表单。它使用 ProductionLineViewModel 来创建它。

我的主要问题是如何将该数据传递到我的 CreateNewProductionGoal 控制器方法中。我写了一些粗略的 JS，但我还是 JS 的新手，并不确定我在做什么。我使用此链接作为编写我的 JS 的基础：如何将数据从 ViewModel 发布到控制器方法中？

目前，当我按下按钮时，不会调用 CreateNewProductionGoal 方法。我想知道我是否需要添加一些东西来实现它，或者我是否有其他错误。

<input id="submit" type="button" class="button" value="Submit" onclick="onClick();">

function onClick() {
    alert("I am an alert box!");

    var Employees = $("#productiongoal-text").data("kendoNumericTextBox").value();
    var ProdLineId = $("#productionLine-dropdown").data("kendoDropDownList").value();
    var ProductionGoalViewModel = { "NumberOfEmployees": Employees, "ProductionLineId": ProdLineId };
    var requestData = {}
    var data = { request: requestData, pgvm: ProductionGoalViewModel }

    $.ajax({
        type: 'post',
        url: "ProductionLine/CreateNewProductionGoal",
        dataType: "json",
        data: data,  //Creating a ProductionGoalViewModel to pass into the CreateNewProductionGoal method
        success: function (data) {
            location = location;  //Refreshes the page on button press
        }
    });

}

[HttpPost]
    public ActionResult CreateNewProductionGoal([DataSourceRequest] DataSourceRequest request, ProductionGoalViewModel pgvm)
    {
        if (pgvm != null && ModelState.IsValid)
        {
            ProductionGoal pg = new ProductionGoal();
            pg.NumberOfEmployees = pgvm.NumberOfEmployees;
            pg.NumberOfUnits = _prodLineService.Find(pgvm.ProductionLineId).UPE * pgvm.NumberOfEmployees;
            pg.ProductionLineId = pgvm.ProductionLineId;
            pg.ProdLine = _prodLineService.Find(pgvm.ProductionLineId);
            pgvm.NumberOfUnits = pg.NumberOfUnits;
            pgvm.Id = pg.Id;
            pgvm.CreatedAt = pg.CreatedAt;
            _prodGoalService.Insert(pg);
        }
        return Json(new[] { pgvm }.ToDataSourceResult(request, ModelState));
    }

我希望按下按钮将具有 NumberOfEmployees 和 ProductionLineId 的视图模型传递给 CreateNewProductionGoal 方法。

如果需要，我可以尝试澄清更多。

编辑：

var ProductionGoalViewModel = { "NumberOfEmployees": Employees, "ProductionLineId": ProdLineId };
var data = { pgvm: ProductionGoalViewModel }

data: data,

编辑2：

我现在确定它与我的按钮没有调用 onClick() 方法有关。我在该方法中放置了一个警报，可能应该在不久前完成此操作，并且该警报永远不会显示。有什么建议么？

<input id="submit" type="button" class="button" value="Submit">

function onClick() {
    var Employees = $("#productiongoal-text").data("kendoNumericTextBox").value();
    var ProdLineId = $("#productionLine-dropdown").data("kendoDropDownList").value();
    var ProductionGoalViewModel = { "NumberOfEmployees": Employees, "ProductionLineId": ProdLineId };
    var data = { pgvm: ProductionGoalViewModel }

    alert("I am an alert box!");

    $.ajax({
        type: 'post',
        url: "ProductionLine/CreateNewProductionGoal",
        dataType: "json",
        data: data,  //Creating a ProductionGoalViewModel to pass into the CreateNewProductionGoal method
        success: function (data) {
            location = location;  //Refreshes the page on button press
        }
    });

}

编辑 3：我想出了为什么我的按钮永远无法调用 JS 函数。我的按钮是在局部视图中定义的，调用局部视图的视图不包含正在调用的脚本。非常令人沮丧，但我很高兴我现在实际上能够用我的按钮调用一些东西。但是，我仍然无法调用 CreateNewProductionGoal 方法。我已经更新了原始代码以匹配我目前拥有的代码。