Question

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

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

占用了大约13秒，这是无法忍受的缓慢。由于班级和学生的组合保持不变，我决定在初始页面加载和训练时渲染弹出窗口（部分视图），然后单击以检查已经检查的组合以进行该训练并显示弹出窗口。所以我像这样渲染了部分视图：

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

但是，初始页面的渲染时间太长，页面没有响应。

所以有人可以建议我做什么吗？

以下是我提到的部分视图的简化版本：

{{1}}

Answer 1

最佳解决方案可能是不来显示所有复选框你可以使用你认为最合适的解决方案：分页，无限滚动等。

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

渲染弹出窗口有很多复选框是如此之慢

1 个答案: