jQueryAjax GET调用在成功后不会刷新html页面上的数据，即使数据变量显示了正确的值

Question

我使用一个对应于下拉项的值，并根据该值在控制器中执行特定操作。控制器函数是使用jQuery-ajaxGET调用调用的。控制器功能正确计算并填充列表，然后在视图中检索该列表。我已经验证了，根据参数值(0、1或2(，控制器可以正确地填充vm中的数据。SomeList。然而，非常令人困惑的是，一旦控制器调用View，代码Model就会出现。SomeList具有绝对正确的值。然而，显示的数据永远不会改变，我已经尝试调用location.reload(true(，尽管我不需要刷新页面来显示数据。我可能不理解jQuery调用是如何工作的。我已经对此进行了广泛的研究，但仍然无法弄清楚这个问题。特别是，视图模型列表参数始终具有正确的数据，具体取决于我选择的选项。我肯定可以在没有ajax的情况下完成这项工作，但现在我很好奇。任何指针(包括不理解基本jQuery的警告(都将非常受欢迎

控制器：

public ActionResult FuncA(string param)
{
var vm = new SomeViewModel();
....
....
try
{

// update a variable in view model...
vm.someList = GetList(param);

return View(vm);
}
catch (Exception e)
{
// no exception thrown (I verified this)
}
}

视图(.cs.html(@Html。EnumDropDownListFor(m＝>m.routed，"routed to"，new{@class＝"col-sm-2表单控件"}(

。。。

@if (Model.SomeList.Any())
{
foreach (var item in Model.SomeList)
{
<tr>
<!-- display the list items -->
...
</tr>
}
}
</tbody>

jQuery调用：

<script type="text/javascript">
$(document).ready(function () {
...
$('#filter').click(
function () {
alert("Reached 1");
$.ajax({
url: '@Url.Action("FuncA", "Home")',
type: 'GET',
data: {             
param: $('#routed').val()
},
dataType: 'text',
cache: false,
success: function (response) {
alert("Reached 2");
if (response != null) {
alert("Reached 3");
location.reload(true);
}
else {
alert("null response");
}
return false;
},
error: function () {
alert("Error!")
}
})
}
)
});

Answer 1

考虑以下内容。

$(function() {
$('#filter').click(function(e) {
e.preventDefault();
console.log("Filter Click - Event Triggered.");
$.ajax({
url: '@Url.Action("FuncA", "Home")',
type: 'GET',
data: {
param: $('#routed').val()
},
dataType: 'text',
cache: false,
success: function(response) {
console.log("AJAX Success", response);
if (response != null) {
console.log("AJAX Payload Not NULL");
location.href = location.href + "?" + Date.now();
} else {
console.log("AJAX Payload is empty.");
}
},
error: function(x, e, t) {
console.log("AJAX Error", e, t);
}
});
});
});

这是一个更干净的地方，应该在控制台中提供更多的细节来进行测试。

使用click事件，我们可以使用.preventDefault()。如果失败，什么都不会发生。如果成功，页面仍将刷新。

location.reload(true);

这应该可以重新加载页面，而不是缓存。如果没有，请尝试使用一些额外的查询将位置设置回自己。

location.href = location.href + "?" + Date.now();

这样可以确保浏览器不会加载缓存版本。