Rendern von Popup mit vielen Kontrollkästchen ist so langsam

Question

Ich habe Teilansicht, die Inhalt von Jquery Popup-Fenster sein sollte. Es enthält viele Checkboxen, zum Beispiel 50 Klassen * 200 Studenten = 10 000 Checkboxen. Wenn der Benutzer auf ein Training in der Hauptansicht klickt, sollte das Popup mit Optionen zur Auswahl von Schülern nach Klasse (10 000 Checkboxen) geöffnet werden. Zuerst habe ich versucht, auf Training zu klicken, um Ajax zu verwenden und alle Kombinationen (markiert und ungeprüft) zu erhalten und an das Eltern-Div-Popup anzuhängen. Aber das Problem war das Anhängen wie folgt:

$("#choose-students-by-class-dialog").append(response); 

dauerte etwa 13 Sekunden, was unerträglich langsam ist. Da die Kombinationen von Klassen und Schülern gleich bleiben, habe ich mich entschieden, das Popup (Teilansicht) beim ersten Seitenladen und beim Trainingsklick zu erstellen, nur um bereits geprüfte Kombinationen für dieses Training zu überprüfen und Popup anzuzeigen. So übertrug ich Teilansicht wie folgt aus:

@{ Html.RenderAction("GetStudentsForTraining", "Training", new { trainingId = -1 }); } 

Aber dann der anfänglichen Seite Rendering war zu lang und Seite wurde nicht reagiert.

Also kann mir jemand vorschlagen, was zu tun ist?

Hier wird Version von Teilansicht vereinfacht I erwähnt:

@model Trainings.Training 

<div id="choose-students-by-class-dialog" title="select students" style="display:none"> 
    @using (Html.BeginForm("SetStudentsForClass", FormMethod.Post, new { id = "chooseStudentsByClassesForm", Area = "TimeTracking" })) 
    { 
     @Html.HiddenFor(m => m.TrainingId) 
     <div class='cpCheckBoxes'> 
      @for (int i = 0; i < Model.ClassWithAssignedStudents.Count; i++) 
      { 
       @Html.HiddenFor(m => Model.ClassWithAssignedStudents[ i ].Id) 
       string className = Model.ClassWithAssignedStudents[ i ].Code + " (" + Model.ClassWithAssignedStudents[ i ].Name + ")"; 
       <div class="cpEngagement"> 
        <div class='cpExpandCollapseIcons'></div> 
        @if (Model.ClassWithAssignedStudents[ i ].AssignedStudents.All(u => u.IsAssigned)) 
        { 
         @Html.CheckBox(Model.ClassWithAssignedStudents[ i ].Code, new { @class = "classCheckboxes", @checked = "checked" }) 
        } 
        else 
        { 
         @Html.CheckBox(Model.ClassWithAssignedStudents[ i ].Code, new { @class = "classCheckboxes" }) 
        } 
        <div class="cpClassName">@className</div> 
        <div class="cpInnerCheckBoxes cpInnerCheckBoxesHidden"> 
         @for (int j = 0; j < Model.ClassWithAssignedStudents[ i ].AssignedStudents.Count; j++) 
         { 
          <div class="cpStudent"> 
           @Html.HiddenFor(m => m.ClassWithAssignedStudents[ i ].AssignedStudents[ j ].UserId) 
           @Html.CheckBoxFor(m => m.ClassWithAssignedStudents[ i ].AssignedStudents[ j ].IsAssigned) 
           <span class="cpStudentFullname"> 
            @Model.ClassWithAssignedStudents[ i ].AssignedStudents[ j ].UserFullName 
           </span> 
          </div> 
         } 
        </div> 
       </div> 
      } 
     </div> 
    } 
</div> 

Answer 1

beste Lösung wahrscheinlich wäre nicht alle Kontrollkästchen angezeigt werden soll.
Sie können je nachdem, welche Lösung Sie verwenden denken am besten passt: Paginierung, unendliche Scroll usw.

Hier ist eine ähnliche Frage: How to improve performance of ngRepeat over a huge dataset (angular.js)?
Die bereitgestellte Lösung verwendet AngularJS aber das gleiche Prinzip mit jQuery oder Vanille JS angewendet werden.