渲染带有大量复选框的弹出窗口非常慢答案

【问题标题】：Rendering of popup with lots of checkboxes is so slow渲染带有大量复选框的弹出窗口非常慢
【发布时间】：2016-03-25 10:55:46
【问题描述】：

我有部分视图，它应该是 jquery 弹出窗口的内容。它包含很多复选框，例如 50 个班级 * 200 个学生 = 10 000 个复选框。当用户在主视图中单击一项培训时，应打开弹出窗口，其中包含按班级选择学生的选项（10 000 个复选框）。首先，我尝试训练单击以使用 ajax 并获取所有组合（选中和未选中）并将其附加到弹出窗口的父 div。但问题是这样附加：

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

用了大约 13 秒，慢得让人难以忍受。由于班级和学生的组合保持不变，我决定在初始页面加载和培训时呈现该弹出窗口（部分视图），单击以检查该培训的已检查组合并显示弹出窗口。所以我渲染了这样的部分视图：

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

但随后初始页面的渲染时间过长，页面变得无响应。

那么谁能建议我怎么做？

这是我提到的局部视图的简化版本：

@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>

【问题讨论】：

标签： jquery asp.net-mvc razor popup

【解决方案1】：

最好的解决方案可能是不显示所有复选框。
您可以使用任何您认为最适合的解决方案：分页、无限滚动等。

这是一个类似的问题：How to improve performance of ngRepeat over a huge dataset (angular.js)?
提供的解决方案使用 AngularJS，但使用 jQuery 或 vanilla JS 可以应用相同的原理。

【讨论】：