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

Question

我正在尝试创建一个分部视图，这是一个用于创建新的生产目标模型的提交表单。 它使用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));
}

我希望按下按钮将具有 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
}
});