Jquery lädt nicht Teilansicht wie es sollte

Question

Ich habe Probleme beim Laden Teilansichten in MVC. Ich versuche, die Ansicht mit jquery zu laden und es funktioniert irgendwie. Es zeigt entweder zwei divs gefüllt mit den richtigen Informationen oder vier gefüllt mit dem gleichen. Aber es durchläuft das Array, so dass sich der Parameter ändert und ich eine Warnung erhalte.

der Prozess oder Thread ist seit dem letzten Schritt geändert

Ich habe ein Array in jquery, die mit vier Werten gefüllt ist, und ich brauche den Wert in dieser Liste als Paramater in der Action.

Der Code Ich habe

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

und 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 }); 
}); 

});

Ich würde wirklich einige Hilfe oder Ratschläge, wie dies funktioniert, zu schätzen wissen.

Answer 1

Das Problem ist, dass Sie für jeden AJAX-Aufruf die Antwort des AJX-Aufrufs auf das Div mit Klasse number laden. Also wird der Ajax-Aufruf, der die letzte Antwort erhält, verwendet, um alle Divs mit dieser CSS-Klasse zu aktualisieren. Dies ist der Grund, warum Sie mehr als ein divs mit der gleichen Antwort zur Zeit sehen, aber dies wird auch zufällig sein, weil Ihr Server jedes Mal andere Zeit braucht, um für jeden Anruf zu antworten. Manchmal ist der Anruf für TV6 derjenige, der mehr Zeit braucht. Da Ajax asynchron ist, aktualisiert die Antwort alle verfügbaren divs mit der Klasse number an diesem Punkt. Es ist möglich, dass Ihre Schleife ihre zweite Iteration ausführt, also haben Sie nur zwei Divs mit dieser CSS-Klasse, daher werden nur diese zwei Divs aktualisiert.

Idealerweise möchten Sie auf das div laden, das für das Spezifische in dem Array erstellt wurde, das Sie loopen.

Dies sollte es tun.

$(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); 
    }); 


}); 

Denken Sie daran, dass Ihre aktuelle Ansatz ist n die Anzahl der Anrufe an den Server zu machen (wobei n die Größe des Arrays ist). Sie könnten in Erwägung ziehen, das Array als Parameter zu senden und einen einzelnen Aufruf auszuführen, der das Markup für alle Elemente zurückgeben kann, was zu einem einzigen Aufruf führt. Verwenden Sie den Ansatz, der für Ihren Anwendungsfall sinnvoller ist.