Unable to update MVC 5 partial view

Question

In an MVC 5 page, I have a partial view embedded in a form. In the page, the HTML definition of the partial view looks as follows:

<div id="partialview" class="col-md-4">
    @Html.Partial("_Sightings", @Model.FieldTripSightingList)
</div>

There is a button on my form, that, when clicked, loads data for this partial view via an AJAX call, as follows:

$('#retrieveSightingsButton').click(function () {
      var url = "/FieldTrip/GetSightings";
      tripName = $("#FieldTripName").val();
      userRowId = $("#UserList").val();

      $.get(url, { tripName: tripName, userRowId: userRowId }, function (data) {
                    $("#partialView").html(data);
                });
            });

The C# controller method looks like this:

[Authorize]
public ActionResult GetSightings(string tripName, int userRowId)
{
    var sightingList = this.FieldTripData.GetList(userRowId, tripName).ToList();

    return PartialView("_Sightings", sightingList);
}

Finally, my partial view looks like this:

@model IEnumerable<WebBirder.Entities.FieldTripSighting>

    <table id="listingTable" class="table table-bordered table-responsive table-hover table-condensed sortable">
        <thead>
            <tr>
                <th data-defaultsort="asc">Common Name</th>
                <th>Sighting Time</th>
            </tr>
        </thead>

        <tbody class="searchable">
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.CommonName)
                    </td>
                    <td>
                        @item.SightingDate.ToShortDateString()
                    </td>
                </tr>
            }
        </tbody>
    </table>

All of this works as I would expect. The problem is that the table in the partial view never updates on the page. When I step through everything in the debugger I can see the Razor code for the partial view execute and all the values placed in the table, but the table data never refreshes on the page. I'm not sure what the problem is.

Answer 1

Your issue is actually very simple. Your HTML:

<div id="partialview" class="col-md-4">

Your JavaScript:

$("#partialView").html(data);

IDs are case-sensitive; if you ensure they match you will get the result you're after.

Answer 2

Try to move the partialView container outside the PartialView itself:

<div id="partialview" class=" col-md-4">
    @Html.Partial("_Sightings", @Model.FieldTripSightingList)
</div>

PartialView:

@model IEnumerable<WebBirder.Entities.FieldTripSighting>
<table id="listingTable" class="table table-bordered table-responsive table-hover table-condensed sortable">
    ...
</table>

Edit:

Try to check in the browser developer tool for any errors and server's response, whether you get an actual html content back to the client or not.

Also IE by default caches ajax get requests so you may want to check this either.