javascript - 从 Javascript 在 MVC 中为 Post 方法创建 ViewModel

Question

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

我的主要问题是如何将该数据传递到我的 CreateNewProductionGoal Controller 方法中。我写了一些粗略的 JS，但我对 JS 还很陌生，并不完全确定我在做什么。我使用此链接作为编写 JS 的基础: How to post data from ViewModel into a controller method?

目前，当我按下按钮时，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 的 View 模型传递给 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 函数。我的按钮是在分部 View 中定义的，并且调用分部 View 的 View 不包含正在调用的脚本。非常令人沮丧，但我很高兴现在可以用按钮调用电话。但是，我仍然无法调用 CreateNewProductionGoal 方法。我已经更新了原始代码以匹配我当前的代码。

Answer 1

你的代码对我来说似乎都是正确的。使用 JS 时请确保标签“#___”正确匹配。很多时候，意识到这一点可能会让人头疼。

正如 Hafiz 上面提到的，您需要传递两个参数。

var requestdata ={ };
var pgvmdata = { "NumberOfEmployees": Employees,
                "ProductionLineId": ProdLineId };

var data = {request:requestdata ,pgvm:pgvmdata}
$.ajax({
        url: "/ProductionLine/CreateNewProductionGoal",
        type: 'post',
        dataType: "json",
        data: data,
        success: function (data) {
            location = location;  //Refreshes the page on button press
        }
    });