[英]Unable to update MVC 5 partial view
In an MVC 5 page, I have a partial view embedded in a form. 在MVC 5页面中,我在表单中嵌入了局部视图。 In the page, the HTML definition of the partial view looks as follows: 在页面中,部分视图的HTML定义如下所示:
<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: 我的表单上有一个按钮,当单击该按钮时,通过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);
});
});
The C# controller method looks like this: C#控制器方法如下所示:
[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. 当我逐步调试调试器中的所有内容时,我可以看到部分视图执行的Razor代码和表中放置的所有值,但表数据永远不会在页面上刷新。 I'm not sure what the problem is. 我不确定问题是什么。
Your issue is actually very simple. 你的问题实际上非常简单。 Your HTML: 你的HTML:
<div id="partialview" class="col-md-4">
Your JavaScript: 你的JavaScript:
$("#partialView").html(data);
IDs are case-sensitive; ID区分大小写; if you ensure they match you will get the result you're after. 如果你确保它们匹配,你将得到你想要的结果。
Try to move the partialView
container outside the PartialView itself: 尝试将partialView
容器移到PartialView本身之外:
<div id="partialview" class=" col-md-4">
@Html.Partial("_Sightings", @Model.FieldTripSightingList)
</div>
PartialView: 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. 尝试检查浏览器开发人员工具中是否有任何错误和服务器的响应,无论您是否将实际的html内容返回给客户端。
Also IE by default caches ajax get requests so you may want to check this either. IE默认情况下也会缓存ajax get请求,因此您可能也想检查这个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.