Rendering of popup with lots of checkboxes is so slow

Question

I have partial view which should be content of jquery popup window. It contains a lot of checkboxes, for example 50 classes * 200 students = 10 000 checkboxes. When user clicks on one training in main view then the popup should open with options to select students by class (10 000 checkboxes). First I tried on training click to use ajax and get all combinations (checked and unchecked) and append it to parent div of popup. But problem was that appending like this:

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

took up about 13 seconds, which is unbearable slow. Since combinations of classes and students remains the same I decided to render that popup(partial view) at initial page load and on training click just to check already checked combinations for that training and show popup. So I rendered partial view like this:

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

But then rendering of initial page was too long and page became unresponsive.

So can anyone suggest me what to do?

Here is simplified version of partial view I mentioned:

@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

Best solution would probably be not to display all the checkboxes.
You can use whichever solution you think fits best: pagination, infinite scroll, etc.

Here's a similar question: How to improve performance of ngRepeat over a huge dataset (angular.js)?
The solution provided uses AngularJS but the same principle can be applied using jQuery or vanilla JS.