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

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

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

当前，当我按下按钮时，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));
    }

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

}

函数onClick（）{
var Employees=$（“#productiongoal text”）.data（“kendoNumericTextBox”）.value（）；
var ProdLineId=$（“#productionLine下拉列表”）.data（“kendoDropDownList”）.value（）；
var ProductionGoalViewModel={“NumberOfEmployees”：Employees，“ProductionLineId”：ProdLineId}；
变量数据={pgvm:ProductionGoalViewModel}
警报（“我是一个警报框！”）；
$.ajax({
键入：“post”，
url:“ProductionLine/CreateNewProductionGoal”，
数据类型：“json”，
data:data，//创建ProductionGoalViewModel以传递到CreateNewProductionGoal方法
成功：功能（数据）{
location=location；//按按钮刷新页面
}
});
}

编辑3： 我明白了为什么我的按钮永远无法调用JS函数。我的按钮是在部分视图中定义的，正在调用部分的视图不包含正在调用的脚本。非常令人沮丧，但我很高兴我现在可以用我的按钮打电话了。但是，我仍然无法调用CreateNewProductionGoal方法。我已更新了原始代码以匹配当前的代码。

尝试更改

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

对此

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

---

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

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

---

我给你举个例子

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

---

你的代码在我看来都是正确的。使用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
        }
    });

---

从ajax调用中的数据对象中删除

JSON.stringify

——改为发送一个实际对象。我尝试过这样做，但当前的问题是当我按下按钮时，CreateNewProductionGoal方法没有被调用。但是，这段代码现在应该只将ProductionGoalViewModel传递到方法中，对吗？控制器中的代码接受两个命名输入，但在提交时未传递任何命名输入。作为测试，我会尝试将您的数据更改为：

data:{pgvm:{NumberOfEmployees:Employees，ProductionLineId:ProdLineId}}

我不确定这是否是问题所在。我一直在尝试以多种不同的方式传递ProductionGoalViewModel，但没有一种方法能够调用CreateNewProductionGoal方法。见编辑和其他答案，我都试过了。可能我的按钮的创建方式或JS OnClick（）函数有问题？我试过了，但它没有调用CreateNewProductionGoal方法。我想知道我的按钮代码是否需要修改才能真正调用该方法。这是否仍然有效，以便我的CreateNewProductionGoal方法将此输入视为ProductionGoalViewModel？我尝试更改数据以传入ViewModel，但仍无法调用Create方法。您的Create函数是否接受ViewModel类型的参数？我的CreateNewProductionGoal接受ProductionGoalViewModel称为pgvm。然后在

data

块的

ajax

调用中，将

parameter\u variable\u name

更改为

pgvm

，并进行调用哇，我检查了标记，其中一个被一个字符去掉。谢谢你的帮助！

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