Question

在MVC 5页面中，我在表单中嵌入了部分视图。在页面中，部分视图的HTML定义如下所示：

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

我的表单上有一个按钮，点击后，通过AJAX调用加载此部分视图的数据，如下所示：

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

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

C＃控制器方法如下所示：

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

    return PartialView("_Sightings", sightingList);
}

最后，我的部分视图如下：

@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>

所有这一切都如我所料。问题是部分视图中的表永远不会在页面上更新。当我逐步调试调试器中的所有内容时，我可以看到部分视图执行的Razor代码和表中放置的所有值，但表数据永远不会在页面上刷新。我不确定是什么问题。

Answer 1

您的问题实际上非常简单。你的HTML：

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

您的JavaScript：

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

ID区分大小写;如果你确保它们匹配，你将得到你之后的结果。

Answer 2

尝试将partialView容器移到PartialView本身之外：

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

修改

尝试检查浏览器开发人员工具中是否有任何错误和服务器的响应，无论您是否将实际的html内容返回给客户端。

默认情况下，IE还会缓存ajax get请求，因此您可能需要检查它。

无法更新MVC 5局部视图

2 个答案: