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 是數組的大小）。 您可能會考慮將數組作為參數發送並進行一次調用，該調用可以返回所有項目的標記，從而導致一次調用。 使用對您的用例更有意義的方法。