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()并运行SomeOtherId div上的.load（），这会导致断点被击中。 controller方法呈现一个局部视图，该局部视图包含另一个类似于此@Html.DropDownListFor(model => model.SomeEvenOtherProperty, (SelectList)Model.SomeEvenOtherOtherProperty, htmlAttributes: new { @class = "form-control" })的列表，以代替旧列表。现在，如果我从第一个下拉列表中选择了一个不同的选项，则再次会命中断点，第二个下拉列表将被更新。

当我返回选择第一个选项时，出现了问题，没有找到断点，但是列表仍在更新。我需要每次都到达该断点，但是似乎它实际上只调用一次控制器方法。我已经调试了Java语言，并且可以确认每次都调用SomeFunction()。我也尝试过放置带有警报的回调，以确认.load（）函数已成功执行。即使重新加载页面后，此问题仍然存在。对于一个选项，我可以两次击破该断点的唯一方法是：

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

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

其他详细信息：

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

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

在进一步研究问题之后，我在这里找到了解决方案：Stop jQuery .load response from being cached

结果证明这毕竟是一个缓存问题。

jQuery AJAX .load（）仅命中一次控制器方法

2 个答案: