Displaying dynamic data from AJAX request to Controller in table view ASP.NET MVC

Question

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.

When a view is loaded, it shows all visitors in database that have a value in field Departure . I want it to show filtered visitors after filters are applied.

Archive.cshtml

@model IEnumerable<Visitor_Management.Models.Visitor>

@{
    ViewBag.Title = "Archive";
}

<div>
    <h2>"Archive"</h2>
    <div>&nbsp;</div>
</div>
<form class="form-inline" id="formFilters" runat="server">
    <div>
        <label style="margin-left:10px;">Date and time:</label>
        <input type="text" name="picker" id="picker" class="form-control" size="30" />
        <label style="margin-left:10px;">Employee:</label>
        <input type="text" id="employee" class="form-control" placeholder="select an employee" />
        <label style="margin-left:10px;">Visitor:</label>
        <input type="text" id="visitor" placeholder="select a visitor" class="form-control" style="margin-right:20px;" />
        <button type="submit" class="btn navbar-btn btn-primary " name="filter" id="filter" value="filter">Filter</button>
    </div>

    <div>&nbsp;</div>
</form>
<table class="table table-bordered table-condensed table-striped text-center" id="archiveTable">

    <tr>

        <th class="text-center">
            @Html.DisplayNameFor(model => model.ID)
        </th>

        <th class="text-center">
            @Html.DisplayNameFor(model => model.Date)
        </th>

        <th class="text-center">
            @Html.DisplayNameFor(model => model.Arrival)
        </th>

        <th class="text-center">
            @Html.DisplayNameFor(model => model.Departure)
        </th>

        <th class="text-center">
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th class="text-center">
            @Html.DisplayNameFor(model => model.Surname)
        </th>
        <th class="text-center">
            @Html.DisplayNameFor(model => model.Employee)
        </th>
        <th class="text-center">
            ID Card
        </th>
        <th class="text-center">
            Pass ID
        </th>

    </tr>

    @foreach (var item in Model)
    {
     var Date = item.Datum.ToShortDateString();
     <tr>
        <td>
            @Html.DisplayFor(modelItem => item.ID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => Date)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Arrival)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Departure)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Surname)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Employee)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CardID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PassID)
        </td>

     </tr>

     }

</table>

AJAX call

<script>
    $('#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")
            }
        }); 
    });  
</script>

VisitorsController.cs

public ActionResult Filter(string datepicker,string employee,string visitor)
        {
         List<Visitor> filterList = new List<Visitor>();

            //filter data to get an filtered list

            return View("Archive",filterList);
        }

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).

If I return JSON type, with ActionResult being JsonResult , I can read the data, and filtered data is true and correct but I am still unable to load that data in my table.

Answer 1

Try to take out your table in partial View (let's call it _ResultTable and put your table inside div with resultTable id in your view):

@model IEnumerable<Visitor_Management.Models.Visitor>

@{
    ViewBag.Title = "Archive";
}

<div>
    <h2>"Archive"</h2>
    <div>&nbsp;</div>
</div>
<form class="form-inline" id="formFilters" runat="server">
    <div>
        <label style="margin-left:10px;">Date and time:</label>
        <input type="text" name="picker" id="picker" class="form-control" size="30" />
        <label style="margin-left:10px;">Employee:</label>
        <input type="text" id="employee" class="form-control" placeholder="select an employee" />
        <label style="margin-left:10px;">Visitor:</label>
        <input type="text" id="visitor" placeholder="select a visitor" class="form-control" style="margin-right:20px;" />
        <button type="submit" class="btn navbar-btn btn-primary " name="filter" id="filter" value="filter">Filter</button>
    </div>

    <div>&nbsp;</div>
</form>
<div id="resultTable">
     @Html.Partial("_ResultTable", Model)
</div>

Partial View:

@model IEnumerable<Visitor_Management.Models.Visitor>
<table class="table table-bordered table-condensed table-striped text-center" id="archiveTable">

        <tr>

            <th class="text-center">
                @Html.DisplayNameFor(model => model.ID)
            </th>

            <th class="text-center">
                @Html.DisplayNameFor(model => model.Date)
            </th>

            <th class="text-center">
                @Html.DisplayNameFor(model => model.Arrival)
            </th>

            <th class="text-center">
                @Html.DisplayNameFor(model => model.Departure)
            </th>

            <th class="text-center">
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th class="text-center">
                @Html.DisplayNameFor(model => model.Surname)
            </th>
            <th class="text-center">
                @Html.DisplayNameFor(model => model.Employee)
            </th>
            <th class="text-center">
                ID Card
            </th>
            <th class="text-center">
                Pass ID
            </th>

        </tr>

        @foreach (var item in Model)
        {
         var Date = item.Datum.ToShortDateString();
         <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => Date)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Arrival)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Departure)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Surname)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Employee)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CardID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PassID)
            </td>

         </tr>

         }

    </table>

and then return it from your controller action:

public ActionResult Filter(string datepicker,string employee,string visitor)
{
    List<Visitor> filterList = new List<Visitor>();

     //filter data to get an filtered list

     return PartialView("_ResultTable",filterList);
 }

In your ajax post just set the html of your div to action result. And you need to add preventDefault to submit button so it doesn't submit your form twice.

<script>
    $('#filter').click(function (e) {
        e.preventDefault();
        $.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");
                $('#resultTable').html(result)
            },
            error: function (result) {
                alert("Error")
            }
        }); 
    });  
</script>