在MVC中通過Java為Post方法創建ViewModel

Question

我正在嘗試創建部分視圖，該視圖是用於創建新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方法。 我已經更新了原始代碼以匹配我現在擁有的代碼。

Answer 1

您面臨此問題的原因僅在於您必須傳遞兩個參數，而您嘗試僅傳遞一個參數。 我不知道您必須通過什么確切的要求，所以這取決於您，因此暫時沒有內容。

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 2

您的代碼對我來說似乎都是正確的。 使用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 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
    }
});