title: Creating a ViewModel in MVC from Javascript for a Post method
body: <p>I am trying to create a Partial View that is a submission form for creating a a new ProductionGoal model.  It uses ProductionLineViewModel to create that.</p>
  
  <p>My main question is how to pass that data into my CreateNewProductionGoal controller method.  I wrote some cursory JS but I am still new to JS and am not totally sure what I am doing.  I used this link as a basis to write my JS:
  <a href="https://stackoverflow.com/questions/54652554/how-to-post-data-from-viewmodel-into-a-controller-method">How to post data from ViewModel into a controller method?</a></p>
  
  <p>Currently when I press the button the <strong>CreateNewProductionGoal method does not get called</strong>.  I am wondering if I need to add something to get that to happen or if I have other errors.  </p>
  
  <pre><code>&lt;input id="submit" type="button" class="button" value="Submit" onclick="onClick();"&gt;
  
  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 &amp;&amp; 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));
      }
  </code></pre>
  
  <p>I want the button press to pass a view model that has NumberOfEmployees and ProductionLineId to the CreateNewProductionGoal method.</p>
  
  <p>I can try to clarify more if needed.</p>
  
  <p>EDIT:</p>
  
  <pre><code>var ProductionGoalViewModel = { "NumberOfEmployees": Employees, "ProductionLineId": ProdLineId };
  var data = { pgvm: ProductionGoalViewModel }
  
  data: data,
  </code></pre>
  
  <p>EDIT 2:</p>
  
  <p>I am now certain that it has something to do with my button not calling the onClick() method.  I put an alert in that method, probably should have done this awhile ago, and that alert is never being shown. Any suggestions?</p>
  
  <pre><code>&lt;input id="submit" type="button" class="button" value="Submit"&gt;
  
  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
          }
      });
  
  }
  </code></pre>
  
  <p>EDIT 3:
  I figured out why my button was never able to call the JS functions.  My button was defined in a partial view and the view that the partial was being called in did not contain the script that was being called.  Pretty frustrating but I am glad I am actually able to call something with my button now.  However, I am still not able to call the CreateNewProductionGoal method.  I have updated the original code to match what I currently have.</p>