jQuery AJAX .load() 只命中控制器方法一次

Question

所以我已经阅读了其他一些类似的问题，但找不到完全适合我的情况的问题。我有如下脚本标签：

$(document).ready(function() {
$(document).on("change", '[id*="SomeId]', function() {
SomeFunction();
});
});
function SomeFunction() {
$("SomeOtherId").load('@(Url.Action("ControllerMethod", "Controller", null, Request.Url.Scheme))?numberExample=' + 7);
});

<div class="col-md-10 mrgn-tp-sm">
@Html.DropDownListFor(model => model.SomeProperty, (SelectList)Model.SomeOtherProperty, htmlAttributes: new { @id="SomeId", @class="form-control" })
</div>
<div id="SomeOtherId" class="col-md-10 mrgn-tp-sm">
@Html.DropDownListFor(model => model.SomeEvenOtherProperty, (SelectList)Model.SomeEvenOtherOtherProperty, htmlAttributes: new { @class="form-control" })
</div>

所以我的目标是当用户从第一个下拉列表中选择不同的选项时，第二个下拉列表将动态更改。当调用 .load(( 函数时会发生这种情况。

这是正在发生的事情。我在控制器中方法的开头放置了一个断点。当我启动应用程序时，我转到此页面并从第一个下拉列表中选择一个选项。 调用SomeFunction()并运行SomeOtherIddiv 上的 .load((，这会导致命中断点。控制器方法呈现一个部分视图，其中包含另一个类似@Html.DropDownListFor(model => model.SomeEvenOtherProperty, (SelectList)Model.SomeEvenOtherOtherProperty, htmlAttributes: new { @class = "form-control" })的列表，以代替旧列表。现在，如果我从第一个下拉列表中选择不同的选项，将再次命中断点并更新第二个下拉列表。

当我返回选择第一个选项时，会出现此问题，断点未命中，但列表仍在更新。我需要每次都命中断点，但是它似乎实际上只调用控制器方法一次。我已经通过Javascript进行了调试，并且可以确认每次都调用SomeFunction()。我还尝试放置带有警报的回调以确认 .load(( 函数已成功执行。即使重新加载页面，此问题仍然存在。对于一个选项，我可以两次命中断点的唯一方法是，如果我：

1. 重新启动应用程序。
2. 检查元素 -> 控制台。

奇怪的是，当我检查页面上的元素时，它会多次命中特定选项的断点。

额外详情：

因此，简单来说，第二个下拉列表应该包含一组不同的选项，具体取决于在第一个列表中选择的选项。但是，如果用户选择保存包含列表 1 中的选项 2 和列表 2 中的选项 2 组合的新实体，则他们应该无法保存具有相同组合的另一个实体。

因此，由于此问题一直持续到应用程序重新启动，因此它允许用户创建相同的组合两次，因为旧列表将代替第二个下拉列表呈现。控制器方法的目的是通过快速调用数据库来呈现筛选列表，以找出存在哪些组合。如果用户已将列表 1 中的选项 2 和列表 2 中的选项 2 保存到数据库，则当他们返回创建另一个组合时，如果他们从列表 1 中选择选项 2，则不应在列表 2 中显示选项 2。但是，由于控制器方法仅在第一次创建组合时被调用，因此当他们决定从列表 1 为选项 2 创建另一个组合时，它将呈现旧列表，显示列表 2 中的选项 2。

Answer 1

在第一个下拉列表中添加一个"onchange"，该下拉列表调用javascript函数并传递"this.value"

@Html.DropDownListFor(m => m.ResultId, new SelectList(The list of objects, "fieldid", "value"), new { @class = "form-control HomePageDropDown", @onchange = "javascript:GetValues(this.value);" }) 

在你的javascript函数中，将你想要的数据发布到控制器(可能是下拉列表的id(。在控制器函数中，获取下一个下拉列表中所需的对象列表，并将其作为 JSON 返回。

在 ajax 结果中，为下拉列表创建标记并将其传递给页面中的 id。

var markup = "<option Value='0'>Select option</option>";
for (var i = 0; i < result.length; i++)
{
markup += "<option Value=" + result[i].Value + ">" + result[i].Text + "</option>";
}
$("#YOUR ID").html(markup).show();

<select class="form-control HomePageDropDown" data-val="true" id="ID" name="NAME"></select>

Answer 2

在进一步研究该问题后，我在这里找到了解决方案： 停止缓存jQuery .load响应

事实证明，这毕竟是一个缓存问题。