title: Displaying dynamic data from AJAX request to Controller in table view ASP.NET MVC
body: <p>I'm trying to pass data returned from Controller with an AJAX call to my table inside a view where it is asked for (with filters). To be more precise, there are 3 filters: Date and time, employee and visitor. Depending on which combination you pick, Controller returns filtered data from database.</p>
  
  <p>When a view is loaded, it shows all visitors in database that have a value in field <code>Departure</code>. I want it to show filtered visitors after filters are applied.</p>
  
  <p>Archive.cshtml</p>
  
  <pre><code>@model IEnumerable&lt;Visitor_Management.Models.Visitor&gt;
  
  @{
      ViewBag.Title = "Archive";
  }
  
  &lt;div&gt;
      &lt;h2&gt;"Archive"&lt;/h2&gt;
      &lt;div&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  &lt;form class="form-inline" id="formFilters" runat="server"&gt;
      &lt;div&gt;
          &lt;label style="margin-left:10px;"&gt;Date and time:&lt;/label&gt;
          &lt;input type="text" name="picker" id="picker" class="form-control" size="30" /&gt;
          &lt;label style="margin-left:10px;"&gt;Employee:&lt;/label&gt;
          &lt;input type="text" id="employee" class="form-control" placeholder="select an employee" /&gt;
          &lt;label style="margin-left:10px;"&gt;Visitor:&lt;/label&gt;
          &lt;input type="text" id="visitor" placeholder="select a visitor" class="form-control" style="margin-right:20px;" /&gt;
          &lt;button type="submit" class="btn navbar-btn btn-primary " name="filter" id="filter" value="filter"&gt;Filter&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/form&gt;
  &lt;table class="table table-bordered table-condensed table-striped text-center" id="archiveTable"&gt;
  
      &lt;tr&gt;
  
          &lt;th class="text-center"&gt;
              @Html.DisplayNameFor(model =&gt; model.ID)
          &lt;/th&gt;
  
          &lt;th class="text-center"&gt;
              @Html.DisplayNameFor(model =&gt; model.Date)
          &lt;/th&gt;
  
          &lt;th class="text-center"&gt;
              @Html.DisplayNameFor(model =&gt; model.Arrival)
          &lt;/th&gt;
  
          &lt;th class="text-center"&gt;
              @Html.DisplayNameFor(model =&gt; model.Departure)
          &lt;/th&gt;
  
          &lt;th class="text-center"&gt;
              @Html.DisplayNameFor(model =&gt; model.Name)
          &lt;/th&gt;
          &lt;th class="text-center"&gt;
              @Html.DisplayNameFor(model =&gt; model.Surname)
          &lt;/th&gt;
          &lt;th class="text-center"&gt;
              @Html.DisplayNameFor(model =&gt; model.Employee)
          &lt;/th&gt;
          &lt;th class="text-center"&gt;
              ID Card
          &lt;/th&gt;
          &lt;th class="text-center"&gt;
              Pass ID
          &lt;/th&gt;
  
      &lt;/tr&gt;
  
      @foreach (var item in Model)
      {
       var Date = item.Datum.ToShortDateString();
       &lt;tr&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.ID)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; Date)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Arrival)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Departure)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Name)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Surname)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Employee)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.CardID)
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.PassID)
          &lt;/td&gt;
  
       &lt;/tr&gt;
  
       }
  
  &lt;/table&gt;
  </code></pre>
  
  <p>AJAX call</p>
  
  <pre><code>&lt;script&gt;
      $('#filter').click(function () {
          $.ajax({
              url: "Filter",
              data: {
                  'datepicker': $('#picker').val().toString(),
                  'employee': $('#employee').val().toString(),
                  'visitor' : $('#visitor').val().toString()
              },
              async: false,
              dataType: "json",
              contentType: "application/json;charset=utf-8",
              type: "POST", 
              success: function (result) {
                  alert("Works");
                  $('#archiveTable').html(result)
              },
              error: function (result) {
                  alert("Error")
              }
          }); 
      });  
  &lt;/script&gt;
  </code></pre>
  
  <p>VisitorsController.cs</p>
  
  <pre><code>public ActionResult Filter(string datepicker,string employee,string visitor)
          {
           List&lt;Visitor&gt; filterList = new List&lt;Visitor&gt;();
  
              //filter data to get an filtered list
  
              return View("Archive",filterList);
          }
  </code></pre>
  
  <p>It says it "Works" from alert in success part of AJAX, but I don't get any new (filtered) data in table, like nothing happened and the view is just reloaded (refreshed).</p>
  
  <p>If I return <code>JSON</code> type, with <code>ActionResult</code> being <code>JsonResult</code>, I can read the data, and filtered data is true and correct but I am still unable to load that data in my table.</p>