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

Question

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

我的主要问题是如何将该数据传递到我的 CreateNewProductionGoal 控制器方法中。我写了一些粗略的 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 的视图模型传递给 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 方法。我已经更新了原始代码以匹配我目前拥有的代码。

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

Answer 2

您正面临这个问题只是因为您必须传递两个参数并且您尝试只传递一个。我不知道你必须通过什么来请求请求，所以这取决于你，所以暂时它是空的。

Ajax 请求的样子。

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

Answer 3

尝试改变，

       data: JSON.stringify({ 
       //Creating a ProductionGoalViewModel to pass into the CreateNewProductionGoal method
            "ProductionGoalViewModel": {
                "NumberOfEmployees": Employees,
                "ProductionLineId": ProdLineId
            }
        }),

到这里

       data: {
           "NumberOfEmployees": Employees,
           "ProductionLineId": ProdLineId
       },

Answer 4

我给你举个例子。

var Employees = $("#productiongoal-text").data("kendoNumericTextBox").value();
var ProdLineId = $("#productionLine-dropdown").data("kendoDropDownList").value();

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

$.ajax({
    url: "ProductionLine/CreateNewProductionGoal",
    type: 'post',
    dataType: "json",
    data: {
        //If your controller is parameterized to accept an object then
        parameter_variable_name: ProductionGoalViewModel
    },
    success: function (data) {
        location = location;  //Refreshes the page on button press
    }
});