Rendering of popup with lots of checkboxes is so slow
<p>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:</p>

<pre><code>$("#choose-students-by-class-dialog").append(response);
</code></pre>

<p>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:</p>

<pre><code>@{ Html.RenderAction( "GetStudentsForTraining", "Training", new { trainingId = -1 } ); }
</code></pre>

<p>But then rendering of initial page was too long and page became unresponsive.</p>

<p>So can anyone suggest me what to do?</p>

<p>Here is simplified version of partial view I mentioned:</p>

<pre><code>@model Trainings.Training

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