title: MVC Partial View WebGrid not reloading
body: <p>I have the following View and Controller:</p>
  
  <p>View:</p>
  
  <pre><code>&lt;div class="searchPastTransactions"&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>Partial View:</p>
  
  <pre><code>&lt;div id="gridContent"&gt;
  @{
      var grid = new WebGrid(source: Model,
          defaultSort: "InventoryTransactionCreatedDateTime",
          rowsPerPage: 10,
          canPage: true,
          canSort: true,
          ajaxUpdateContainerId: "gridContent"
      );
      grid.SortDirection = SortDirection.Descending;
  }
  
      @grid.GetHtml(
          tableStyle: "gridTable",
          headerStyle: "gridHead", 
          footerStyle:"gridFooter",
          rowStyle:"gridRow", 
          alternatingRowStyle: "gridAltRow",
          columns: grid.Columns(
              grid.Column(
                  columnName: "InventoryTransactionID",
                  header: "ID",
                  style: "fiftyCenter"
              ),
              grid.Column(
                  columnName: "InventoryTransactionType.InventoryTransactionTypeName",
                  header: "Transaction Type",
                  style: "fiftyCenter"
              ),
              grid.Column(
                  columnName: "InventoryType.InventoryTypeName",
                  header: "Type",
                  style: "fiftyCenter"
              ),
              grid.Column(
                  columnName:"Supplier",
                  header:"Supplier",
                  style: "eightyCenter",
                  format: @&lt;text&gt;  @if (@item.Supplier !=null) { &lt;span&gt; @item.Supplier.SupplierName &lt;/span&gt; } &lt;/text&gt; 
              ),
              grid.Column(
                  columnName: "InventoryTransactionDate",
                  header: "Transaction Date",
                  format: (item) =&gt; string.Format("{0:dd/MM/yyyy}", item.InventoryTransactionDate),
                  style: "fiftyCenter"
              ),
              grid.Column(
                  columnName: "InventoryTransactionReceipt",
                  header: "Receipt/ Invoice No.",
                  style: "fiftyCenter"
              ),
  
              grid.Column(
                  columnName: "InventoryTransactionQuantity",
                  header: "Quantity",
                  style: "fiftyRight",
                  format: (item) =&gt; string.Format("{0:N2}", item.InventoryTransactionQuantity)
              ),
              grid.Column(
                  columnName: "InventoryTransactionPrice",
                  header: "Price per Item",
                  style: "fiftyRight",
                  format: (item) =&gt; string.Format("{0:N2}", item.InventoryTransactionPrice)
              ),
              grid.Column(
                  columnName: "InventoryTransactionBy",
                  header: "Transaction By",
                  style: "fiftyCenter"
              ),
  
              grid.Column(
                  columnName: "InventoryTransactionRemarks",
                  header: "Remarks",
                  style: "twohundred"
              ),
              grid.Column(
                  columnName: "InventoryTransactionCreatedDateTime",
                  header: "Created On"
              ),
              grid.Column(
                  columnName: "InventoryTransactionCreatedBy",
                  header: "User"
              ),
              grid.Column(
                  columnName: "InventoryTransactionCancelled",
                  header: "Cancelled"
              ),
              grid.Column(
                  columnName: "InventoryTransactionCancelledSourceID",
                  header: "Cancelled ID"
              ),
              grid.Column(
                  columnName:"InventoryTransactionID", 
                  header: " ",
                  format: @&lt;text&gt; @if (!@item.InventoryTransactionCancelled &amp;&amp; @item.InventoryTransactionCancelledSourceID == null &amp;&amp; User.IsInRole("Supervisor"))
                                  { @Html.ActionLink("Cancel", "CancelTransaction", new { id = item.InventoryTransactionID}) } &lt;/text&gt;
              )
          )
      )
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</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>The problem I have is, after the first time loading the partial view, I am unable to replace it with new result. I have to refresh and then perform the search once again otherwise the grid will always shows old results.</p>
  
  <p><strong>Update:</strong>
  Unable to find a solution for the issue. In the end I disable the search button after the search and user need to reload the page for another search.</p>