Jquery 没有像它应该的那样加载部分视图

Question

我在 mvc 中加载部分视图时遇到问题。 我试图用 jquery 加载视图，它有点工作。 它要么显示两个填充了正确信息的 div，要么显示四个填充了相同信息的 div。 但它遍历数组，因此输入参数发生变化，我收到警告。

自上一步以来进程或线程已更改

我在 jquery 中有一个数组，它填充了四个值，我需要该列表中的值作为 ActionResult 中的参数。

我有的代码

public ActionResult TvShow(string channel)
    {
        var model = un.SortAllPrograms(channel);
        return PartialView("TvShow", model);
    }

和jQuery

$(document).ready(function () {
var nameOfChannel = ["TV3", "TV4", "TV6", "TV8"];
debugger
$.each(nameOfChannel, function (index, value) {
    $('.showContainer').append('<div class="number">' + value + '</div>');
    $('.number').load('Home/TvShow', { channel: value });
});

});

我真的很感激一些关于如何使这项工作的帮助或建议。

Answer 1

问题是，对于每个 ajax 调用，您正在将 ajax 调用的响应加载到具有 class number的 div 。 因此，获取最后响应的 ajax 调用将用于使用该 css 类更新所有 div 。 这就是您一次看到多个具有相同响应的 div 的原因，但这也是随机的，因为每次您的服务器对每次调用的响应时间都不同。 有时，对TV6的呼唤会花费更多时间。 由于 ajax 是异步的，当响应返回时，它会更新所有可用的 div 和当时的类number 。 您的循环可能正在执行它的第二次迭代，因此您只有 2 个带有该 css 类的 div，因此它只会更新那 2 个 div。

理想情况下，您希望加载到为您正在循环的数组中的特定对象创建的 div。

这应该这样做。

$(function() {

    var nameOfChannel = ["TV3", "TV4", "TV6", "TV8"];

    $.each(nameOfChannel, function (index, value) {
        var $d = $("<div class='number'>")
                                      .load('@Url.Action("TvShow")',{ channel: value });
        $('.showContainer').append($d);
    });


});

请记住，您当前的方法是对服务器进行 n 次调用（其中 n 是数组的大小）。 您可能会考虑将数组作为参数发送并进行一次调用，该调用可以返回所有项目的标记，从而导致一次调用。 使用对您的用例更有意义的方法。