title: MVC Equivalent of a Postback on Button Click
body: <p>I am an MVC newbie. I am trying to update a page after a button click. The button click event calls a javascript function that does the following:</p>
  
  <pre><code>function buttonClickHandler(e) {
          switch(e.id)
          {
              case "btnRefresh":
                  alert('Refresh Code');
                  break;
  
              case "btnLatest":
                  $.ajax({
                      url: '@Url.Action("DashboardHome", "Dashboard")',
                      type: 'POST',
                      dataType: 'html',
                      cache: false,
                      data: {
                          SeriesParameters: {
                              BankID: "48",
                              CompanyID: "0"
                          },
                          DateModifier: "latest"
                      },
                      success: function (data, status, xhr) {
                          alert('Done');
                          // handle success
                      },
                      error: function (xhr, status, error) {
                          alert(error);
                          // handle error
                      }
                  });
                  break;
  
              case "btnMTD":
                  alert('MTD Code');
                  break;
          }
      }
  </code></pre>
  
  <p>The controller is the following:</p>
  
  <pre><code> public ActionResult DashboardHome(ChartDataModel model)
   {
        return View(ChartDataController.GetChartData(model.SeriesParameters));  
   }
  </code></pre>
  
  <p>Initially the view loads fine (it's a toolbar with datepickers and 3 Kendo Charts). I click the button and as you can see it calls the action with some hardcoded parameters that should change the chart data and the dates in the datepickers.</p>
  
  <p>Debugging shows the new parameters make it to the controller and the ChartData is updated correctly. But the charts and the datepickers don't actually update with the new data.</p>
  
  <p>I suspect it has to do with using the $.ajax command, but not sure.</p>
  
  <p>Any clues? Thanks!</p>
  
  <p>EDIT:</p>
  
  <p>this is the full View</p>
  
  <pre><code>@using SampleMVCWeb.Models
  @using Kendo.Mvc.UI
  @model ChartDataModel
  
  @{
      ViewBag.Title = "Dashboard Home";
  }
  
  
  &lt;div id="divTitle" style="height:40px"&gt;
      &lt;h2&gt;Dashboard&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div id="divToolbar" style="height:45px"&gt;
  @(Html.Kendo().ToolBar()
      .Name("ToolBar")
      .Items(items =&gt;
      {
          items.Add().Template("&lt;div&gt;&lt;label&gt;Start Date: &lt;/label&gt;&lt;/div&gt;");
          items.Add().Template("&lt;input id='dpStart' /&gt;");
          items.Add().Type(CommandType.Separator);
          items.Add().Template("&lt;div&gt;&lt;label&gt;End Date: &lt;/label&gt;&lt;/div&gt;");
          items.Add().Template("&lt;input id='dpEnd' /&gt;");
          items.Add().Type(CommandType.Separator);
          items.Add().Type(CommandType.Button).Text("Refresh").Id("btnRefresh").Click("buttonClickHandler");
          items.Add().Type(CommandType.Button).Text("Latest").Id("btnLatest").Click("buttonClickHandler");
          items.Add().Type(CommandType.Button).Text("Month-To-Date").Id("btnMTD").Click("buttonClickHandler");
          items.Add().Type(CommandType.Separator);
          items.Add().Template("&lt;div&gt;&lt;label&gt;&lt;input id='rbtItemCount' type='radio' name='chartType' onclick='RadioClick(this)' value='cnt' checked='true'&gt;&amp;nbspItem Count&lt;/label&gt;&lt;/div&gt;");
          items.Add().Template("&lt;div&gt;&lt;label&gt;&lt;input id='rbtAmount' type='radio' name='chartType' onclick='RadioClick(this)' value='amt'&gt;&amp;nbspAmount&lt;/label&gt;&lt;/div&gt;");
      })
  )
  &lt;script&gt;
  var defaultStart = new Date("@Model.SeriesParameters.StartDate.ToShortDateString()");
  var defaultEnd = new Date("@Model.SeriesParameters.EndDate.ToShortDateString()");
  
  $(document).ready(function () {
          alert('start');
          $("#dpStart").kendoDatePicker({
              format: "MM/dd/yyyy",
              value: kendo.toString(defaultStart, "MM/dd/yyyy")
          });
  
          $("#dpEnd").kendoDatePicker({
              format: "MM/dd/yyyy",
              value: kendo.toString(defaultEnd, "MM/dd/yyyy")
          });
  
          var datepicker = $("#dpStart").data("kendoDatePicker");
  
          datepicker.bind("change", function () {
              var value = this.value();
              alert(value); //value is the selected date in the datepicker
          });
  
      });
  
      function buttonClickHandler(e) {
          switch(e.id)
          {
              case "btnRefresh":
                  alert('Refresh Code');
                  break;
  
              case "btnLatest":
                  $.ajax({
                      url: '@Url.Action("DashboardHome", "Dashboard")',
                      type: 'POST',
                      dataType: 'html',
                      cache: false,
                      data: {
                          SeriesParameters: {
                              BankID: "481",
                              CompanyID: "0"
                          },
                          DateModifier: "latest"
                      },
                      success: function (data, status, xhr) {
                          alert('Done');
                          $(someElement).html(data);
                          // handle success
                      },
                      error: function (xhr, status, error) {
                          alert(error);
                          // handle error
                      }
                  });
                  break;
  
              case "btnMTD":
                  alert('MTD Code');
                  break;
          }
      }
  
      function RadioClick(radioButton)
      {
          var sdatepicker = $("#dpStart").data("kendoDatePicker");
          var startDate = sdatepicker.value();
          var edatepicker = $("#dpEnd").data("kendoDatePicker");
          var endDate = edatepicker.value();
  
          switch(radioButton.value)
          {
              case "cnt":
                  alert('Load charts by item count.');
                  $("#chtItemsByType").data("kendoChart").reload();
                  break;
              case "amt":
  
  
                  alert(kendo.toString(startDate, "MM/dd/yyyy"));
                  $.ajax({
                      url: '@Url.Action("DashboardHome", "Dashboard")',
                  type: 'POST',
                  dataType: 'html',
                  cache: false,
                  data: {
                      SeriesParameters: {
                          BankID: "48",
                          CompanyID: "0",
                          StartDate: kendo.toString(startDate, "MM/dd/yyyy"),
                          EndDate: kendo.toString(endDate, "MM/dd/yyyy"),
                          PercentByItemCount: false
                      }
                  }
                  //,
                  //success: function (data, status, xhr) {
                  //    alert('Done');
                  //    // handle success
                  //},
                  //error: function (xhr, status, error) {
                  //    alert(error);
                  //    // handle error
                  //}
              });
              break;
      }
  }
  
  function GetDate() {
      alert("Got it!");
  }
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="divCharts" style="height:calc(100% - 85px);"&gt;
  &lt;div id="topRow" style="height:50%;width:100%"&gt;
      &lt;div id="divSpaceTopLeft" style="height:100%;width:5%;float:left"&gt;
  
      &lt;/div&gt;
      &lt;div id="divItemsByType" style="height:100%;width:45%;float:left;vertical-align:middle; text-align:center;"&gt;
          &lt;div style="display:none;vertical-align:middle;"&gt;
              &lt;h4&gt;&lt;label id="lblItemsByType"&gt;Items By Type: No Data&lt;/label&gt;&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="chart-wrapper"&gt;
              @(Html.Kendo().Chart(Model.SeriesData.ElementAt(0))
                  .Name("chtItemsByType")
                  .Title(title =&gt; title
                      .Text("Items By Type")
                      .Position(ChartTitlePosition.Top)
                  )
                  .Legend(legend =&gt; legend
                      .Position(ChartLegendPosition.Left)
                  )
                  .Series(series =&gt;
                  {
                      series.Pie(
                          model =&gt; model.ItemCount,
                          model =&gt; model.ItemType,
                          null,
                          model =&gt; model.Exploded
                          )
                          .Labels(labels =&gt; labels
                              .Visible(true)
                              .Template("#= dataItem.ItemCount#")
                          )
                          .Tooltip(tooltip =&gt; tooltip
                              .Visible(true)
                              .Template("#= dataItem.ItemAmountDisplay# #= dataItem.YValue# %")
                          );                        
                  })
                  .Theme("Bootstrap")
                  .HtmlAttributes(new { style = "height:100%;" })           
              )
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="divExceptionItemsByStatus" style="height:100%;width:45%;float:right"&gt;
          &lt;div style="display:none;vertical-align:middle;"&gt;
              &lt;h4&gt;&lt;label id="lblExceptionItems"&gt;Exception Items By Status: No Data&lt;/label&gt;&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="chart-wrapper"&gt;
              @(Html.Kendo().Chart(Model.SeriesData.ElementAt(1))
                  .Name("chtExceptionItemsByStatus")
                  .Title(title =&gt; title
                      .Text("Exception Items By Status")
                      .Position(ChartTitlePosition.Top)
                  )
                  .Legend(legend =&gt; legend
                      .Position(ChartLegendPosition.Right)
                  )
                  .Series(series =&gt;
                  {
                      series.Pie(
                          model =&gt; model.ItemCount,
                          model =&gt; model.ItemType,
                          null,
                          model =&gt; model.Exploded
                          )
                          .Labels(labels =&gt; labels
                              .Visible(true)
                              .Template("#= dataItem.ItemCount#")
                          )
                          .Tooltip(tooltip =&gt; tooltip
                              .Visible(true)
                              .Template("#= dataItem.ItemAmountDisplay# #= dataItem.YValue# %")
                          )
                          .StartAngle(180);
                  })
                  .Theme("Bootstrap")
                  .HtmlAttributes(new { style = "height:100%;" })
              )
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="divSpaceTopRight" style="height:100%;width:5%;float:left"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="bottomRow" style="height:50%;width:100%;"&gt;
      &lt;div id="divSpaceLeft" style="height:100%;width:15%;float:left"&gt;&lt;/div&gt;
      &lt;div id="divTop5" style="height:100%;width:70%;float:left;text-align:center"&gt;
          &lt;div style="display:none;vertical-align:middle;"&gt;
              &lt;h4&gt;&lt;label id="lblTop5"&gt;Top 5 Companies: No Data&lt;/label&gt;&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="chart-wrapper"&gt;
              @(Html.Kendo().Chart(Model.SeriesData.ElementAt(2))
                  .Name("chtTop5")
                  .Title(title =&gt; title
                      .Text("Top 5 Companies")
                      .Position(ChartTitlePosition.Top)
                  )
                  .Legend(legend =&gt; legend
                      .Position(ChartLegendPosition.Left)
                  )
                  .Series(series =&gt;
                  {
                      series.Pie(
                          model =&gt; model.ItemCount,
                          model =&gt; model.ItemType,
                          null,
                          model =&gt; model.Exploded
                          )
                          .Labels(labels =&gt; labels
                              .Visible(true)
                              .Template("#= dataItem.ItemCount#")
                          )
                          .Tooltip(tooltip =&gt; tooltip
                              .Visible(true)
                              .Template("#= dataItem.ItemAmountDisplay# #= dataItem.YValue# %")
                          );
                  })
                  .Theme("Bootstrap")
                  .HtmlAttributes(new { style = "height:100%;" })
              )
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="divSpaceRight" style="height:100%;width:15%;float:left"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>