title: MVC pass date range to controller using javascript
body: <p>Sorry if my question sounds noob, but I am a real beginner in javascript. I have 2 parameters "<strong>startdate</strong>" and "<strong>enddate</strong>". I want to pass it to controller via this javascript:</p>
  
  <p><strong>View: (Updated)</strong></p>
  
  <pre><code>&lt;div class="inventoryTypeList"&gt;
  &lt;p&gt;
      &lt;label for="start"&gt;From:&lt;/label&gt;
          @(Html.Kendo().DatePicker()
                .Name("from")
                .Events(e =&gt; e.Change("startChange"))
          )
  
          &lt;label for="end"&gt;To:&lt;/label&gt;
          @(Html.Kendo().DatePicker()
                .Name("to")
                .Events(e =&gt; e.Change("endChange"))
          )
  &lt;/p&gt;
      &lt;button class="k-button" id="showGrid"&gt;Search&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
      function startChange() {
          var endPicker = $("#to").data("kendoDatePicker"),
              startDate = this.value();
  
          if (startDate) {
              startDate = new Date(startDate);
              startDate.setDate(startDate.getDate() + 1);
              endPicker.min(startDate);
          }
      }
  
      function endChange() {
          var startPicker = $("#from").data("kendoDatePicker"),
              endDate = this.value();
  
          if (endDate) {
              endDate = new Date(endDate);
              endDate.setDate(endDate.getDate() - 1);
              startPicker.max(endDate);
          }
      }
  
      $(function () {
  
          $("#showGrid").click(function () {
              $.ajax({
                  url: '@Url.Action("PastTransactionsPartial", "InventoryTransactions")',
                  type: 'POST',
                  contentType: 'application/json; charset=utf-8',
                  cache: false,
                  data: JSON.stringify({
                      dateFrom: $('#from').val(),
                      dateTo: $('#to').val(),
                  }),
                  success: function (result) {
                      $('#divPastTransactions').replaceWith(result);
                  },
                  error: function () { alert("Please specify from and to dates"); }
              });
          });
      });
  
  &lt;/script&gt;
  
  &lt;div id="divPastTransactions"  &gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Controller: (Updated)</strong></p>
  
  <pre><code>public ActionResult PastTransactionsPartial(DateTime dateFrom, DateTime dateTo)
      {
          var inventorytransactions = db.InventoryTransactions.Include(i =&gt; i.InventoryTransactionType).Include(i =&gt; i.InventoryType).Include(i =&gt; i.Supplier).Where(i =&gt; i.InventoryTransactionDate &gt;= dateFrom &amp;&amp; i.InventoryTransactionDate &lt;= dateTo);
          return PartialView("_PastTransactionsPartial", inventorytransactions.ToList());
      }
  </code></pre>
  
  <p>How do I do that? and what do I capture them in the controller?</p>
  
  <p>The results will be displayed in partial view underneath the search function</p>
  
  <p><em>Edit:
  closing this thread and put the issue into new thread</em></p>