c# - 显示进度条，直到 webgrid 完全加载并分页到 MVC 中的 webgrid 中的下一页或上一页

Question

我试图显示一个进度条，直到我的网格完全加载，我看到了他们基于按钮点击的各种方法，但我无法想出一种方法来显示进度条，直到我的网格完全加载以及何时我导航到 webgrid 中的其他页面。这是我第一次使用 webgrid，我不知道它的事件会触发在页面上显示图像的方法。

我想在页面上显示这个 div，直到我的 webgrid 完全加载或更改

@<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001; opacity: .8; filter: alpha(opacity=70); display: none">
            <p style="position: absolute; top: 30%; left: 45%; color: White;">
                Loading, please wait...<img src="../../Content/themes/base/images/ajax-loading.gif">
            </p>
        </div>

这是我显示 webgrid 的代码

  @Using Html.BeginForm()
            @<div>            
                @Code
            Dim grid = New WebGrid(Nothing, ajaxUpdateContainerId:="gridContent")
            Dim pageSize As Integer = ViewBag.PageSize
            If pageSize = 0 Then
                grid.Bind(ViewBag.GridData, autoSortAndPage:=True)
            Else
                grid.Bind(ViewBag.GridData, , rowCount:=pageSize, autoSortAndPage:=False)
            End If
                    @<div id="gridContent">
                        @grid.GetHtml(tableStyle:="gridView",
                          headerStyle:="gridViewheader",
                          alternatingRowStyle:="alternateItemStyle",
                         columns:=grid.Columns(grid.Column("emp_NO", "emp Number", canSort:=True),
                                               grid.Column("emp_TYPE_CODE", "emp Type Code" canSort:=False),                          
                                               grid.Column("emp_NAME", "emp Name", canSort:=False),
                                               grid.Column("ADDRESS", "Address", canSort:=False),                    

                    </div>          
                End code
            </div>
        End Using

Answer 1

试试这个:::

div #spinner {
                display: none;
                width: auto;
                height: auto;
                position: fixed;          
                background: url(spinner.gif) no-repeat center #fff;
                text-align: center;
                padding: 10px;
                font: bold 16px Tahoma, Geneva, sans-serif;
                border: 1px solid #666;
                margin-left: -50px;
                margin-top: -50px;
                z-index: 2;
                overflow: auto;
            }

    function showProgress() {
                if (!spinnerVisible) {
                    $("#spinner").fadeIn("fast");
                    spinnerVisible = true;
                }
            };
            function hideProgress() {
                if (spinnerVisible) {
                    var spinner = $("#spinner");
                    spinner.stop();
                    spinner.fadeOut("fast");
                    spinnerVisible = false;
                }
            };

            $(document).ajaxStart(function () {
                showProgress();           
            }).ajaxStop(function () {
                hideProgress();
            });