隐藏 Gridview 直到数据表加载

Question

使用Gridview和Datatables，由于Gridview加载速度比datatable快，我想隐藏它直到datatable加载完成，这里找一个Gif of what happens (not mine Original Post).

我试图将显示属性更改为“none”并在数据表准备好后将其设置为“运行-in”，但我得到的结果是 image（请见下面的代码）还尝试设置 Gridview.hide() 并在加载后 Gridview.show() 但它加载 gridview 然后隐藏它然后再次显示它。

HTML

<div class="spinner-border text-primary" style="display:block" id="spinner" runat="server" role="status">
<span class="sr-only">Loading...</span>
</div>
<asp:GridView ID="GridViewParts" style="display:none" OnRowDataBound="GridViewQuotes_RowDataBound"
runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSourcePart" >

剧本

$(document).ready(function () {
var table = $('#<%= GridViewParts.ClientID %>').DataTable(
   "fnDrawCallback": function () {
   // Hide the Loading Spinner...
   $('#<%= spinner.ClientID %>').hide();
   $('#<%= GridViewParts.ClientID %>').style.display ='run-in';
}

我做了一些研究，关于这个主题的帖子一直没有最终答案。

Answer 1

好的，所以我们要显示微调器，然后加载 table。

嗯，我打了一些相当大的 tables，响应时间不到一秒。我不明白如何（或为什么）加载一个包含超过 100 条记录的 gridview。达到这个数量之后，您就会用这么长的列表来折磨和虐待您的用户。所以根本不清楚为什么加载时间无论如何都不能低于 1 秒。

接下来，如果网格真的要有很多记录，那么你真的需要引入一个数据分页器。这又会说一次只能拉取 30-40 条记录，再一次，这意味着延迟很少。

然而，说了这么多？那么，我们可以这样设置：

当我们显示页面时，我们还会显示微调器。然后我们让客户端浏览器触发按钮加载并显示网格。

所以，让我们将微调器放在页面上 - 一个按钮和一个网格视图。

单击按钮时将显示我们的网格 - 我们将隐藏此按钮并让浏览器自动为我们单击此按钮。

既然网页和后台代码运行都是一次性的，那我们就不能写后台代码来显示微调器，加载网格，隐藏微调器了。我们不能这样做，因为所有 3 个操作都将运行在代码隐藏中一次。当代码隐藏在运行s 时，网页就在服务器上。只有当后面的代码完成后，页面才会发送到客户端，然后显示内容。

因此，我们必须执行以下操作：

让页面加载，代码隐藏运行s，然后将其发送到客户端。此时页面将显示微调器或其他内容。

然后浏览器端（客户端）现在必须触发网格视图加载。如前所述，我们只使用放置在表单上的常规标准按钮。

所以，我们有这个标记：

        <div id="MySpinner" runat="server">
            <img src="Content/wait2.gif" />
        </div>

        <asp:Button ID="cmdLoadGrid" runat="server" Text="Button" ClientIDMode="Static" Style="display:normal" />

        <div id="MyGrid" runat="server">
            <asp:GridView ID="GridView1" runat="server"></asp:GridView>
        </div>

        <script>
            function LoadMyGrid() {
                mybtn = document.getElementById("cmdLoadGrid")
                mybtn.click()
            }
        </script>

所以它看起来像这样：

好的，现在让我们双击按钮，我们跳到后面的代码。

我们有这个：

Protected Sub cmdLoadGrid_Click(sender As Object, e As EventArgs) Handles cmdLoadGrid.Click

    Dim strSQL As String = "SELECT ID, FirstName, LastName, HotelName, City from tblHotels"

    Using cmdSQL As New SqlCommand(strSQL, New SqlConnection(My.Settings.TEST3))

        cmdSQL.Connection.Open()
        GridView1.DataSource = cmdSQL.ExecuteReader
        GridView1.DataBind()

    End Using

    ' hide the spinner
    MySpinner.Style("Display") = "none"
    MyGrid.Style("Display") = "normal"

End Sub

好的，现在让我们隐藏标记中的按钮。

例如：

<asp:Button ID="cmdLoadGrid" runat="server" Text="Button" ClientIDMode="Static" Style="display:none" />

好的，现在在我们的第一个页面加载中，我们将页面设置为 run/trigger 我们上面的 js 例程，点击我们的按钮运行后面的代码来加载网格。

但是，由于此按钮点击发生在页面发送到客户端并呈现之后，因此用户将在加载网格时看到微调器。

加载事件是这样的：

    If IsPostBack = False Then
        ' first page load - set our client side function
        ' LoadMyGrid() to run

        Dim strMyJava = "LoadMyGrid()"
        Page.ClientScript.RegisterStartupScript(Me.GetType(), "My Load script", strMyJava, True)

    End If

我们已经做到了。

结果如下所示：

如前所述，由于网格加载速度如此之快，因此微调器不会在视图中停留很长时间。但是，如果网格确实需要几秒钟，那么微调器将显示几秒钟。

隐藏 Gridview 直到数据表加载

Hide Gridview Until Datatable Loads

asp.net

gridview

datatables